ThisParameterType and OmitThisParameter in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extract the type of 'this' from the function.

Typescript

type Context = [1]<() => void>;

Drag options to blanks, or click blank then click option'

AThisParameterType

BOmitThisParameter

CReturnType

DParameters

Attempts:

3 left

💡 Hint

Common Mistakes

Using OmitThisParameter instead of ThisParameterType

Confusing ReturnType with ThisParameterType

The ThisParameterType utility extracts the type of this from a function type.

2fill in blank

medium

Complete the code to remove the 'this' parameter from the function type.

Typescript

type FnWithoutThis = [1]<(this: string, x: number) => void>;

Drag options to blanks, or click blank then click option'

AThisParameterType

BOmitThisParameter

CReturnType

DParameters

Attempts:

3 left

💡 Hint

Common Mistakes

Using ThisParameterType instead of OmitThisParameter

Using ReturnType or Parameters which don't affect 'this'

The OmitThisParameter utility removes the this parameter from a function type.

3fill in blank

hard

Fix the error in the code by correctly typing the function without 'this'.

Typescript

const fn: [1] = (x: number) => { console.log(x); };

Drag options to blanks, or click blank then click option'

A(this: string, x: number) => void

B(x: number) => void

COmitThisParameter<(this: string, x: number) => void>

DThisParameterType<(this: string, x: number) => void>

Attempts:

3 left

💡 Hint

Common Mistakes

Using the original function type with 'this' causes errors

Confusing ThisParameterType with OmitThisParameter

Using OmitThisParameter removes the 'this' parameter, matching the arrow function signature.

4fill in blank

hard

Fill both blanks to extract 'this' type and remove it from the function type.

Typescript

type Fn = (this: Date, y: number) => string;
type ThisType = [1]<Fn>;
type FnNoThis = [2]<Fn>;

Drag options to blanks, or click blank then click option'

AThisParameterType

BReturnType

COmitThisParameter

DParameters

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order of utilities

Using ReturnType or Parameters which don't handle 'this'

ThisParameterType extracts the 'this' type, and OmitThisParameter removes it from the function type.

5fill in blank

hard

Fill all three blanks to create a function type without 'this' and call it correctly.

Typescript

type FnWithThis = (this: [1], x: number) => void;
type ThisType = [3]<FnWithThis>;
const fn: [2]<FnWithThis> = function(x) {
  console.log(this.length, x);
};

fn.call('Alice', 42);

Drag options to blanks, or click blank then click option'

Astring

BOmitThisParameter

CThisParameterType

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong types for 'this'

Confusing ThisParameterType with OmitThisParameter

The function has 'this' of type string. We extract it with ThisParameterType, and remove 'this' using OmitThisParameter for the function type.