在反应 typescript 中将道具传递给孩子的正确类型。 错误 ts(2322)

Question

我的代码在 Javascript 中工作，但不能在 typescript 中工作。 这个问题可能看起来冗长而复杂，但事实并非如此。 我只是想发布有效的 JS 代码，以便为这个问题提供一个坚实的起点。

我将带有虚拟数据的项目列表从仪表板传递到项目列表组件，如下所示：

仪表板组件：

import React, { Component } from 'react'
import ProjectList from '../projects/ProjectList'
import Notifications from './Notifications'
import { connect } from 'react-redux'

class Dashboard extends Component {
  render() {
    
    // console.log(this.props);
    const { projects } = this.props; //TYPE PROBLEM 1 EXPLAINED BELOW
    
    return (
      <div className="dashboard container">
        <div className="row">
          <div className="col s12 m6">
            <ProjectList projects={projects} /> //TYPE PROBLEM 2 EXPLAINED BELOW "ts(2322)"
          </div>
          <div className="col s12 m5 offset-m1">
            <Notifications />
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    projects: state.project.projects
  }
}

export default connect(mapStateToProps)(Dashboard)

我的 projectList 组件：

import React from 'react'
import ProjectSummary from './ProjectSummary'

const ProjectList = ({projects}) => { //TYPE PROBLEM 3 EXPLAINED BELOW
  return (
    <div className="project-list section">
      { projects && projects.map(project => {
        return (
          <ProjectSummary project={project} key={project.id} />
        )
      })}  
    </div>
  )
}

export default ProjectList

还有我的项目减速器：

const initState = {
  projects: [
    {id: '1', title: 'help me find peach', content: 'blah blah blah'},
    {id: '2', title: 'collect all the stars', content: 'blah blah blah'},
    {id: '3', title: 'egg hunt with yoshi', content: 'blah blah blah'}
  ]
}

const projectReducer = (state = initState, action) => {
  return state;
};

export default projectReducer;

//类型问题1：尝试生成我自己的类型，但在项目数据传递链上没有做任何工作。 解构似乎也是一个问题。 我试图适应道具提供的数据类型：

export interface IProject {
  id: string,
  title: string,
  content: string
}

export interface IProjectState {
  readonly projects: IProject[]
}

//类型问题 2：我也尝试过React.ReactNode和React.FC<IProjec>[]但我一直收到错误：

Type '{ projects: IProject[]; }' is not assignable to type 'IntrinsicAttributes & IProject[]'.
  Property 'projects' does not exist on type 'IntrinsicAttributes & IProject[]'.ts(2322)

//类型问题3：在这里我需要循环（映射）我的项目，所以我也需要我的类型来适应它。

Answer 1

目前我是这样解决的：

interface Props {
  projects: IProject[];
}

class Dashboard extends Component<Props> {
  render() {
    const { ...props } = this.props;
    //console.log(this.props);
    return (
      <div className="dashboard container">
        <div className="row">
          <div className="col s12 m6">
            <ProjectList projects={props.projects}/>
            </div>
          <div className="col s12 m5 offset-m1">
            <Notifications />
          </div>
        </div>
      </div>
    )
  }
}



const mapStateToProps = (state: IAppState) => {
  return {
    projects: state.project.projects
  }
    
}

export default connect(mapStateToProps)(Dashboard);

由于我不完全理解的原因，您似乎不能直接使用道具类型，在我的情况下是项目类型：

interface IProject {
  id: string,
  title: string,
  content: string
}

并且必须将其包装在另一种类型/接口中：

interface Props {
  projects: IProject[];
}

需要将其传递给仪表板扩展的组件类型，如下所示： class Dashboard extends Component<Props>