Function 返回类型取决于 function 参数属性

Question

I'm creating a wrapper for an API in TypeScript.

One API call can return 2 types of responses: basic and extended, depending on the argument property.

If the argument property is true, the response will be extended. If the argument property is not provided or false, the response will be basic.

This is the code example:

interface Args {
    token: string;
    region: string;
    extendedResponse?: boolean;
}

interface BasicResponse {
    ID: string;
}

interface ExtendedResponse extends BasicResponse {
    extendedResponseProperty: object;
}


function returnResponse(args: Args): BasicResponse | ExtendedResponse {
    if (args.extendedResponse) {
        return { ID: "foobar", extendedResponseProperty: {} };
    }
    return {ID: "foobar"}
}

let res1 = returnResponse({ token: "asdf", region: "us", extendedResponse: true });

Playground: https://www.typescriptlang.org/play/index.html?ssl=24&ssc=84&pln=1&pc=1#code/JYOwLgpgTgZghgYwgAgIJQOYGdkG8CwAUMicmAPYDWEIAXMlmFKBgNxGnJQQbDl0MmLdsVIQAHpBAATCNIBKELAAd+WCAH56AI3LkANhDggRAXyJFQkWIhQAhOFmAJFKtSgKiSASQAi9RmYQNiJzQktwaHgkZABRSRpZBSVVEHVkCSlpHAcnFxT3PA4xBJk5V1T1AAUocmVoMABPenJtACsIBDAzC3DCGABXEC6+EC4IMAGoEAr3AAo4TCx6dGwASnpc51m0lAAfONKknfTPTmKSYBhkBaWAOkzE8oLdtaKvTnHJ6bxkP3oAEQwPTaRYAgA0GSOzzcuxqdQazTwpmQphEnDCnG43zGuH+yCBILBYTCREMYHGWAAjMgALxfKYzF7qOa4MhUGiAxzSGAQ8a8fiAgZYPmPMrJWHqehMAYoUxrES9XpAA

However this code does not show the consumer of this method that an ExtendedResponse was returned, it shows the type as BasicResponse | ExtendedResponse BasicResponse | ExtendedResponse and does not show the extendedResponseProperty in intellisense.

The closest I got to solving this was using this code:

interface Args {
    token: string;
    region: string;

}

interface ExtendedArgs extends Args {
    extendedResponse: true;

}

interface BasicResponse {
    ID: string;
}

interface ExtendedResponse extends BasicResponse {
    extendedResponseProperty: object;
}

function returnResponse(args: Args): BasicResponse;
function returnResponse(args: ExtendedArgs): ExtendedResponse;
function returnResponse(args: Args | ExtendedArgs): BasicResponse | ExtendedResponse {
    if (args as ExtendedArgs) {
        return { ID: "foobar", extendedResponseProperty: {} };
    }

    return {ID: "foobar"}
}

let res1 = returnResponse({ token: "asdf", region: "us" });

let res2 = returnResponse({ token: "asdf", region: "asdf", extendedResponse: true });

Link to playground: https://www.typescriptlang.org/play/index.html?ssl=32&ssc=86&pln=1&pc=1#code/JYOwLgpgTgZghgYwgAgIJQOYGdkG8CwAUMicmAPYDWEIAXMlmFKBgNxGnJQQbDl0MmLdsVJEAvkSKhIsRCgCiAD0ggAJhDXpsyCCppqc2nAVEk9qjWoBKELAAd+WCPSYBXCCIlTCM6PCRkACE4LGAEWwcnFFNOAEkAEXpGZhA2b0JpcH95ZGVLTUjHEGddfXUcELCIu2LS2NILA0La6IAFKHJ7aDAAT3pyACMAKwgEMBFJTMIYNxBxvhAuCDA3KBAi6IAKOEwsemMASnoq8M2SzyJZ+bBF5dX18+cdvfp85q0947zyqyfLmZzBb8e5rDatC4vbAHPbIAA+PwKn2w31ONSiF3hiI+-zwHFIwBgyChOFC2PUmiOeLMnFB6zwyES9AARDByENdsyADRlJH-DpdHr9PDiZDiEScKacfEkbgPJa4JnIVnswacqZTIgAGxWyywAEZkABeOngjHPXBkKg0FmhNQwbnLXj8FluLDMsWHLyEHVgPUAJmNpv+W0tFGoAmZdodPO4zsj0cdTQpNghzlcUA8ntYQA

But I don't really like this solution because the consumers of this method would need to deal with function overload and two types of input args.

There is only one input Args, it just happens that it can have extendedResponse: boolean attribute. Two input args make it not as intuitive.

Is there a TypeScript type-based approach that solves this?

---

UPDATE

A slightly better solution is to use a union type for the input Args:

interface Args {
    token?: string;
    region?: string;
}


interface BasicResponse {
    ID: string;
}

interface ExtendedResponse extends BasicResponse {
    extendedResponseProperty: object;
}

function returnResponse(args: Args): BasicResponse;
function returnResponse(args: Args & {callbackData: true}): ExtendedResponse;
function returnResponse(args: Args | Args & {callbackData: true}): BasicResponse | ExtendedResponse {
    if (args as { callbackData: true }) {
        return { ID: "foobar", extendedResponseProperty: {}}
    }
    return {ID: "foobar"}
}

let res1 = returnResponse({ token: "asdf", region: "us" });

let res2 = returnResponse({ token: "foo", callbackData: true });

It's more readable for the consumer as it shows that adding callbackData: true will return a different result, but still not ideal because it is still two different argument types.

Answer 1

You could use a generic like this if you don't like the overloads:

interface Args {
    token: string;
    region: string;
    extendedResponse?: true;
}

interface BasicResponse {
    ID: string;
}

interface ExtendedResponse extends BasicResponse {
    extendedResponseProperty: object;
}

function returnResponse<A extends Args>(args: A): A extends { extendedResponse: true} ? ExtendedResponse : BasicResponse {
    if (args.extendedResponse === true) {
        return { ID: "foobar", extendedResponseProperty: {} } as any;
    }

    return {ID: "foobar"} as any
}

let res1 = returnResponse({ token: "asdf", region: "us" });

let res2 = returnResponse({ token: "asdf", region: "asdf", extendedResponse: true });

But honestly, I like the code in your codesandbox. It describes what happens without additional magic and is simple to read.

Also, I'm not sure what you mean with "the consumer will have to deal with method overload" - the consumer gets what they are calling, not more or less. You are describing a certain behaviour here, and no matter how you describe - different input arguments will lead to different output, and as soon as your runtime code does that, the consumer will have to deal with that anyways.

Answer 2

Interesting problem. I could only think of this solution. I would use generics using only the extendedResponse field as type discriminator but it is more or less the same than previous answer:/

// We make the args generic of E 
interface Args<E extends true | false> {
    token: string;
    region: string;
    extendedResponse?: E;
}

// No changes here
interface BasicResponse { ID: string }
interface ExtendedResponse extends BasicResponse {
    extendedResponseProperty: Record<string, unknown>;
}

// This is not really required but I like to have explainatory intermediate types
type IReturnResponse<T extends boolean> = T extends true ? ExtendedResponse : T extends false ? BasicResponse : never;

/**
 * This function is now generic.
 * As a developer it might not be great but the implementation is not leaked to the user.
 */
function returnResponse<E extends boolean>(args: Args<E>): IReturnResponse<E> {
    if (args.extendedResponse === true) {
        return { ID: "foobar", extendedResponseProperty: {} } as IReturnResponse<E>;
    }
    return { ID: "foobar" } as IReturnResponse<E>;
}

// The library user will see this ⤵️


// Infered to Extended response
const res1 = returnResponse({
    token: "asdf",
    region: "us",
    extendedResponse: true,
});

// Infered to Basic response
const res2 = returnResponse({
    token: "asdf",
    region: "us",
    extendedResponse: false,
});