Typescriptに反応してください：

Question

のプロパティマップが見つかりません。js/tsを初めて使っていますが、C＃で経験があります。 今、私はReactを学んでいて、typescriptを使いたいと思っています。 このデモプロジェクトにタイプを追加しようとしています：https://github.com/bradtraversy/projectmanager/tree/master/src。

コードこれまで：明らかに.MAP（）関数が見つからない

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

。私は、使用されているインタフェース/タイプを変更する必要があると思いますが、正しいものは何ですか？

Answer 1

あなたが疑われるとして、問題はあなたのタイプの定義である - 特に、この1：

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

これはオブジェクトの、と言っている何IProjectsを実装しているのは、projectsです。これは、数字で索引付けできるオブジェクトです。 '数字で索引付けできるオブジェクトは、ではなく、配列と同じものであり、mapのような配列プロトタイプメソッドはありません。

これは、他の一方で、は配列として定義されます：

export interface IProjects { 
    projects: IProjectItem[]; 
} 

Answer 2

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"