유형 스크립트로 대응 - 유형 { }에 유형에서 다음 속성이 누락됨

유형 스크립트로 대응 - 유형 { }에 유형에서 다음 속성이 누락됨

TypeScript를 사용한 리액트를 배우려고 하는데, 조금 애매한 TS 에러가 계속 발생하고 있는 것 같습니다.

아래 3개의 파일로 된 코드를 가지고 있기 때문에 컴파일 및 실행 시 정상적으로 동작합니다.TypeScript에 의해 발생하는 이 에러는 매우 귀찮다.

"유형 '{ id: any; 키: any; }'에 유형 'ProfileCardProps'에서 다음 속성이 없습니다. 로그인, 이름"

// Form.tsx

import * as React from 'react';
import Axios from 'axios';

export default class Form extends React.Component<any,any>{
  constructor(props: any){
    super(props);
    this.state = { userName: ""};
  }

  handleSubmit = (event: React.FormEvent<EventTarget>): void => {
    event.preventDefault();

   //get request...
    .then(resp => {
        this.props.onSubmit(resp.data);
    console.log(resp.data);
    this.setState({userName: ''});
  };

  public render() {
    return(
      <div>
        <div className="col-sm-12">
          <form onSubmit={this.handleSubmit}>
            <label>Run lookup:<br />
              <input type="text"
                value = {this.state.userName}
                onChange = {(event) => this.setState({userName: event.target.value})}
                placeholder = "Enter Username..." >
              </input>
            </label>
            <button type="submit">Add user info</button>
          </form>
          <br />
        </div>
      </div>
    );
  };

}

// Card . tsx

import * as React from 'react';

interface ProfileCardProps{ 
  login: string; 
  name: string; 
}

const ProfileCard = (props: ProfileCardProps) => {

  return(
    <div className="card col-xs-1 col-sm-6 col-md-4 col-lg-3">
      <div className="profileWrapper">
        <div className="userName">
          <p>{props.login}</p>
        </div>
        <div className="user">
          <h3>{props.name}</h3>
        </div>
      </div>
    </div>
  )
}

const CardList = (props: { cards: { map: (arg0: (card: any) => JSX.Element) => React.ReactNode; }; }) => {
    return(
      <div className="row">

         // This is the line that is throwing the error
        {props.cards.map((card: { id: any; }) => <ProfileCard key={card.id} {...card} />)}
      </div>
    )
}

export default CardList;

//프로파일리스트

import * as React from 'react';
import Form from './Form';
import CardList from './ProfileCard';

import "./ProfileStyles.scss";

export default class Profiles extends React.Component<any, any>{
state = {
    cards: [
      { login: "exampleLogin",
        name:"exampleName",
        key: 1
      },
      { login: "exampleLogin2",
        name:"exmapleName2",
        key: 2
      }
    ]
  }

  addNewCard = (cardInfo: any) => {
    this.setState((prevState: { cards: { concat: (arg0: any) => void; }; }) => ({
      cards: prevState.cards.concat(cardInfo)
    }));
  }


  public render() {
    return(
      <div className="cardSection">
        <h2>Profiles</h2> 
        <Form onSubmit={this.addNewCard} />
        <CardList cards={this.state.cards} />
      </div>
    )
  };
}

ProfileCard 컴포넌트에 카드를 전달하면 4개의 값이 소품으로 전달됩니다.

{login: string, name: string, key: number, id: number}

단, 고객님의 인터페이스에는

interface ProfileCardProps{ 
  login: string; 
  name: string; 
}

키와 ID를 추가하면 문제가 해결됩니다.

interface ProfileCardProps{ 
  login: string; 
  name: string;
  id:any;
  key: any;
}

이러한 유형의 인터페이스를 사용하려면 인터페이스의 모든 멤버가 null이어야 합니다.

interface ProfileCardProps{ 
  login: string; 
  name: string;
  id?:number; 
}

비슷한 에러 메시지를 확인하기 위해 약 1시간을 소비했습니다만, 적절한 인터페이스를 Import 하는 것을 잊어버린 것을 알게 되었습니다.:) 아마도 누군가에게 도움이 될 것입니다.

언급URL : https://stackoverflow.com/questions/55133907/react-with-typescript-type-is-missing-the-following-properties-from-type