Question

我尽可能缩短代码以消除混淆，实际上我正在尝试将我在React jsx上构建的应用程序转换为React Typescript（tsx文件）。

我收到的

错误是 - '[ts]属性'州'在类型'App'上不存在。对于'[ts]属性也是如此类型'App'.any'上不存在' setState ' 请帮帮我...

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
  }

我的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

首先，您应确保安装了react和react-dom的类型定义。使用NPM，你可以做到：

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

然后你的代码出现了一些问题，我已经纠正了内联：

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 2

首先，您必须安装@types/{react packages}。然后你必须像这样导入React：import * as React from "react"

然后你的代码看起来像这样：

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

或者你可以在没有这样的构造函数的情况下编写它：

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

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

希望这会对你有所帮助。

Answer 3

您正在放置通用类型PROPS＆amp;国家处于错误的位置。

第一个是道具，第二个是州。

export default class App extends Component<PROPS, STATE>

Answer 4

1）。运行

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

或

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

2）。将任何文件重命名为TypeScript文件（例如，将src / index.js更改为src / index.tsx）

3）。重新启动开发服务器！

享受：）

React将JSX应用程序转换为Typescript

4 个答案: