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

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

react-bootstrap에서 이 샘플 코드를 시도하면 "Parameter 'context'에 암시적으로 'any' type이 있습니다. "Property 'value'는 'Read only' type에 존재하지 않습니다."와 같은 오류가 계속 발생합니다.

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; 

점보.tsx:

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

---

type 스크립트에서 보낼 소품 유형을 지정해야 합니다. 그렇지 않으면 tin @types/types에서 정의된 기본 유형을 사용합니다. 유형을 지정하지 않으려면 구성 요소에 'any' 유형의 상태와 소품을 예상하도록 명시적으로 요청하십시오.

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

첫 번째 유형 인수는 예상되는 소품 유형을 정의하기 위한 것이고, 다른 하나는 구성 요소의 상태 유형을 정의하기 위한 것입니다.

---

에서 를 설치하고 확장하는 동안 및 유형을 지정해야 합니다. 여기 그 예가 있다.

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

---

방금 에러가 났어요.

맞춤 소품뿐만 아니라 정보를 얻기 위해서는 다음과 같이 해야 한다.

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

---

스크립트 유형 내에서 반응합니다.구성 요소는 일반 유형(React라고도 함)입니다.구성 요소 <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 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}     /> } 

---

세트에서는 이것이 나에게 효과가 있었다.

---

기능 구성요소의 경우

그냥 이렇게 추가해:

함수 이름(예:임의)

{ 반환(<> </>) }