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

Posted 2023-02-22

【中文标题】反应/打字稿：参数“道具”隐含了“任何”类型错误

【英文标题】：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?的可能重复

【参考方案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,
    ));
  ;