typescript需要知道的形状props，并state传递给组件。如果你真的想阻止 Typescript 在你的组件中强制输入（顺便说一句，这违背了使用 Typescript 的全部目的），那么，需要访问props或state传递给它的组件必须指定类型或形状可以这么说，作为any。也就是说，你的组件看起来像这样
export class Home extends React.Component<any, any>
代替
export class Home extends 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 不受影响。
您也可以在此处查看演示
如果您确实想要强制执行props和/或的形状（类型），那么state您通常必须使用interface或内联类型注释来定义这些形状。这是上面相同代码的示例，它使用前一种方法强制props的形状：
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通过thisNOT访问您的via NOT，Props因为这只是结构的类型定义，而不是值本身的持有者。
您可以在此处查看此替代方案的演示