TypeScript：从接口动态创建联合类型

Question

I want to generate a type Response

type Response = 
{
    code: 200
    body: {
        msg: string
    }
} | {
    code: 400
    body: {
        errorCode: number
    }
}

from Foo (simplified version of the type generated by .

interface Foo {
    200: {
        msg: string
    }
    400: {
        errorCode: number
    }
}

I tried below but it doesn't work.

type Response = {
    code: keyof Foo // 200 | 400
    body: Foo[keyof Foo] // {msg: string} | {errorCode: number}
}


const res: Response = {
    code: 200,
    body: {
        errorCode: 1 // not get an error
    }
}

Can someone help me?

Answer 1

Right now you are mixing all possible code types with all possible body types. You need to use a mapped type instead to explicitly iterate over each key K of Foo and make each element a function of K the key, and Foo[K] the value. This produces a new object type like {200: {code: 200, ...}, 400: {code: 400, ...} which you want to look up to get the union of its properties:

type Resp = { [K in keyof Foo]: { code: K, body: Foo[K] } }[keyof Foo];

/* type Resp = {
    code: 200;
    body: {
        msg: string;
    };
} | {
    code: 400;
    body: {
        errorCode: number;
    };
} */

(I renamed it Resp because there's already a Response in global scope I don't want to collide with).

Then you get the desired error when using the wrong body with a given code :

const res: Resp = {
    code: 200,
    body: {
        errorCode: 1 // error!
    //  ~~~~~~~~~~~~
    // Type '{ errorCode: number; }' is not assignable to type '{ msg: string; }'.
    }
}

Playground link to code