Twitter bootstrap react/typescript：参数'；道具'；隐式具有'；任何'；类型错误

当我从react bootstrap尝试此示例代码时，我不断收到错误，例如“参数'context'隐式地具有'any'类型；“类型'Readonly'上不存在属性'value'。”

在form.tsx中：

class FormExample extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: ''
    };
  }

  getValidationState() {
    const length = this.state.value.length;
    if (length > 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
    return null;
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <form>
        <FormGroup
          controlId="formBasicText"
          validationState={this.getValidationState()}
        >
          <ControlLabel>Working example with validation</ControlLabel>
          <FormControl
            type="text"
            value={this.state.value}
            placeholder="Enter text"
            onChange={this.handleChange}
          />
          <FormControl.Feedback />
          <HelpBlock>Validation is based on string length.</HelpBlock>
        </FormGroup>
      </form>
    );
  }
}

export default FormExample;

类FormExample扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.handleChange=this.handleChange.bind（this）；
此.state={
值：“”
};
}
getValidationState（）{
常量长度=this.state.value.length；
如果（长度>10）返回“成功”；
否则，如果（长度>5）返回“警告”；
否则如果（长度>0）返回“错误”；
返回null；
}
手变（e）{
this.setState（{value:e.target.value}）；
}
render（）{
返回(
带有验证的工作示例
验证基于字符串长度。
);
}
}
导出默认格式示例；

在Jumbo.tsx中：

const Jumbo = () => (
   <FormExample />
);

const Jumbo=（）=>(
);

在类型脚本中，您需要指定要发送的道具类型，或者它采用tin@types/react定义的默认类型。如果您不想指定任何类型，请明确要求组件预期状态和“any”类型的道具

class FormExample extends React.Component<any,any> {

类FormExample扩展了React.Component{

第一个类型参数用于定义所需的道具类型，另一个用于组件的状态类型。

在typeScript中，您应该安装并扩展

React。组件

您需要指定

道具

和

状态

类型。 这是一个例子

import * as React from 'react'

interface Props {
  ... // your props validation
}

interface State {
  ... // state types
}

class FormExample extends React.Component<Props, State> {... }

import*作为来自“React”的React
界面道具{
…//您的道具验证
}
界面状态{
…//状态类型
}
类FormExample扩展了React.Component{…}

在我的例子中，指定构造函数参数的类型解决了这个问题

class Clock extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }
}

类时钟扩展React.Component{
构造器（道具：任何）{
超级（道具）；
}
}

我刚在一个功能组件上遇到这个错误

为了获得诸如

props.children

以及自定义道具之类的信息，您应该执行以下操作

import { FunctionComponent } from 'react';

const Layout: FunctionComponent<{ hello: string }> = props => (
  <div style={layoutStyle}>
    <Header />
    {props.hello}
    {props.children}
  </div>
);

从'react'导入{FunctionComponent}；
常量布局：FunctionComponent=props=>(
{道具，你好}
{props.children}
);

或者很容易在tsconfig.json中将noImplicitAny设置为false是否有任何资源可以使用上述模式？@Pavel Nazarov No！这违背了TS的目的。它违背了TypeScript严格键入的目的吗？如果组件没有收到任何道具，最好说道具：{}，而不是任何可能的重复