Can the return value of a function be directly used as the variable type?

Question

Can the return value of a function be directly used as the variable type?

Imagine having the following function:

let getData = () => {
    return {
        name: 'John',
        age: 2,
        isAsian: true
    }
}

Is there a way to specify a variable's type as the return type of getData, without assigning it to getData directly?

For instance, is there a syntax like:

var data: getData

But this approach doesn't work because it sets the type as the function itself, not its return value. (Edit: This would result in the error: Cannot find name 'getData')

var data = getData() would assign the correct type to data as

{name: string, age: number, isAsian: boolean}

, but this doesn't meet my requirements.

There is a relevant discussion here that may offer insights: Obtaining the return type of a function

However, this doesn't seem to provide the exact solution I'm seeking. I am not able to adopt Typescript 2.8 yet due to restrictions with Angular and the CLI. I believe the alternative methods discussed in the linked Stack Overflow question won't help me achieve dynamic use of my function's return type.

typescript typescript2.0

Answer 1

Answer №1

Starting from TypeScript 2.9 (apologies for the confusion), you now have the option to utilize the ReturnType type:

let fetchData = () => {
    return {
        name: 'Alice',
        age: 25,
        isStudent: true
    }
}

let result: ReturnType<typeof fetchData>;
result.name; // string

If you are working with versions prior to 2.9, there are some less ideal workarounds available. One approach is:

let dummy = (false as any) && fetchData();
let result: typeof dummy;

Answer 2

Starting from TypeScript 2.9 (apologies for the confusion), you now have the option to utilize the ReturnType type:

let fetchData = () => {
    return {
        name: 'Alice',
        age: 25,
        isStudent: true
    }
}

let result: ReturnType<typeof fetchData>;
result.name; // string

If you are working with versions prior to 2.9, there are some less ideal workarounds available. One approach is:

let dummy = (false as any) && fetchData();
let result: typeof dummy;

Answer 3

Answer №2

Check out this alternative approach for pre-2.8 compiler. This method still requires an additional function and a dummy variable, but eliminates the need for calling getData() within the code:

let fetchData = () => {
    return {
        name: 'John',
        age: 2,
        isAsian: true
    }
}


function determineReturnType<R>(func: (...args: any[]) => R): { returnType: R } {
    return null!;
}

// dummy variable to fetch the return type of fetchData only
let fetchedDataType = determineReturnType(fetchData);

var data: typeof fetchedDataType.returnType; // var data: { name: string; age: number; isAsian: boolean; }

Answer 4

Check out this alternative approach for pre-2.8 compiler. This method still requires an additional function and a dummy variable, but eliminates the need for calling getData() within the code:

let fetchData = () => {
    return {
        name: 'John',
        age: 2,
        isAsian: true
    }
}


function determineReturnType<R>(func: (...args: any[]) => R): { returnType: R } {
    return null!;
}

// dummy variable to fetch the return type of fetchData only
let fetchedDataType = determineReturnType(fetchData);

var data: typeof fetchedDataType.returnType; // var data: { name: string; age: number; isAsian: boolean; }

Can the return value of a function be directly used as the variable type?

Answer №1

Answer №2

Similar questions

Function that observes with the pipe syntax

Linking key value pairs through a TypeScript interface

Inquiring about using React typescript useRef function for improved performance

Ways to solve VScode gutter indicator glitches after switching text editors?

Enhance Vuetify functionality using TypeScript for custom components

Explore the functionality of Typescript unit testing in debug mode with the assistance of VSCode

The library "vue-property-decorator" (v10.X) is causing issues with resolving in Webpack despite being successfully installed

Encountering an issue while running the ng build --prod command in Angular

I am attempting to retrieve custom cellRendererParams within the CustomCellRenderer class

Having trouble with Angular 2 when submitting a form

Building a multi-platform desktop application using Angular and Electron integrated with ngx

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

How do I add a new item to an object using Ionic 2?

What is a superior option to converting to a promise?

Fixing the error "cannot call a function which is possibly undefined" in React and TypeScript

Different Ways to Modify Data with the Change Event in Angular 8

What causes two variables of identical types to exhibit varying behaviors based on their creation methods?

Type of event target MouseEvent

What is the Typescript definition of a module that acts as a function and includes namespaces?

Steps to modify the CSS of a custom component in Angular 8