反应/打字稿：参数“道具”隐含了“任何”类型错误答案

【问题标题】：react/typescript: Parameter 'props' implicitly has an 'any' type error反应/打字稿：参数“道具”隐含了“任何”类型错误
【发布时间】：2018-08-15 02:21:10
【问题描述】：

当我从 react-bootstrap 尝试这个示例代码时，我不断收到错误，例如“参数‘上下文’隐式具有‘任何’类型；“属性‘值’不存在于类型‘只读’上。”

在 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;

在 Jumbo.tsx 中：

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

【问题讨论】：

Why does parameter 'props' implicitly has an 'any' type?的可能重复

标签： twitter-bootstrap reactjs typescript redux

【解决方案1】：

在 typeScript 中你应该安装 @types/react 并且在扩展 React.Component 时你需要指定 props 和 state 类型。这是一个例子

import * as React from 'react'

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

interface State {
  ... // state types
}

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

【讨论】：

或在 tsconfig.json 中轻松将 noImplicitAny 设置为 false
有没有超越上述模式的资源？
@Pavel Nazarov 不！这违背了 TS 的目的。
@thisismydesign 我想使用打字稿作为拐杖，而不是全身石膏模型（但我很高兴定义道具的形状）。
@bbsimonbb “轻松”关闭 TS 功能不是解决方案，这是一个糟糕的建议，有很多副作用，从该评论中完全不清楚。如果必须，我建议在代码中创建异常。关闭严格检查会将您的类型安全性从 100% 更改为 ???%。不太好。

【解决方案2】：

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

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

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

【讨论】：

这是否违背了 TypeScript 严格类型的目的？
如果组件没有收到任何 props，最好说 props: {} 而不是 any

【解决方案3】：

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

为了获取props.children等信息以及自定义props，您应该执行以下操作。

import { FunctionComponent } from 'react';

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

在 TypeScript 中，React.Component 是一个泛型类型（又名 React.Component）。所以你想为它提供（可选的）prop 和 state 类型参数。

看起来像这样：

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

不要忘记您可以导出/导入/扩展这些类型/接口以重用它们。

Class Methods：你可以用正常的方式来做。请记住，您的函数的任何参数也需要输入。

这将是一个类的代码：

class App extends React.Component<{ message: string }, { count: number }> {
  state = { count: 0 };
  render() {
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
  increment = (amt: number) => {
    // like this
    this.setState((state) => ({
      count: state.count + amt,
    }));
  };
}

【讨论】：