ThisParameterType and OmitThisParameter in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function using ThisParameterType

What is the output of this TypeScript code using ThisParameterType?

Typescript

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

const greetFn: (greeting: string) => string = greet;

const obj = { name: "Alice", greet: greetFn };

console.log(greetFn("Hello"));

A TypeError: Cannot read property 'name' of undefined

B "Hello, Alice!"

C "Hello, undefined!"

D SyntaxError: Unexpected token

💡 Hint

Remember that ThisParameterType extracts the type of this parameter, but the function is assigned without binding this.

The function greet expects this to be an object with a name property. However, when assigned to greetFn, this is lost because the function is called without a proper this context, causing this to be undefined in strict mode, leading to a TypeError.

❓ Predict Output

intermediate

Effect of OmitThisParameter on function type

What is the type of newFn after applying OmitThisParameter to fn in this code?

Typescript

function fn(this: {x: number}, y: number): number {
  return this.x + y;
}

type FnNoThis = OmitThisParameter<typeof fn>;

const newFn: FnNoThis = (y) => fn.call({x: 10}, y);

console.log(newFn(5));

A NaN

B TypeError: Cannot read property 'x' of undefined

C 15

D SyntaxError

💡 Hint

OmitThisParameter removes the this parameter from the function type, so newFn only takes y.

OmitThisParameter creates a function type without the this parameter. The new function newFn calls fn with a bound this object {x: 10}. So calling newFn(5) returns 10 + 5 = 15.

🔧 Debug

advanced

Why does this code cause a TypeScript error?

This code tries to assign a function with a this parameter to a variable without it. Why does TypeScript show an error here?

Typescript

function show(this: {name: string}) {
  console.log(this.name);
}

const fn: () => void = show;

A Because the function <code>show</code> requires a <code>this</code> parameter but <code>fn</code> type does not include it

B Because <code>show</code> has a syntax error in the <code>this</code> parameter

C Because <code>fn</code> is missing a return type

D Because <code>show</code> is not declared with an arrow function

💡 Hint

Check the function types and how this parameters affect assignability.

Functions with explicit this parameters are not assignable to functions without them because the this parameter is part of the function's type signature in TypeScript.

🧠 Conceptual

advanced

Purpose of ThisParameterType utility type

What does the TypeScript utility type ThisParameterType do?

A Binds the <code>this</code> parameter to a specific object

B Extracts the type of the <code>this</code> parameter from a function type

C Removes the <code>this</code> parameter from a function type

D Converts a function to an arrow function

💡 Hint

Think about what part of the function type ThisParameterType extracts.

ThisParameterType extracts the type of the this parameter from a function type, if it exists. If the function has no this parameter, it returns unknown.

❓ Predict Output

expert

Output of combined ThisParameterType and OmitThisParameter usage

What is the output of this TypeScript code that uses both ThisParameterType and OmitThisParameter?

Typescript

function multiply(this: {factor: number}, value: number): number {
  return this.factor * value;
}

type FactorType = ThisParameterType<typeof multiply>;

const obj: FactorType = { factor: 3 };

type MultiplyNoThis = OmitThisParameter<typeof multiply>;

const multiplyNoThis: MultiplyNoThis = (value) => multiply.call(obj, value);

console.log(multiplyNoThis(5));

A TypeError: Cannot read property 'factor' of undefined

B NaN

C 5

D 15

💡 Hint

Look at how obj is typed using ThisParameterType and how multiplyNoThis calls multiply with obj as this.

ThisParameterType extracts the type of this from multiply, which is { factor: number }. The object obj matches this type. OmitThisParameter creates a function type without this. The function multiplyNoThis calls multiply with obj as this, so multiplyNoThis(5) returns 3 * 5 = 15.