web-dev-qa-db-ja.com

react / TypeScript：パラメータ 'props'に暗黙的に 'any'タイプのエラーがあります

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;

jumbo.tsx内：

const Jumbo = () => (
   <FormExample />
);
twitter-bootstrapreactjstypescriptredux
12
newgrad

TypeScriptでは @ types/react をインストールする必要があり、React.Componentを拡張するときに、小道具と状態のタイプを指定する必要があります。ここに例があります

import * as React from 'react'

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

interface State {
  ... // state types
}

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

それがあなたを助けることを願っています

8
Harish

私の場合、コンストラクターパラメーターの型を指定すると、この問題が解決しました。

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

    constructor(props: any) {
        super(props);
    }
}
5
Ozgur Sahin

タイプスクリプトでは、送信する小道具のタイプを指定する必要があります。または、@ types/reactで定義されたデフォルトのタイプを使用します。タイプを指定したくない場合は、明示的にコンポーネントに状態と「任意の」タイプの小道具を期待するように要求してください。

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

最初のタイプの引数は、期待するプロップのタイプを定義するためのもので、もう1つはコンポーネントの状態のタイプのためのものです。

2
Sujit.Warrier

機能コンポーネントでこのエラーが発生しました。

props.childrenやカスタムプロップなどの情報を取得するには、次の手順を実行する必要があります。

import { FunctionComponent } from 'react';

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