How the TypeScript ReturnType Type works

The ReturnType in TypeScript is a utility type which is quite similar to the Parameters Type. It let's you take the return output of a function, and construct a type based off it.

The 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 so:

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.