Automatically determine the return type in TypeScript based on the arguments utilized

Question

Automatically determine the return type in TypeScript based on the arguments utilized

My question may have been phrased differently before. I have a function that takes two arguments, with each argument possibly being a number, string, or undefined. The function returns a value that is guaranteed to be one of those types:

export function wideNarrow(wide:number|string|undefined, 
                           narrow:number|string|undefined){
    return isNarrowScreen() ? narrow : wide;
}

In one part of my application, I provide two numbers as arguments to the function:

wideNarrow(8, 0);

However, the inferred return type shows an error when trying to perform a numerical operation:

const extendedAreaHeight = 26;
const baseY = extendedAreaHeight + wideNarrow(8, 0);

Operator '+' cannot be applied to types '26' and 'string | number'.ts(2365)

and

Object is possibly 'undefined'.ts(2532)

Even though it can be statically determined that this specific call will always return a number, TypeScript is still indicating that a string or undefined might be returned. How can I address this without disrupting existing functionality, considering that the function could potentially return undefined, string, number, or combinations of these in other parts of the code?

I am using TypeScript 3.5.2/Vscode 1.36.1.

typescript typescript3.0 type-inference

Answer 1

Answer №1

Following Thomas's suggestion and my own discovery, utilizing two type arguments with identical signatures resolves the issue:

export function wideNarrow
  <T=number|string|undefined,
   K=number|string|undefined> 
   (wide:T, narrow:K){
  return isNarrowScreen() ? narrow : wide;
}

The rationale behind having two types instead of one is to allow for differentiation, as mentioned in the initial question. By specifying both T and K, rather than just T alone and assigning both wide and narrow as type T, it ensures that they do not necessarily have to be of the same type (e.g. both being

numbers</code). This flexibility is necessary at times when I require them to vary in type (e.g. wide as a <code>string

while narrow as a number).

Additional note: For those curious about the specific use case necessitating this approach, I employ it for populating stylesheets within my React Native application, where certain style attributes can accept either numbers (such as width: 100 representing 100 points width) or strings (like width: '50%') to fill half of the container horizontally.

Answer 2

Following Thomas's suggestion and my own discovery, utilizing two type arguments with identical signatures resolves the issue:

export function wideNarrow
  <T=number|string|undefined,
   K=number|string|undefined> 
   (wide:T, narrow:K){
  return isNarrowScreen() ? narrow : wide;
}

The rationale behind having two types instead of one is to allow for differentiation, as mentioned in the initial question. By specifying both T and K, rather than just T alone and assigning both wide and narrow as type T, it ensures that they do not necessarily have to be of the same type (e.g. both being

numbers</code). This flexibility is necessary at times when I require them to vary in type (e.g. wide as a <code>string

while narrow as a number).

Additional note: For those curious about the specific use case necessitating this approach, I employ it for populating stylesheets within my React Native application, where certain style attributes can accept either numbers (such as width: 100 representing 100 points width) or strings (like width: '50%') to fill half of the container horizontally.

Answer 3

Answer №2

If you want to make your function declarations more precise, consider using the following approach:

export function wideNarrow(wide: number, narrow: number): number;
export function wideNarrow(wide: number|string|undefined, narrow: number|string|undefined) {
    return isNarrowScreen() ? narrow : wide;
}

This technique involves having multiple declarations for a single implementation, which can benefit the compiler. For more information, check out the Function Overloads section in the documentation.

Answer 4

If you want to make your function declarations more precise, consider using the following approach:

export function wideNarrow(wide: number, narrow: number): number;
export function wideNarrow(wide: number|string|undefined, narrow: number|string|undefined) {
    return isNarrowScreen() ? narrow : wide;
}

This technique involves having multiple declarations for a single implementation, which can benefit the compiler. For more information, check out the Function Overloads section in the documentation.

Automatically determine the return type in TypeScript based on the arguments utilized

Answer №1

Answer №2

Similar questions

Keep an ear out for updates on object changes in Angular

Launching a new tab with a specific URL using React

Create a single datetime object in Ionic (Angular) by merging the date and time into a combined string format

Is there a way to position the Image component from next/image using absolute positioning?

Obtaining the specific property types from generic interfaces still involves an unnecessary reliance on generic types

Angular 2 orderByPipe not displaying any results initially

How come the Handsontable CSS styles are not being used on my Angular frontend?

I am disappointed with the lack of functionality in Angular's HTML type inference

Why does my array seem to update only once in the view?

Angular unable to retrieve data using Angularfire2

"Although a generic type is compatible with a function argument for mapping, it may not work with

Creating a custom object from a string enum: a step-by-step guide

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

Jest is having difficulty locating a module while working with Next.js, resulting in

Discover the steps to extend static generic methods in Typescript

Storing a portion of JSON data within a function called in the HTML document

Failure to nest interfaces in Angular when mapping JSON responses

QueryFailedError: Null values found in the "price" column - TypeORM - PostgreSQL

When invoking a callback function that includes a conditional type, TypeScript mandates the inclusion of a parameter that intersects multiple types

Despite its presence, @Input() remains undefined