类型检查联合类型

Question

Consider the following code:

interface CarData{
   wheels: number
}

interface PlaneData{
   wings: number
}

interface Vehicle{
   type: string,
   data: CarData | PlaneData
}

function printWheels(data: CarData){
   console.log("Number of wheels: " + data.wheels);
}

function printWings(data: PlaneData){
   console.log("Number of wings: " + data.wings);
}

let vehicle: Vehicle;

switch (vehicle.type)
{
    case "car":
        printWheels(vehicle.data);
        break;
    case "plane":
        printWings(vehicle.data);
        break;
}

I get the error Argument of type 'CarData | PlaneData' is not assignable to parameter of type 'CarData'. Property 'wheels' is missing in type 'PlaneData' but required in type 'CarData'. Argument of type 'CarData | PlaneData' is not assignable to parameter of type 'CarData'. Property 'wheels' is missing in type 'PlaneData' but required in type 'CarData'. which makes sense since it doesn't know what type data is. It can be solved by adding a shared member that tells the type. The following code type checks correctly:

interface CarData
{
    kind: "carData",
    wheels: number
}

interface PlaneData
{
    kind: "planeData",
    wings: number
}

interface Vehicle
{
    type: string,
    data: CarData | PlaneData
}

function printWheels(data: CarData)
{
    console.log("Number of wheels: " + data.wheels);
}

function printWings(data: PlaneData)
{
    console.log("Number of wings: " + data.wings);
}

let vehicle: Vehicle;

switch (vehicle.type)
{
    case "car":
        if (vehicle.data.kind == "carData") printWheels(vehicle.data);
        break;
    case "plane":
        if (vehicle.data.kind == "planeData") printWings(vehicle.data);
        break;
}

But this gives me extra values in data interfaces which I don't like. Is there a more elegant way to do this?

Answer 1

You can do a switch directly on the discriminating field and TS will be able to work out that you are calling each function safely

switch (vehicle.data.kind) {
    case "carData":
        // vehicle.data is of type CarData
        printWheels(vehicle.data);
        break;
    case "planeData":
        // vehicle.data is of type PlaneData
        printWings(vehicle.data);
        break;
}

See this TypeScript Playground to see how this works without type errors