Determining the output type by considering the presence of optional parameters

Question

Determining the output type by considering the presence of optional parameters

function customFunction<T>(defaultValue?: T) { return defaultValue; }

const definitelyNullOrUndefined = customFunction<string>();      // type: string | undefined
const definitelyStringType = customFunction<string>('foobar'); // type: string | undefined

Is there a way to modify customFunction() so that definitelyNullOrUndefined is automatically set to undefined, while definitelyStringType is automatically set to string?

Overview

I am interested in enhancing a function I am currently utilizing. This function is defined as

function customFunction<T>(obj: { [key: string]: T }, key: string, defaultValue?: T)

and it retrieves the value of key[obj] if it exists, otherwise using defaultValue. Even when a defaultValue is provided, Typescript interprets the return type as T | undefined.

typescript

Answer 1

Answer №1

When considering your initial case, my immediate suggestion is to utilize an overload approach, as demonstrated below:

function f<T>(): undefined;
function f<T>(value: T): T;
function f<T>(value?: T) { return value; }

const definitelyUndefined = f();      // type: undefined
const definitelyString = f('foobar'); // type: "foobar"

However, for the more intricate scenario at hand, it may be possible to address it by incorporating overloads and more elaborate generics, like so:

function f<T, K extends string & keyof T>(o: T, key: K, defaultValue?: T[K]): T[K];
function f<T, V = undefined>(o: T, key: string, defaultValue?: V): V;
function f<T, V = undefined>(o: T, key: string, defaultValue?: V) {
  return o[key] || defaultValue;
}

const obj = { foo: "123" };

const definitelyUndefined = f(obj, "bar");    // type: undefined
const definitelyNumber = f(obj, "bar", 123);  // type: number
const definitelyString = f(obj, "foo");       // type: string

While this solution may not cover every conceivable scenario (as the return type relies on the generic type argument rather than the actual function argument), it does come remarkably close.

Answer 2

When considering your initial case, my immediate suggestion is to utilize an overload approach, as demonstrated below:

function f<T>(): undefined;
function f<T>(value: T): T;
function f<T>(value?: T) { return value; }

const definitelyUndefined = f();      // type: undefined
const definitelyString = f('foobar'); // type: "foobar"

However, for the more intricate scenario at hand, it may be possible to address it by incorporating overloads and more elaborate generics, like so:

function f<T, K extends string & keyof T>(o: T, key: K, defaultValue?: T[K]): T[K];
function f<T, V = undefined>(o: T, key: string, defaultValue?: V): V;
function f<T, V = undefined>(o: T, key: string, defaultValue?: V) {
  return o[key] || defaultValue;
}

const obj = { foo: "123" };

const definitelyUndefined = f(obj, "bar");    // type: undefined
const definitelyNumber = f(obj, "bar", 123);  // type: number
const definitelyString = f(obj, "foo");       // type: string

While this solution may not cover every conceivable scenario (as the return type relies on the generic type argument rather than the actual function argument), it does come remarkably close.

Answer 3

Answer №2

The provided answer incorrectly combines 'type space' and 'value space' together, which was pointed out in one of the comments.
To address this issue, here is an improved solution:

Typescript >= 4.7.4

// Type definition
type ValueOrUndefined<T> =
  T extends (string | number | boolean | symbol | object) ? T : undefined;

// Function definition
function getValueOrUndefined<T>(defaultValue?: T): ValueOrUndefined<T> {
  return defaultValue as any;
}

// Examples
const resultUndefined = getValueOrUndefined();      // type: undefined
const resultString = getValueOrUndefined('text'); // type: string

Typescript < 4.7.4

// Type definition
type ValueOrUndefined<T> =
  T extends (string | number | boolean | symbol | object) ? T : undefined;

// Function definition
function getValueOrUndefined<T>(defaultValue?: T): ValueOrUndefined<typeof defaultValue> {
  return defaultValue as any;
}

// Examples
const resultUndefined = getValueOrUndefined();      // type: undefined
const resultString = getValueOrUndefined('text'); // type: string

Answer 4

The provided answer incorrectly combines 'type space' and 'value space' together, which was pointed out in one of the comments.
To address this issue, here is an improved solution:

Typescript >= 4.7.4

// Type definition
type ValueOrUndefined<T> =
  T extends (string | number | boolean | symbol | object) ? T : undefined;

// Function definition
function getValueOrUndefined<T>(defaultValue?: T): ValueOrUndefined<T> {
  return defaultValue as any;
}

// Examples
const resultUndefined = getValueOrUndefined();      // type: undefined
const resultString = getValueOrUndefined('text'); // type: string

Typescript < 4.7.4

// Type definition
type ValueOrUndefined<T> =
  T extends (string | number | boolean | symbol | object) ? T : undefined;

// Function definition
function getValueOrUndefined<T>(defaultValue?: T): ValueOrUndefined<typeof defaultValue> {
  return defaultValue as any;
}

// Examples
const resultUndefined = getValueOrUndefined();      // type: undefined
const resultString = getValueOrUndefined('text'); // type: string

Determining the output type by considering the presence of optional parameters

Overview

Answer №1

Answer №2

Similar questions

Unable to execute an Angular 2 application within Visual Studio 2015

How can we update the information in the initial observable using data from a separate observable, taking into consideration specific conditions in Angular with RxJS?

Creating dynamic dxi-column with different data types in dxDataGrid

A guide on logging errors triggered within reducers

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

Retrieving the selected date from mat-datepicker into a FormControl

Obtain data from a single module and incorporate it into a different one

Establishing the value of "document.cookie"

disappearing of vue event on single file component HTML element

Passing an array of items as a property to a child component in React with Typescript is not possible

Embracing Typescript version 2.7 and above allows for utilizing multiple types within a parameter, enabling developers to efficiently handle specific properties

Unexpected behavior with Node js event listener

React / NextJS: Repeating Audiowave Component

Is there a way to assign API data as inner HTML using Lit?

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

The Angular Compiler was identified, however it turned out to be an incorrect class instance

What is the best way to showcase several images using Sweet Alert 2?

Tips for managing Razorpay responses in Angular 2

Is it possible to configure a unique Bearer Access Token in the "angular-oauth2-oidc" library?

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality