TypeScriptで異なるオブジェクトを持つ配列

Question

TypeScriptにエラーが表示されないように、同じクラスを継承するさまざまなオブジェクトを1つの配列に集めるときに、TypeScriptで上位クラスを設定するにはどうすればよいですか？

私はこのようにそれをしようとしている：

interface IVehicle{ 
    modelName: string 
} 

interface ICar extends IVehicle{ 
    numberOfDoors: number, 
    isDropTop: boolean 
} 

interface IBike extends IVehicle{ 
    hasDynamo: boolean 
} 


var vehicles: IVehicle[] = 
    [ 
     { 
      modelName: "carModelName", // Error 
      numberOfDoors: 4, 
      isDropTop: true 
     }, 
     { 
      modelName: "bikeModelName", 
      hasDynamo: true 
     } 
    ] 

このようにそれをやって、私はエラーを取得しています。

エラーが表示されないようにするには、上位インタフェースのオブジェクトを追加するだけです。IVehicle

Answer 1

構文エラーを修正した後、アレイ内の個々のエントリのタイプを指定できます。

interface IVehicle { 
    modelName: string 
} 

interface ICar extends IVehicle { 
    numberOfDoors: number, 
    isDropTop: boolean 
} 

interface IBike extends IVehicle { 
    hasDynamo: boolean 
} 

let vehicles: IVehicle[] = 
    [ 
     { 
      modelName: "carModelName", 
      numberOfDoors: 4, 
      isDropTop: true, 
     } as ICar, 
     { 
      modelName: "bikeModelName", 
      hasDynamo: true 
     } as IBike 
    ] 

それとも、このような車両、車や自転車の列に配列の型を変更する：あなたはIVehicleがあるかどうかを確認したい場合は、後で

let vehicles: Array<IVehicle | ICar | IBike> = 
    [ 
     { 
      modelName: "carModelName", 
      numberOfDoors: 4, 
      isDropTop: true, 
     }, 
     { 
      modelName: "bikeModelName", 
      hasDynamo: true 
     } 
    ] 

IBikeまたはICarあなたはユーザー定義型のガードを使ってそれを行うことができます。

function isBike(vehicle: IVehicle): vehicle is IBike { 
    return (<IBike>vehicle).hasDynamo !== undefined; 
} 

function isCar(vehicle: IVehicle): vehicle is ICar { 
    return (<ICar>vehicle).numberOfDoors !== undefined; 
} 

function log(vehicle: IVehicle) { 
    if (isBike(vehicle)) { 
     // tsc knows vehicle is IBike 
     console.log(vehicle.hasDynamo); 
    } else if (isCar(vehicle)) { 
     // tsc knows vehicle is ICar 
     console.log(vehicle.numberOfDoors); 
    } else { 
     console.log(vehicle.modelName); 
    } 
} 

あなたはハンドブックのAdvanced typesセクションにそれらについての詳細を読むことができます。

また、コード全体の実例も遊び場hereで確認できます。