ReactJS with Typescript: "TypeError: Cannot read property 'array' of undefined"

Question

我最近从 .jsx 迁移到 .tsx，我遇到了同样的问题，但是我正在正确导入 PropTypes（在迁移到 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

您没有正确导入 PropTypes 模块，因为它没有默认导出，您需要使用 * 导入它才能以相同的命名空间方式访问它

import * as PropTypes from 'prop-types'

如果您没有安装类型，则需要将其类型添加到您的项目中

npm install -D @types/prop-types

虽然我个人认为没有必要在 typescript 项目中使用 PropTypes，因为无论如何你都应该输入你的 props 接口，所以只有极少数情况下实际的运行时检查是有用的，因为大多数问题都会被捕获由编译器在它进入浏览器之前。例如...

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

ReactJS with Typescript: "TypeError: Cannot read property 'array' of undefined"

ReactJS with Typescript: "TypeError: Cannot read property 'array' of undefined"

typescript

reactjs

react-proptypes