How To Use the Built-In Parameters Type in TypeScript

Here’s how you get the type of a function’s parameters in TypeScript.

Hello fellow TypeScript enthusiasts! Ever felt like diving deep into function parameter typing in TypeScript? In that case, you are in the right place! Today, I want to introduce you to a gem: the built-in Parameters type. 🦝

What Is the Parameter Type in TypeScript

If you’ve ever been in a situation where you wanted to grab the parameter types from a function, you know it’s not always straightforward.

That’s where our mapache friend, the Parameters type, comes in. It allows you to obtain a “tuple type” from the types of a function's parameters.

A tuple type is an array type with a known length, where each index position has a specified type. Think of the return type of React’s useState:

const [mapacheName, setMapacheName] = useState("rocky")

The returned value [mapacheName, setMapacheName] is a tuple of length 2. The type of this tuple is [string, Dispatch].

A Simple Example of Using Parameters<Type>

Let’s start with a basic example. To use Parameters, you pass in the function as the generic Type. It looks a little something like this:

type MapacheFeedingFunction = (food: string, quantity: number) => void

/** This type is a tuple type of length 2 */ 
type MapacheDiet = Parameters<MapacheFeedingFunction>

In the above code, MapacheDiet would be equivalent to:

/** This is the same tuple type of length 2 */ 
type MapacheDietEquivalent = [string, number]

The MapacheDiet type now holds a tuple of the parameters for our MapacheFeedingFunction. This can save you quite a bit of retyping!

You also will get the labels from the function parameters as part of the type. It’s similar to a defining an object type as {key: string]: string}:

/** When you define an object type in TypeScript, you can name the keys.
type SomeObjectType = {[keyName: string]: string}

// The actual tooltip for `MapacheDiet` includes the parameter names.
// type MapacheDiet = [food: string, quantity: number]

But more importantly, you probably never want to retype out parameter types manually; you already had to type them up the first time, right?

In all seriousness, typing them out again can easily lead to bugs and type errors, since you double your maintenance if you don’t use Parameters.

Using the Params Type with Higher-Order Functions

Where the Parameters type shines is in higher-order functions, which are functions that take another function (called a “callback”) as a parameter.

Imagine you have a function that wraps another function, but you want to be sure the wrapping function accepts the same parameters.

How do you do that? Let’s look at another example:

/** We type the callback before defining our higher-order function. */
type CallbackFunction = (mapacheName: string, age: number) => void

/** We can pass in any matching callback function to `mapacheHandler`. */
function mapacheHandler(callback: CallbackFunction) {
  callback("Ricky", 3)
}

/** The tuple type here will be `[callback: CallbackFunction]`. */
type MapacheHandlerParams = Parameters<typeof mapacheHandler>

In the above snippet, MapacheHandlerParams is now a tuple of length 1, defined as the type of the mapacheHandler function’s parameters.

In case the signature of CallbackFunction changes, our handler function will still be in sync. Talk about keeping our mapaches well-handled! 🦝

Nesting Parameters With Other Utility Types

The Parameters type isn’t just a standalone utility; it plays well with the other built-in utility types I’ve been covering here in Totally TypeScript.

Let’s say we have some different use cases for the same function, such that mapaches involved in a research experiment are given numbers instead of names. That means we type the name prop as the union string | number.

When placing mapaches into our mapache fostering and adoption program, we need to ensure the first parameter of our mapache function is always a string, and never a number. We can use Parameters along with TypeScript’s built-in Exclude utility type to achieve this exact effect:

/** This is the function for the adoption & the research project. */
type MapacheFunction = (name: string | number, isCute: boolean) => void

/** The type here is `string`. */
type ValidMapacheNames = Exclude<Parameters<MapacheFunction>[0], number>

/**
 * The tooltip shows that the type is what we want for adopting mapaches:
 * (name: ValidMapacheNames, isCute: Parameters<MapacheFunction>[1]) => void
 * 
 * This is equivalent to the following type; `name` can't be a number:
 * type AdoptMapache = (name: string, isCute: boolean) => void
 */
type AdoptMapache = (name: ValidMapacheNames, isCute: Parameters<MapacheFunction>[1]) => voidWith that, ValidMapacheNames is a type that ensures it can only be a string. No numeric raccoon names allowed for our mapache adoption program!

This example is pretty contrived, but the important takeaway is that you’ll often combine utility types like Parameters and Exclude in the same code.

I’ve put all of the code examples together into TypeScript Playground so that you can, well, play around with them! Let me know if that helps you.

Wrapping Up: TypeScript’s Type for Function Params

The Parameters type in TypeScript is a great utility for those who of us want a dynamic way to derive parameter types. I’m all about keeping my types thoroughly documented in one place, and then reusing them again!

This particular built-in type can be a real lifesaver, whether you prefer regular function params or passing objects as function params.

The Parameters type is as clever and nimble as our mapache friends, who already knew what tuple was before I told them. Code mapaches!!! 😡

Next time you’re coding in TypeScript, remember mapaches and the tricks they teach us. Embrace the Parameters type, and elevate your type game.

And, if you liked this article, be sure to let me know by highlighting it! Doing so helps the next reader know what you found most insightful.

Happy coding! 🐶

Further Reading: More Articles in Totally TypeScript