Get the Return Type of a Function in Typescript Using ReturnType by@smpnjn

Get the Return Type of a Function in Typescript Using ReturnType

The ReturnType utility type is very useful in situations where the output of a specific function needs to be taken in by another function. In that scenario, you might create a new, custom type, that the output of a function constrains itself to.
image
Johnny Simpson HackerNoon profile picture

Johnny Simpson

Product, Engineering, Web


The ReturnType in TypeScript is a utility type that is quite similar to the ParameterType. It lets you take the return output of a function, and construct a type based on it.


ReturnType Utility Type

The ReturnType utility type is very useful in situations where the output of a specific function needs to be taken in by another function. In that scenario, you might create a new, custom type, that the output of a function constrains itself to.


Let's look at a silly example to put it into context. Below, we define a new type, which has two properties, a, and b, both of which are numbers. A function then turns all numbers on this object into strings and returns a new type. We define a custom type, called Data, which expects a and b to be strings.


function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}

type Data = {
    a: string,
    b: string
}

function consoleData(data:Data) {
    console.log(JSON.stringify(data));
}

let stringifyNumbers = sendData(1, 2);
consoleData(stringifyNumbers);


Since consoleData expects data to be of format Data, TypeScript throws an error if a or b are numbers. Our sendData function fixes that, by converting a and b to strings.


The issue with this setup is if we added or changed sendData, or our input data, then Data would need to be updated too. That's not a big deal, but it's an easy source of bugs. As such, we can instead use ReturnType to simplify our type declaration. Our Data type can be written like this:


function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}
type Data = ReturnType<typeof sendData>
// The same as writing:
// type Data = {
//     a: string,
//     b: string
// }


Since sendData returns data in type { a: string, b: string }, Data becomes that type. It means we don't have to maintain two copies of the output from sendData - instead, we have one, inside the function, and a type that conforms to that, simplifying our code.


Also Published Here

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!