React Converting JSX application to Typescript

First of all you must install @types/{react packages}. Then you have to import React like that: import * as React from "react"

Then your code would look like this:

interface IAppState {
  fruitsData: any[]; // change it for your type
  loading: boolean;
}

interface IAppProps {
  // your props
}

class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);
    this.state = {
      fruitsData: [],
      loading: false,
    };
  }

  public componentDidMount() {
    this.setState({
      loading: true;
    });
  }
}

or you can write it without constructor like this:

class App extends React.Component<IAppProps, IAppState> {
  public state: IAppState = {
    fruitsData: [],
    loading: false,
  }

  public componentDidMount() {
    this.setState({
      loading: true;
    });
  }
}

Hope this will help you.

First of all you should ensure that the type definitions for react and react-dom are installed. With NPM you could do:

npm install --save @types/{react,react-dom}

Then there are a few problems with your code, which I have corrected inline:

interface State {
  loading: boolean
  // add fruitsData to state
  fruitsData: string[] // or whatever type it is
}

interface Props {}

// Generic arguments are <Props, State>, not the other way around
export default class App extends Component<Props, State> {
  constructor(props: Props) { // use the correct type here
    super(props);
    this.state = {
      fruitsData : [],
      loading: false
    };
  }

You were placing generic type PROPS & STATES at wrong position.

The first one is Props and second one is State.

export default class App extends Component<PROPS, STATE>

1). run

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

2). Rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx)

3). Restart your development server!

enjoy :)