Question

我是js / ts的新手，但在C＃方面经验丰富。现在我正在学习React并希望使用打字稿。我尝试在此演示项目中添加类型：https://github.com/bradtraversy/projectmanager/tree/master/src。

到目前为止

代码：

export interface IProjectItem {
  title: string;
  category: string;
}

export interface IProjects {  
  projects : {
    [index: number]: IProjectItem;  
  };
}


class App extends React.Component<object,IProjects> {

  constructor(props: IProjects) {
    super(props);

  this.state = {
    projects: [
    {
      title: 'Business Website',
      category: 'Web Design'
    },
    ....
  }

  render() {
    return (      
      <div className="App">
        MyApp
        <Projects projects={ this.state.projects }/>
      </div>
    );
  }
}

class Projects extends React.Component<IProjects,object> {    

  render() {    

    if (this.props.projects)
    {
      this.props.projects.map( project => { //ERROR Property map not found for type [index:number]
        console.log(project);
      });
    }
    console.log(this.props);

    return (      
      <div className="projects">
        All Projects
      </div>
    );
  }
}

显然找不到.map（）函数。我想我必须改变使用过的接口/类型，但是什么是正确的？

Answer 1

您正在使用this.props.projects.map;

map适用于数组[]。

但是你的变量projects是一个JSON对象;

projects : {
    [index: number]: IProjectItem;  
  };

更改其类型。也许

project: any[]// you will have a generic array object

或

project: IProjectItem[] // you will have an array containing items of "IProjectItem"

Answer 2

如您所料，问题在于您的类型定义 - 特别是这一个：

export interface IProjects {  
  projects : {
    [index: number]: IProjectItem;  
  };
}

这就是说，＆＃39;实现IProjects的对象将包含projects，这是一个可以用数字索引的对象＆＃39;。请注意，可以使用数字索引的对象不与数组相同，并且不会有任何数组原型方法，如map！

另一方面，将其定义为数组：

export interface IProjects {  
  projects: IProjectItem[];
}

与Typescript反应：类型缺少属性映射

2 个答案: