React 将 JSX 应用程序转换为 Typescript

Posted 2023-03-13

【中文标题】React 将 JSX 应用程序转换为 Typescript

【英文标题】：React Converting JSX application to 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 的指南。

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

享受:)