Determine the return type of a function based on the parameter type that is inferred

Question

Determine the return type of a function based on the parameter type that is inferred

I am seeking to define a simple function that checks a condition and returns either a value or a default. In most cases, the default is constant, so it would be beneficial to return a union of expected and default value types to properly narrow it down at the call site.

First, let's look at the function and its expected use cases.

const func = (
  value: unknown, defaultValue?: string | null | undefined
): string | null | undefined => {
  if (typeof value === 'string') {
    return value;
  }

  return defaultValue;
};

const case1: string = func('', 's');
const case2: string | null = func('', null);
const case3: string | undefined = func('', undefined);
const case4: string | undefined = func('');
const x: string | null | undefined = '';
const case5: string | null | undefined = func('', x);

The first argument type always remains the same and does not affect discrimination, included here for illustration purposes. The output type always contains a string. Discrimination should only impact whether the output type contains null and undefined based on the default parameter type at the call site.

With the specified function type, the compiler raises errors for cases 1-4.

Now, I have tried various approaches to defining a discriminating type.

interface CustomType {
  (value: unknown, defaultValue: string): string;
  (value: unknown, defaultValue: null): string | null;
  (value: unknown, defaultValue?: undefined): string | undefined;
}

type Type1 = ((value: unknown, defaultValue: string) => string) | 
  ((value: unknown, defaultValue: null) => string | null) | 
  ((value: unknown, defaultValue?: undefined) => string | undefined) |
  ((value: unknown, defaultValue: string | null | undefined) => string | null | undefined)

type Type2 = <U extends string | null | undefined> (
  value: unknown, defaultValue?: U
) => string | U;

The interface "CustomType" with overloads covers all use cases, but the function "func" cannot be assigned to it even when the last overload exactly matches "func"'s type. Overloads tend to be verbose in nature.

"func" can be assigned to Type1, however, it does not function as overloads.

Type2 offers a concise solution that satisfies all use cases, yet "func" still cannot be assigned to it. Moreover, Type2 allows incorrect use cases like

const incorrect: number = func('', <any>1);

, due to the forgiving nature of extends.

Is there a way to create a type that describes the same overloads as the aforementioned interface? Can we declare the function in a manner that makes it assignable to both the interface and the type?

typescript

Answer 1

Answer №1

I believe that your T2 is almost accurate enough for practical use, however, please note that f('') will return type string | null | undefined. If you wish to make it more precise, you could consider the following approach:

const f = <T extends [(string | null)?]>(
    value: unknown, ...[defaultValue]: T
): string | T[0] => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue;
};

This method utilizes rest parameters and tuple types to ensure that when defaultValue is excluded, the generic type parameter defaults to undefined rather than string | null. It's intriguing how the inference works in scenarios like these.

All your test cases validate the function:

const s1 = f('', 's'); // string
const s2 = f('', null); // string | null
const s3 = f('', undefined); // string | undefined 
const s4 = f(''); // string | undefined 
const x = ["", null, void 0][Math.floor(Math.random() * 3)]; // string | null | undefined
const s5 = f('', x); // string | null | undefined

Perhaps replacing T2 with something similar is a better idea:

// typeof f
type T3 = <T extends [(string | null | undefined)?]>(
    value: unknown, ...[defaultValue]: T
) => string | T[0];

You'll observe that this aligns well with the usage of I:

const i: I = f; // okay

In regard to using T2 (or T3) resulting in:

const incorrect = f('', <any>1); // any 🤷‍

I would caution against utilizing values of type any, as it can introduce unexpected issues into the type system. While detecting occurrences of any is possible, it may complicate the function typing excessively:

type IfAny<T, Y, N = T> = 0 extends (1 & T) ? Y : N;
const g = <T extends [(string | null)?]>(
    value: unknown, ...[defaultValue]: T
): string | IfAny<T[0], null | undefined> => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue as any;
};

const gs1 = g('', 's'); // string
const gs2 = g('', null); // string | null
const gs3 = g('', undefined); // string | undefined 
const gs4 = g(''); // string | undefined 
const gs5 = g('', x); // string | null | undefined
const betterMaybe = g('', <any>1); // string | null | undefined

A bit complicated, but it might work.

Hope this explanation aids you in solving the issue. Good luck!

Link to original code

Answer 2

I believe that your T2 is almost accurate enough for practical use, however, please note that f('') will return type string | null | undefined. If you wish to make it more precise, you could consider the following approach:

const f = <T extends [(string | null)?]>(
    value: unknown, ...[defaultValue]: T
): string | T[0] => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue;
};

This method utilizes rest parameters and tuple types to ensure that when defaultValue is excluded, the generic type parameter defaults to undefined rather than string | null. It's intriguing how the inference works in scenarios like these.

All your test cases validate the function:

const s1 = f('', 's'); // string
const s2 = f('', null); // string | null
const s3 = f('', undefined); // string | undefined 
const s4 = f(''); // string | undefined 
const x = ["", null, void 0][Math.floor(Math.random() * 3)]; // string | null | undefined
const s5 = f('', x); // string | null | undefined

Perhaps replacing T2 with something similar is a better idea:

// typeof f
type T3 = <T extends [(string | null | undefined)?]>(
    value: unknown, ...[defaultValue]: T
) => string | T[0];

You'll observe that this aligns well with the usage of I:

const i: I = f; // okay

In regard to using T2 (or T3) resulting in:

const incorrect = f('', <any>1); // any 🤷‍

I would caution against utilizing values of type any, as it can introduce unexpected issues into the type system. While detecting occurrences of any is possible, it may complicate the function typing excessively:

type IfAny<T, Y, N = T> = 0 extends (1 & T) ? Y : N;
const g = <T extends [(string | null)?]>(
    value: unknown, ...[defaultValue]: T
): string | IfAny<T[0], null | undefined> => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue as any;
};

const gs1 = g('', 's'); // string
const gs2 = g('', null); // string | null
const gs3 = g('', undefined); // string | undefined 
const gs4 = g(''); // string | undefined 
const gs5 = g('', x); // string | null | undefined
const betterMaybe = g('', <any>1); // string | null | undefined

A bit complicated, but it might work.

Hope this explanation aids you in solving the issue. Good luck!

Link to original code

Answer 3

Answer №2

Here is an example of how to implement discriminated types in order to work with the function f:

interface IDiscriminate {
    (value: string, defaultValue?: unknown): string;
    <T>(value: unknown, defaultValue?: T): T;
}

const f: IDiscriminate = <T>(value: unknown, defaultValue?: T) => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue;
};

const s1: string = f('', 's');
const s2: string = f('', null);
const s3: string = f('', undefined);
const s4: string = f('');
const x: string = 'x';
const s5: string = f('', x);
const s6: string = f(1, x);
const s7: null = f(1, null);
const s8: undefined = f(true);
const s9: number = f(1, 1);
//const incorrect: number = f('', <any>1); // Fails to compile

Testing

console.log(`s1 === '': ${s1 === ''}`); // true
console.log(`s2 === '': ${s2 === ''}`); // true
console.log(`s3 === '': ${s3 === ''}`); // true
console.log(`s4 === '': ${s4 === ''}`); // true
console.log(`s5 === '': ${s5 === ''}`); // true
console.log(`s6 === 'x': ${s6 === 'x'}`); // true
console.log(`s7 === null: ${s7 === null}`); // true
console.log(`s8 === undefined: ${s8 === undefined}`); // true
console.log(`s9 === 1: ${s9 === 1}`); // true

You can view the results of running this test on the Playground

Answer 4

Here is an example of how to implement discriminated types in order to work with the function f:

interface IDiscriminate {
    (value: string, defaultValue?: unknown): string;
    <T>(value: unknown, defaultValue?: T): T;
}

const f: IDiscriminate = <T>(value: unknown, defaultValue?: T) => {
    if (typeof value === 'string') {
        return value;
    }
    return defaultValue;
};

const s1: string = f('', 's');
const s2: string = f('', null);
const s3: string = f('', undefined);
const s4: string = f('');
const x: string = 'x';
const s5: string = f('', x);
const s6: string = f(1, x);
const s7: null = f(1, null);
const s8: undefined = f(true);
const s9: number = f(1, 1);
//const incorrect: number = f('', <any>1); // Fails to compile

Testing

console.log(`s1 === '': ${s1 === ''}`); // true
console.log(`s2 === '': ${s2 === ''}`); // true
console.log(`s3 === '': ${s3 === ''}`); // true
console.log(`s4 === '': ${s4 === ''}`); // true
console.log(`s5 === '': ${s5 === ''}`); // true
console.log(`s6 === 'x': ${s6 === 'x'}`); // true
console.log(`s7 === null: ${s7 === null}`); // true
console.log(`s8 === undefined: ${s8 === undefined}`); // true
console.log(`s9 === 1: ${s9 === 1}`); // true

You can view the results of running this test on the Playground

Determine the return type of a function based on the parameter type that is inferred

Answer №1

Answer №2

Testing

Similar questions

Is there a way to help my KafkaJS consumer stay patient while waiting for a broker to become available?

Error encountered in jquery.d.ts file: Unresolved syntax issue

Tips for optimizing HttpRequests within nested for-loops that utilize subscribe()?

Troubleshooting mistakes in Typescript import syntax and beyond

Make an indirect mention of a distant JavaScript web address

Typescript - type assertion does not throw an error for an invalid value

Having issues with an Angular reactive form that includes a custom form-level validator and the 'blur' updateOn option?

Is it possible for a TypeScript function to be used as a React prop even if it conflicts with the function signature's in

What is the proper method for typing unidentified exports that are to be used in TypeScript through named imports?

Is there a way to send both a file and JSON data in a single HTTP request?

utilize Angular's interface-calling capabilities

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

delayed updating of property not visible in angular 10 immediately

Is it possible to utilize [key:string]: any in order to eliminate the requirement for an additional function when working

Refine the observable data

Using Typescript to define Vuex store types

Debug errors occur when binding to computed getters in Angular 2

What is the best way to implement ES2023 functionalities in TypeScript?

Is there a way to imitate a tab click on Angular Material's md-tab

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide