ThisParameterType and OmitThisParameter in Typescript - Mini Project: Build & Apply

Using ThisParameterType and OmitThisParameter in TypeScript

📖 Scenario: Imagine you are creating a simple calculator object with methods that use this to access its properties. You want to learn how to extract the type of this from these methods and how to create versions of these methods without the this parameter.

🎯 Goal: You will build a TypeScript example that shows how to use ThisParameterType to get the type of this from a method, and how to use OmitThisParameter to create a function type without the this parameter.

📋 What You'll Learn

Create an object with a method that uses this

Create a type alias using ThisParameterType to get the this type

Create a type alias using OmitThisParameter to remove the this parameter

Call the method with and without this parameter

💡 Why This Matters

🌍 Real World

Understanding how to handle the <code>this</code> parameter is important when working with object methods and callbacks in TypeScript, especially when you want to reuse methods without binding them.

💼 Career

Many TypeScript jobs require working with complex object types and functions. Knowing how to manipulate <code>this</code> types helps write safer and more flexible code.

1

Create a calculator object with a method using this

Create a constant called calculator with a method add that takes a number value and returns the sum of this.base and value. The object should have a property base set to 10.

Typescript

// Your code here

Hint

Remember to define this type explicitly in the add method.

2

Create a type alias using ThisParameterType to get the this type of add

Create a type alias called AddThisType that uses ThisParameterType on typeof calculator.add.

Typescript

const calculator = {
  base: 10,
  add(this: { base: number }, value: number): number {
    return this.base + value;
  }
};

// Your code here

Hint

Use ThisParameterType with typeof calculator.add to get the this type.

3

Create a type alias using OmitThisParameter to remove the this parameter from add

Create a type alias called AddWithoutThis that uses OmitThisParameter on typeof calculator.add.

Typescript

const calculator = {
  base: 10,
  add(this: { base: number }, value: number): number {
    return this.base + value;
  }
};

type AddThisType = ThisParameterType;

// Your code here

Hint

Use OmitThisParameter with typeof calculator.add to remove the this parameter.

4

Call the add method with and without this parameter

Create a constant result1 by calling calculator.add with calculator as this and 5 as argument. Create a constant addFn of type AddWithoutThis assigned to calculator.add. Then create a constant result2 by calling addFn with 5. Finally, print result1 and result2 separated by a space.

Typescript

const calculator = {
  base: 10,
  add(this: { base: number }, value: number): number {
    return this.base + value;
  }
};

type AddThisType = ThisParameterType;

type AddWithoutThis = OmitThisParameter;

// Your code here

Hint

Use call to call add with this. Assign calculator.add to a variable of type AddWithoutThis and call it without this.

Practice

1.

What does ThisParameterType do in TypeScript?

easy

A. Removes the this parameter from a function type

B. Extracts the type of this from a function type

C. Changes the return type of a function

D. Adds a this parameter to a function type

Solution

1. Step 1: Understand the purpose of ThisParameterType

   This utility type extracts the type of the this parameter from a function type if it exists.

2. Step 2: Compare with other utilities

   OmitThisParameter removes the this parameter, but ThisParameterType extracts it instead.

3. Final Answer:

   Extracts the type of this from a function type -> Option B

4. Quick Check:

   ThisParameterType extracts this type [OK]

Hint: Remember: 'ThisParameterType' extracts, 'OmitThisParameter' removes [OK]

Common Mistakes:

• Confusing extraction with removal
• Thinking it changes return type
• Assuming it adds this parameter

2.

Which of the following is the correct syntax to use OmitThisParameter on a function type fn?

type NewFn = ?

easy

A. OmitThisParameter<fn()>

B. OmitThisParameter(fn)

C. OmitThisParameter<fn>

D. OmitThisParameter<typeof fn>

Solution

1. Step 1: Identify correct generic syntax

   OmitThisParameter is a generic type, so it requires angle brackets with a type inside, like <typeof fn>.

2. Step 2: Check the options

   Only OmitThisParameter<typeof fn> uses the correct generic syntax with typeof fn to get the function type.

3. Final Answer:

   OmitThisParameter<typeof fn> -> Option D

4. Quick Check:

   Generic types use <> with typeof for functions [OK]

Hint: Use angle brackets and typeof for function types [OK]

Common Mistakes:

• Using parentheses instead of angle brackets
• Passing function call instead of type
• Omitting typeof keyword

3.

Consider this TypeScript code:

function greet(this: { name: string }, greeting: string) {
  return `${greeting}, ${this.name}!`;
}

type GreetNoThis = OmitThisParameter<typeof greet>;

const greetNoThis: GreetNoThis = (greeting) => greet.call({ name: 'Alice' }, greeting);

console.log(greetNoThis('Hello'));

What is the output?

medium

A. "Hello, Alice!"

B. "Hello, undefined!"

C. Type error at assignment

D. Runtime error: this is undefined

Solution

1. Step 1: Understand OmitThisParameter effect

   It removes the this parameter from greet, so greetNoThis only takes greeting.

2. Step 2: Analyze the call

   greetNoThis calls greet.call with an explicit this object having name: 'Alice', so the greeting uses 'Alice'.

3. Final Answer:

   "Hello, Alice!" -> Option A

4. Quick Check:

   OmitThisParameter removes this, call sets it explicitly [OK]

Hint: OmitThisParameter removes this, call sets it manually [OK]

Common Mistakes:

• Assuming this is undefined inside greet
• Expecting type error on assignment
• Thinking greetNoThis needs this parameter

4.

Find the error in this TypeScript code using ThisParameterType:

function show(this: { id: number }) {
  console.log(this.id);
}

type ShowThis = ThisParameterType<typeof show>;

const idValue: ShowThis = 5;

medium

A. Assigning a number to ShowThis is incorrect

B. ThisParameterType cannot be used on functions

C. show has no this parameter

D. Missing parentheses when calling show

Solution

1. Step 1: Understand ThisParameterType output

   It extracts the this type, which is { id: number } here, not a number.

2. Step 2: Check assignment

   Assigning 5 (a number) to ShowThis (an object type) causes a type error.

3. Final Answer:

   Assigning a number to ShowThis is incorrect -> Option A

4. Quick Check:

   Type mismatch: object expected, number given [OK]

Hint: Check extracted this type matches assigned value [OK]

Common Mistakes:

• Thinking ThisParameterType returns a primitive
• Ignoring type mismatch errors
• Confusing this parameter presence

5.

You have a method with a this parameter and want to create a version without this that can be called with just the normal arguments. Which TypeScript utility types would you combine to extract the this type and create a new function type without this?

hard

A. Use ThisParameterType twice to remove and extract this

B. Use OmitThisParameter twice to remove this and extract it

C. Use ThisParameterType to get this type and OmitThisParameter to remove this

D. Use ReturnType and Parameters to handle this

Solution

1. Step 1: Extract the this type

   ThisParameterType extracts the this type from the method.

2. Step 2: Remove the this parameter

   OmitThisParameter creates a new function type without the this parameter.

3. Final Answer:

   Use ThisParameterType to get this type and OmitThisParameter to remove this -> Option C

4. Quick Check:

   Extract then omit this for safe function types [OK]

Hint: Extract this first, then omit it for new function type [OK]

Common Mistakes:

• Trying to omit this before extracting it
• Using unrelated utility types
• Confusing order of operations