typescript props class component

1import * as React from 'react';
2
3export interface TestProps {
4    count: number;
5}
6 
7export interface TestState {
8    count: number;
9}
10 
11class Test extends React.Component<TestProps, TestState> {
12    state = { count:0  }
13    render() { 
14        return ( <h2>this is test</h2> );
15    }
16}
17 
18export default Test;

1// Declare the type of the props
2type CarProps = {
3  name: string;
4  brand: string;
5  price;
6}
7
8// usage 1
9const Car: React.FC<CarProps> = (props) => {
10  const { name, brand, price } = props;
11  // some logic
12}
13
14// usage 2
15const Car: React.FC<CarProps> = ({ name, brand, price }) => {
16	// some logic
17}
18
19

1interface IProps {
2}
3
4interface IState {
5  playOrPause?: string;
6}
7
8class Player extends React.Component<IProps, IState> {
9  // ------------------------------------------^
10  constructor(props: IProps) {
11    super(props);
12
13    this.state = {
14      playOrPause: 'Play'
15    };
16  }
17
18  render() {
19    return(
20      <div>
21        <button
22          ref={playPause => this.playPause = playPause}
23          title={this.state.playOrPause} // in this line I get an error
24        >
25          Play
26        </button>
27      </div>
28    );
29  }
30}

1class Test extends Component<PropsType,StateType> {
2  constructor(props : PropsType){
3    	super(props)
4  }
5  
6  render(){
7   	console.log(this.props) 
8    return (
9     	<p>this.props.whatever</p> 
10    )
11  }
12  
13};

1type Props = {
2  size: string;
3}
4
5const Component = ({ size = 'medium' }: Props) => (
6  <div className={cn('spinner', size)} />
7);