TypeScript ThisParameterType<Type> Utility Type

In this article, we are going to learn about ThisParameterType<Type> Utility Type in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, the ThisParameterType<Type> utility type is used to extract the type of this parameter in a function type. It allows you to capture the type of context (or instance) on which a function is expected to be called.

Syntax

type ThisContext = ThisParameterType<SomeFunctionType>;

Where-

• ThisContext is the name you choose for the type that represents this context.
• ThisParameterType is the utility type.
• SomeFunctionType is the type of the function from which you want to extract this context.

Approach: Let us see how we can use thenThisParameterType<Type> step-by-step:

Step 1: First, define a function or method for which you want to capture this parameter type:

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

Step 2: Apply the ThisParameterType<Type> utility to the function or method type to capture the type of this within the function:

type LogMessageThis = ThisParameterType<typeof logMessage>;

Step 3: You can then use the captured type to specify the expected context for this when defining methods or functions:

const context: LogMessageThis = { timestamp: "2023-09-15" };
logMessage.call(context, "Hello, Geek!");

Step 4: Now, you can pass the parameter having this data type.

Example 1: In this example, We have a logMessage function that expects to be called with a context that has a timestamp property. ThisParameterType<typeof logMessage> extracts the type of this parameter in the logMessage function, which is { timestamp: string }. We created a context object that matches the expected context type. This is how we used ThisParameter.

Javascript

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

type LogMessageThis = ThisParameterType<typeof logMessage>;

const context: LogMessageThis = { timestamp: "2023-09-15" };
logMessage.call(context, "Hello, Geek!");

Output:

Example 2: In this example, We define a Greeting type that represents an object with a message property and a method. The method uses the this parameter to access the message property. We create an object myGreeting that conforms to the Greeting type. The sayHello method is called on myGreeting, and it correctly logs the message “Hello, GeeksforGeeks!” because TypeScript ensures that the this context inside sayHello refers to the myGreeting object and It is done implicitly.

Javascript

type Greeting = {
    message: string;
    sayHello(this: Greeting): void;
};

const myGreeting: Greeting = {
    message: "Hello, GeeksforGeeks!",
    sayHello() {
        console.log(this.message);
    },
};

// Outputs: "Hello, GeeksforGeeks!"
myGreeting.sayHello();

Output:

Conclusion: In this article, we have seen the use of ThisParameterType<Type> and it’s syntax. Since it can also be done implicitly without using ‘ThisParameterType<Type>’, As it is build in typeScript already. If we use ‘ ThisParameterType<Type>’ for getting the data type by ‘this’ then it will be explicit type.