React js Typescript文字列配列変数

Question

私はtypescriptを初めて使っています。私は次の2つのコンポーネントを持っています。私は、私が宣言したインターフェースと一致する配列オブジェクトを正しく宣言するのに問題があると思う。私のすべてのプロパティで次のエラーが発生するのはなぜですか？

[0] (10,5): error TS2304: Cannot find name 'color'. 

[0] (11,5): error TS2304: Cannot find name 'id'. 

app.tsx

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

const cars = [ 
    { id: 1, make: "Make1", year: 2016, color: "black" }, 
    { id: 2, make: "Make2", year: 2006, color: "gray" }, 
    { id: 3, make: "Make3", year: 2012, color: "purple" }, 
]; 

ReactDOM.render(<CarTool cars={cars} />, document.querySelector("main")); 

カーコンポーネント

import * as React from "react"; 

import * as ReactDOM from "react-dom"; 

interface CarProps { 
    cars: string[]; 
} 


export class Car extends React.Component<CarProps, void> { 
    public render() { 
     return <div> 
      <h1>Car Tool</h1> 
      <table> 
       <thead> 
        <tr> 
         <td>Make</td> 
         <td>Year</td> 
         <td>Color</td> 
        </tr> 
       </thead> 
       <tbody> 
        {this.props.cars.map((car) => <tr><td>car.make</td></tr>)} 
       </tbody> 
      </table> 
     </div>; 
    } 
} 

Answer 1

それはあなたが宣言したので、あなたの小道具を文字列として入力し、[]

があなたのオブジェクト

するためのインタフェースを宣言します

interface Car 
{ 
    id: number, 
    make: string, 
    year: number, 
    color: string, 
} 

そしてが働いていた私が見

​​