Part of Series: TypeScript Utility Types

How the TypeScript ReturnType Type works

📣 Sponsor

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.

Last Updated 1652203193931

More Tips and Tricks for Typescript

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email