React 将 JSX 应用程序转换为 Typescript

Question

I am keeping my code short as possible to remove confusion, actually i am trying to convert my application built on React jsx to React Typescript thus (tsx file).

Error that i am receiving is - '[ts] Property ' state ' does not exist on type 'App'.any ALSO same for '[ts] Property ' setState ' does not exist on type 'App'.any' Please help me on this ...

interface STATE {
  loading: boolean
};

interface PROPS {};

export default class App extends Component<STATE, PROPS> {
  constructor(props:any) {
    super(props);
    this.state = {
      fruitsData : [],
      loading: false
    };
  }

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

    //Further functions present here plus call to service and binding the 
     data received to the array fruitsData
  }

My package.json

 {

  "name": "example",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@types/classnames": "^2.2.3",
    "@types/node": "^4.0.35",
    "classnames": "^2.2.5",
    "gh-pages": "^0.12.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-scripts": "0.9.5",
    "typescript": "^2.7.0-insiders.20171214"
  },
  "dependencies": {
    "@types/react": "^16.0.34",
    "@types/react-dom": "^16.0.3",
    "awesome-typescript-loader": "^3.4.1",
    "react-search-box": "0.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Answer 1

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.

Answer 2

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
    };
  }

Answer 3

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>

Answer 4

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 (eg src/index.js to src/index.tsx)

3). Restart your development server!

enjoy :)