Parameters Utility Type in TypeScript Examples and Usages

Parameters Utility Type in TypeScript: Examples and Usages

by

What is Parameters <Type>?

The Parameters <T> utility type in TypeScript allows you to extract the arguments of a function and create a new type based on them. This is particularly useful when we want to replicate the input type of a function.

For instance, if we know that a function takes specific arguments, we can use Parameters to define a type that matches those arguments.

Syntax:

type NewType = Parameters<Type>;

Example:

function greet(name: string, age: number): string {
  return `Hi, my name is ${name} and I'm ${age} years old.`;
}

type SampleParam= Parameters<typeof greet>;
//    ^ = type SampleParam= [string, number]

As you can see in our example, ‘SampleParam’ is a tuple type representing the parameter types of the ‘greet’ function, which are ‘string’ and ‘number’.

How to use the Utility Type Parameters in TypeScript?

Are you excited to learn on how to use the Parameters<Type> utility type in TypeScript?

As we mentioned earlier, this type allows us to extract the parameter types of a function and create a tuple type based on them.

Here’s a step-by-step guide:

Step 1: Define a Function

First, we have to create a function for which you want to capture the parameter types.

For instance:

   function logMessage(this: { timestamp: string }, message: string) {
       console.log(`[${this.timestamp}] ${message}`);
   }

Step 2: Apply the Parameters<Type> Utility

Next, we have to apply the Parameters<Type> utility to the function type to capture the parameter types.

This will give you a tuple type representing the function’s parameters.

In our example:

   type LogMessageParams = Parameters<typeof logMessage>;
   // LogMessageParams is [this: { timestamp: string }, message: string]

Step 3: Use the Captured Types

This time you can use the LogMessageParams type in your code.

For instance, if you have an object with a timestamp property, you can call the logMessage function like this:

const context = { timestamp: '2024-06-28' };
logMessage.apply(context, ['Hi, welcome to Itsourcecode!']);
// Output: [2024-06-28] Hi, welcome to Itsourcecode!

Here’s the complete example code: 

function logMessage(this: { timestamp: string }, message: string) {
    console.log(`[${this.timestamp}] ${message}`);
}

// Define the LogMessageParams type
type LogMessageParams = Parameters<typeof logMessage>;
// LogMessageParams is [this: { timestamp: string }, message: string]

const context = { timestamp: '2024-06-28' };
logMessage.apply(context, ['Hi, welcome to Itsourcecode!']);

    And that’s the step-by-step on how you can successfully used the Parameters<Type> utility type to work with function parameter types in TypeScript.

    Output:

    [2024-06-28] Hi, welcome to Itsourcecode!

    What is the use of utility types in TypeScript?

    TypeScript provides a set of utility types that simplify common type operations.

    These utilities enhance code readability and contribute to better project structure in TypeScript.

    Conclusion

    The Parameters <T> utility type in TypeScript allows you to extract the types of a function’s parameters.

    It’s helpful when you want to reuse parameter types without duplicating them manually.

    Essentially, Parameters represents the parameter types as a tuple type, making it easy to reference them elsewhere in your code

    I hope this article has given you some insights and helped you understand the TypeScript Parameters.

    If you have any questions or inquiries, please don’t hesitate to leave a comment below.

    Leave a Comment