react/typescript: 매개 변수 'props'에 암시적으로 '임의' 형식 오류가 있습니다.

react/typescript: 매개 변수 'props'에 암시적으로 '임의' 형식 오류가 있습니다.

react-bootstrap에서 이 샘플코드를 시도하면 "파라미터 'context'에는 암묵적으로 'any' 타입이 있습니다; "Property '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;

점보.tsx:

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

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> {... }

생성자 매개 변수의 유형을 지정하면 이 문제가 해결되었습니다.

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

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

기능하는 컴포넌트에서 이 에러가 발생했습니다.

다음과 같은 정보를 얻기 위해props.children커스텀 소품뿐만 아니라 다음 작업을 해야 합니다.

import { FunctionComponent } from 'react';

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

인tsconfig.json세트"noImplicitAny": false,이것은 나에게 효과가 있었다.

type script에서는 송신할 소품 유형을 지정해야 합니다.그렇지 않으면 기본 타입으로 정의된 tin @types/timeouts 를 사용합니다.유형을 지정하지 않으려면 구성 요소에 '임의' 유형의 상태와 소품을 예상하도록 명시적으로 요청하십시오.

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

첫 번째 타입 인수는 기대하는 소품 유형을 정의하는 것이고, 다른 타입 인수는 컴포넌트 상태 유형을 정의하는 것입니다.

TypeScript 내에서 리액트.컴포넌트는 범용 타입(일명 리액트)입니다.컴포넌트 <PropType, StateType>).따라서 (옵션) 프로펠러 및 상태 유형 파라미터를 제공해야 합니다.

다음과 같습니다.

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,
    }));
  };
}

기능에서 컴포넌트는 소품에서 아무 것이나 제공합니다.

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

기능 컴포넌트용

다음과 같이 추가합니다.

함수명(파일:임의)

{ return (</>) }

언급URL : https://stackoverflow.com/questions/49144169/react-typescript-parameter-props-implicitly-has-an-any-type-error