Reagieren js Typescript String-Array-Variable

Question

Ich bin neu in Typoskript. Ich habe die folgenden zwei Komponenten. Ich denke, dass ich Probleme habe, mein Array-Objekt richtig zu deklarieren, um mit der Schnittstelle übereinzustimmen, die ich erklärt habe. Warum erhalte ich den folgenden Fehler bei allen meinen Eigenschaften?

[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")); 

Auto Component

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

Es ist, weil Sie Sie Requisiten als Zeichenfolge eingeben deklariert haben []

Deklarieren Sie die Schnittstelle für das Objekt

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

Und dann erklären Sie Requisiten wie

interface CarProps { 
    cars: Car[]; 
}