redux React/ typescript :参数'props'隐含有'any'类型错误

cgfeq70w  于 2022-11-24  发布在  React
关注(0)|答案(8)|浏览(130)

当我从react-bootstrap中尝试这个示例代码时,我不断收到错误消息,例如“参数'context'隐式具有'any'类型;“属性”value“在类型”Readonly〈{}〉“上不存在。”
格式为.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 />
);
eulz3vhy

eulz3vhy1#

在TypeScript中,一个React.Component是一个泛型类型(aka React.Component〈PropType,StateType〉),所以你要为它提供(可选的)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,
    }));
  };
}
tpgth1q7

tpgth1q72#

在函数Component中,仅在props处给予any

const CustomImage = (props: any) => {
    return <Image
        {...props}
        loader={customLoader}
        unoptimized={true}
    />
}
bz4sfanl

bz4sfanl3#

表示功能组件

就这样加一句:

函数名(属性:任意)

{返回(〈〉〈/〉)}

r3i60tvu

r3i60tvu4#

typeScript 中,您应该安装@types/react,并且在扩展React.Component时,您需要指定propsstate类型。

import * as React from 'react'

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

interface State {
  ... // state types
}

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

9rygscc15#

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

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

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

ztigrdn86#

我刚在一个功能组件上发现此错误。
为了获得props.children等信息以及自定义道具,您应该执行以下操作。

import { FunctionComponent } from 'react';

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

q9yhzks07#

在类型脚本中,您需要指定要发送的属性的类型,否则它将采用在@types/react中定义的默认类型。如果您不想指定任何类型,则显式要求组件期望状态和属性为“any”类型。

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

第一个类型参数用于定义您所期望的属性类型,另一个用于组件的状态类型。

hc2pp10m

hc2pp10m8#

tsconfig.json集合"noImplicitAny": false,中,这对我很有效

相关问题