Question

我有一个非常基本的与tsx反应的程序，我收到一个错误，我无法弄清楚为什么

Schedulers.io()

git clone this代码

Answer 1

在撤下你的回购并检查之后，我意识到你没有react typings的打字稿。

键入是管理和安装TypeScript定义的简单方法

添加此行

"@types/react": "^16.0.25" // or another version you prefer

到package.json并再次运行npm i解决了这个问题。尝试一下，让我知道这是否解决了你的问题：）

PS：TypeScript要求您描述对象和数据的形状。如果你看一下我之前提供的other answer，那它就是一个更长，复杂的版本你需要指定一个描述你的道具的类型，并且需要将它传递给有问题的组件

Answer 2

Typescript需要知道传递给组件的props和state的形状。如果你真的想要阻止Typescript在你的组件中强制执行打字（顺便说一下，打败使用Typescript的整个目的），那么需要访问传递给它的props或state的组件必须指定类型或形状，如any。也就是说，您的组件看起来像这样

React.Component<any, any>

而不仅仅是React.Component，如果该类需要props和state ，这也是扩展类的错误方法。

为any和props传递state类型意味着相关组件必须接受props和state的任何形状（类型）

试试这个

import * as React from "react";
import * as ReactDOM from 'react-dom';

export class Home extends React.Component<any, any> {
  render() {
    console.log(this.props)
    return (
      <div>Working</div>
    )
  }
}

class App extends React.Component{
  render() {
    return (
      <Home value="abc" />
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

并且所有内容都应该按预期工作，因为您在类型检查方面为您提供了Typescript。

您还可以查看演示here

如果你真的想要强制执行props和/或state的形状（类型），那么你必须通常使用interface或{{来定义这些形状3}}。以下是使用前一种方法强制使用道具形状的相同代码示例：

import * as React from "react";
import { render } from "react-dom";

interface Props {
  value:string,
  name:string
}

export default class Home extends React.Component<Props>{
  render() {
    console.log(this.props)
    return (
      <div>Working. The props values are: {this.props.value} {this.props.name}</div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Home value="abc" name="def"/>
    )
  }
}

render(<App />, document.getElementById("root"));

现在，您可以永远无法将任何其他prop添加到Home界面中未定义的Props组件。例如，做一些事情：

<Home value="abc" name="DEF" somethin="else"/>

无法编译，因为somethin未在interface组件使用的Home中定义。

要强制state的形状，您必须执行与props相同的操作，即定义合约（界面）。另请注意，您仍然需要通过props NOT this访问Props，因为这只是结构的类型定义，而不是值本身的持有者。

您可以查看此替代inline type annotation

的演示

Answer 3

在 tsconfig.json 文件集上

"allowSyntheticDefaultImports": true

示例：

{
   "compilerOptions": {
     ...
     "allowSyntheticDefaultImports": true
   }
}

TS2339：'Home'类型中不存在属性'props'

3 个答案: