Reactjs 使用Typescript进行反应：类型缺少属性映射

我是js/ts新手，但对C#有经验。 现在我正在学习React并想使用typescript。 我尝试将类型添加到此演示项目：

迄今为止的代码：

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>
    );
  }
}

导出接口IProjectItem{
标题：字符串；
类别：字符串；
}
导出接口IProjects{
项目：{
[索引：编号]：i项目；
};
}
类应用程序扩展了React.Component{
建造师（道具：IProjects）{
超级（道具）；
此.state={
项目：[
{
标题：“商业网站”，
类别：“网页设计”
},
....
}
render（）{
报税表（
MyApp
);
}
}
类项目扩展React.Component{
render（）{
if（this.props.projects）
{
this.props.projects.map（项目=>{//找不到类型[index:number]的错误属性映射）
console.log（项目）；
});
}
console.log（this.props）；
报税表（
所有项目
);
}
}

---

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

您使用的是

this.props.projects.map

用于阵列

[]

但是您的变量

projects

是一个JSON对象

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

改变它的类型。也许吧

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

或

---

您正在使用

this.props.projects.map

用于阵列

[]

但是您的变量

projects

是一个JSON对象

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

改变它的类型。也许吧

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

或

---

正如您所怀疑的，问题在于您的类型定义，尤其是以下类型定义：

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

这意味着，“实现

IProjects

的对象将包含

projects

，这是一个可以用数字索引的对象”。请注意，可以用数字索引的对象与数组不同，并且不会有任何像

map

这样的数组原型方法

另一方面，这将把它定义为一个数组：

export interface IProjects {  
  projects: IProjectItem[];
}

---

正如您所怀疑的，问题在于您的类型定义，尤其是以下类型定义：

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

这意味着，“实现

IProjects

的对象将包含

projects

，这是一个可以用数字索引的对象”。请注意，可以用数字索引的对象与数组不同，并且不会有任何像

map

这样的数组原型方法

另一方面，这将把它定义为一个数组：

export interface IProjects {  
  projects: IProjectItem[];
}

---

应该是

projects:iprojecttem[]

我猜应该是

projects:iprojecttem[]

谢谢你的详细回答！我想，[index:number]：iprojecttem；会产生类似于c的“IDictionary”的结果它实现了继承层次结构中的IDictionary-初学者的错误。@Tobias:如果您确实想创建一个对象的数字字典，`

[index:number]：IProjectItem

可能是您想要的方式-但是，如果没有一点样板文件，您无法

在JS中映射对象-请参阅此问题/答案：谢谢您提供详细的答案。！我想的是，[index:number]：IProjectItem；将产生类似于c#的“IDictionary”的结果它实现了继承层次结构中的IDictionary-初学者的错误。@Tobias:如果您确实想创建一个对象的数字字典，`
[index:number]：IProjectItem
可能是您想要的方式-但是，如果没有一点样板文件，您无法
在JS中映射对象-请参见以下问题/答案：