ReturnType doesn't capture the return type of functions that return string or number values

Question

ReturnType doesn't capture the return type of functions that return string or number values

I am curious as to why the ReturnType can accurately infer a function's specific return values when an if statement is present, but only determines the type of the value when the function returns a guaranteed string or number.

For example, in the function testA, ReturnType<typeof testA> successfully infers the return values as 1 and 2.

On the other hand, for the function testB which only returns one value, ReturnType<typeof testB> can only infer that the type is number.

Why is it that a function returning just one value can accurately deduce the type of the return value, such as number, rather than the actual value?

This behavior also applies to string values (as shown in the second screenshot).

https://i.sstatic.net/H0BYM.png

https://i.sstatic.net/5935b.png

typescript string types numbers return

Answer 1

Answer №1

This pertains to the concept of type widening

Below are some valuable resources:

SO answer that explains the behavior
The TypeScript PR (mentioned in the above answer) clarifying the rules for when a literal type is widened or not

An excerpt from the aforementioned PR delineates the observed behavior

In a function without a return type annotation, if the inferred return type is a literal type (but not a literal union type) and there isn't a contextual type with a return type containing literal types, the return type is broadened to its expanded literal type:
function foo() {
    return "hello";
}

function bar() {
    return cond ? "foo" : "bar";
}

const c1 = foo();  // string
const c2 = bar();  // "foo" | "bar"

A couple of straightforward ways to tackle this include:

Utilize as const on the functions' return value
Add an explicit return type to the function (since your function definition, e.g. return 1, meets the return type requirement, there's no need for inference and hence potential widening)

const testA = (v: boolean) => v ? 1 : 2;         // (v: boolean) => 1 | 2
const testB = (v: boolean) => 1;                 // (v: boolean) => number
const constTestB = (v: boolean) => 1 as const;   // (v: boolean) => 1
const typedTestB = (v: boolean): 1 => 1;         // (v: boolean) => 1

https://tsplay.dev/w2pyzm

Answer 2

This pertains to the concept of type widening

Below are some valuable resources:

SO answer that explains the behavior
The TypeScript PR (mentioned in the above answer) clarifying the rules for when a literal type is widened or not

An excerpt from the aforementioned PR delineates the observed behavior

In a function without a return type annotation, if the inferred return type is a literal type (but not a literal union type) and there isn't a contextual type with a return type containing literal types, the return type is broadened to its expanded literal type:
function foo() {
    return "hello";
}

function bar() {
    return cond ? "foo" : "bar";
}

const c1 = foo();  // string
const c2 = bar();  // "foo" | "bar"

A couple of straightforward ways to tackle this include:

Utilize as const on the functions' return value
Add an explicit return type to the function (since your function definition, e.g. return 1, meets the return type requirement, there's no need for inference and hence potential widening)

const testA = (v: boolean) => v ? 1 : 2;         // (v: boolean) => 1 | 2
const testB = (v: boolean) => 1;                 // (v: boolean) => number
const constTestB = (v: boolean) => 1 as const;   // (v: boolean) => 1
const typedTestB = (v: boolean): 1 => 1;         // (v: boolean) => 1

https://tsplay.dev/w2pyzm

ReturnType doesn't capture the return type of functions that return string or number values

Answer №1

Similar questions

Tips for adjusting card content to fit its size in material ui?

The parameter does not accept a string as an argument, it only allows for values of "one", "two", "three", "four", "five", or "six"

Problem encountered while directing to a component within Angular

What is the process for obtaining an AccessToken from LinkedIn's API for Access Token retrieval?

"Exploring a New Generation of Angular Chart Libraries in Version

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

Formatting code works seamlessly in vscode version 1.1.1 when using typescript 1.8.10

TS2531: The object's value may potentially be null

Error message: The class heritage events_1.EventEmitter is invalid and cannot be recognized

Adding an interface for an object containing multiple objects requires defining the structure and behavior

What is the most effective method for dividing a string in TypeScript?

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

Utilizing Node.js' Localstorage (scratch) in conjunction with Angular

Best practice in Angular 2: The difference between binding an object as a whole versus binding its individual

The flexibility of adjusting the percentage in the ng-circle-progress feature

Utilizing TypeScript's generic constraints for multiple primitive data types

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

Encountering a problem while attempting to update react-router from version 5 to version 6

How can I show a limited number of columns in a mat-table in Angular 6 depending on a specific condition?

Can a dynamic type assignment be implemented in the C programming language?