Typescript가있는 ReactJS : "TypeError : 정의되지 않은 'array'속성을 읽을 수 없습니다.

Question

최근에 .jsx에서 .tsx로 옮겼습니다. 동일한 문제가 발생했으나 올바르게 입력하지 않았습니다 (typescript로 이동하기 전에, 모두 잘 작동했다). 필자는 타이프 스크립트와 관련이 있다고 생각하지만, 나는 무엇을 모르고있다. 아무도 나 도와 줄 수 없어?

//Board.tsx file 

//Dependencies 
import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

//Components 
import Button from '../components/Button'; 
import TaskCard from '../components/TaskCard'; 

//Data 
import tasks from '../data/dataTasks'; 
import boards from '../data/dataBoards'; 

class Board extends Component<any, any>{ 
    static propTypes = { 
     boards: PropTypes.array.isRequired, 
     task: PropTypes.array.isRequired 
    } 

    render(){ 
     const { boards, task }:any = this.props; 


     return(
      boards && boards.map(
       (boards, key) => 
       <div key={key} className="col-xs-3"> 
        <div className="card"> 
         <h4 className="card_title txt-secondary-color">{boards.name}</h4> 
         { 
          //Chequeo si existen tasks para cada board, sino muestro mensaje 
          tasks.filter(task => task.board == boards.id).length!=0 ?(
          <div className="card_container_items"> 
           {/* Filtro los tasks que coincidan con el board actual */} 
           <TaskCard tasks={tasks.filter(task => task.board == boards.id)}/> 
          </div> 
         ): (
          <div className="v-padding v-margin center-align"> 
           <p className="txt-tertiary-color">Aún no tenés tareas {boards.advice}.</p> 
          </div> 
          ) 
         } 
         <div className="card_actions row no-margin"> 
          <Button text="Nuevo" icon="+" classNameCustom="btn_primary" /> 
         </div> 
        </div> 
       </div> 
      ) 
     ) 
    } 
} 

export default Board; 

Answer 1

당신은 어떤 기본 내보내기가 없습니다, 당신은 당신이하지 않으면 같은 네임 스페이스가 방식

import * as PropTypes from 'prop-types' 

에 액세스 할 수 *로 가져와야 제대로 PropTypes 모듈을 가져 오지 않은 유형 내가 타이프 프로젝트에 PropTypes를 사용하는 것이 필요 찾을 수 있지만 당신이 ㄱ해야 당신이,

npm install -D @types/prop-types 

개인적으로 프로젝트에 자사의 유형을 추가해야합니다 설치 어쨌든 여러분의 소품 인터페이스를 타이핑하기 때문에, 실제 런타임 검사가 유용 할 때가 거의 없다. 왜냐하면 대부분의 이슈가 컴파일러에 의해 브라우저에 도착하기 전에 잡힐 것이기 때문이다. 예를 들어 ...

export interface IBoard { 
    // your board properties type defs 
} 

export interface ITask { 
    // task property type defs 
} 

export interface IBoardProps { 
    boards: IBoard[] // a required array of IBoard objects 
    task: ITask // a required ITask object 
} 

// the type `P` passed to `Component<P>` tells the compiler what type of `this.props` must be 
class Board extends Component<IBoardProps>{ 
    // no need for `static propTypes` 
    // as compiler knows and checks type of supplied props 
    // and also if required props are missing 
    // and won't compile if they are incorrectly implemented 

    render() { 
    const {boards, task} = this.props // don't type these as `any`, the compiler will infer their actual type from the props 
    // ... now you code is type safe from here, as types are inferred 

    } 
} 

export default Board