TypeScript中包含不同對象的數組

Question

在從同一個類繼承的一個數組中收集各種不同的對象時，如何在TypeScript中設置一個優等的類，以便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
    ]

或者只是將數組的類型更改為車輛，汽車或自行車的數組，如下所示：

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

如果以后你要確定一個IVehicle是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);
    }
}

您可以在本手冊的“ 高級類型”部分中閱讀有關它們的更多信息。

您還可以在這里找到操場上整個代碼的工作示例。