React 将 JSX 应用程序转换为 Typescript答案

【问题标题】：React Converting JSX application to TypescriptReact 将 JSX 应用程序转换为 Typescript
【发布时间】：2018-06-15 03:56:10
【问题描述】：

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

我收到的

错误是 - '[ts] 属性'state' 在类型'App' 上不存在。'[ts] 属性也一样'setState' 在类型 'App'.any' 上不存在请帮我解决这个问题...

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

【问题讨论】：

你确实为 react 和 ReactDOM 安装了 @types 对吗？
@Sujit.Warrier 抱歉，还没有，@types/react-dom 和 @types/react 安装正在进行中
不幸的是，我不确定我们是否有足够的资源来重现您的问题。如果您安装了必要的模块，那么我猜这个问题可能来自 TypeScript 配置不正确。你是从 create-react-app 开始的吗？如果是这样，有使用 TypeScript 的指南。

标签： reactjs typescript react-native typescript-typings

【解决方案1】：

首先你必须安装@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;
    });
  }
}

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

首先，您应该确保已安装 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
    };
  }

【讨论】：

我试过这个，但我仍然得到同样的错误。但是当我在导出默认类 App extends Component{} 之后引入 'public state: STATE;' .. 'this.state'上没有错误> 而另一方面，我仍然收到错误 '[ts] Property 'setState' does not exist on type 'App'
是的，我正在导入它：“import React, { Component } from 'react'”
是的，您可能是对的，但我确保它们已安装并存在于 package.json 中。实际上，在这之后，VSCode 也用同样的错误强调了它们......我通过添加这两行删除了它们导出默认类 App 后扩展 Component .. setState: any;公共状态：STATE；
如果你正确地扩展了React.Component<Props, State>，那么setState和state将会为你定义，所以我猜还是缺少一些东西。
感谢 - @TomFenech 的帮助，我通过按照 NPM create-react-ts 命令再次创建应用程序解决了该错误：P

【解决方案3】：

您将泛型类型 PROPS & STATES 放置在错误的位置。

第一个是 Props，第二个是 State。

export default class App extends Component<PROPS, STATE>

【讨论】：

我试过了，但我仍然遇到同样的错误。

【解决方案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)。重启你的开发服务器！

享受:)

【讨论】：