Using state in react with TypeScript

Question

I am new to TypeScript. I've got a problem with displaying this.state.something inside the render method or assigning it to a variable inside a function.

Have a look at the most important piece of code:

interface State {     playOrPause?: string; }  class Player extends React.Component {     constructor() {         super();          this.state = {             playOrPause: 'Play'         };     }      render() {         return(             <div>                 <button                     ref={playPause => this.playPause = playPause}                     title={this.state.playOrPause} // in this line I get an error                     >                     Play                 </button>            </div>         );     } } 

The errors says: "[ts] Property 'playOrPause' does not exist on type 'ReadOnly<{}>'.

I tried to declare the playOrPause property to be a type of string and it didn't work. What am I missing here to make it work?

Answer 1

You need to declare that your component is using the State interface, it used by Typescript's Generics.

interface IProps { }  interface IState {   playOrPause?: string; }  class Player extends React.Component<IProps, IState> {   // ------------------------------------------^   constructor(props: IProps) {     super(props);      this.state = {       playOrPause: 'Play'     };   }    render() {     return(       <div>         <button           ref={playPause => this.playPause = playPause}           title={this.state.playOrPause} // in this line I get an error         >           Play         </button>       </div>     );   } } 

Answer 2

In case anyone is wondering how to implement it in functional components with hooks ( not in a class):

const [value, setValue] = useState<number>(0); 

useState is a generic function, that means that it can accept a type parameter. This type-parameter will tell TypeScript which types are acceptable for this state.