InstanceType type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the instance type of the class.

Typescript

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
type PersonInstance = [1]<typeof Person>;

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

AInstanceType

BReturnType

CParameters

DConstructorParameters

Attempts:

3 left

💡 Hint

Common Mistakes

Using ReturnType instead of InstanceType

Using Parameters or ConstructorParameters which extract function parameters

The InstanceType type extracts the instance type from a class constructor type.

2fill in blank

medium

Complete the code to create an instance of the class using the instance type.

Typescript

class Car {
  model: string;
  constructor(model: string) {
    this.model = model;
  }
}
type CarInstance = InstanceType<typeof Car>;
const myCar: [1] = new Car('Tesla');

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

ACar

Bstring

Ctypeof Car

DCarInstance

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class type Car instead of the instance type alias

Using typeof Car which is the constructor type

The variable myCar should be typed as the instance type of Car, which is CarInstance.

3fill in blank

hard

Fix the error in the code by completing the type alias correctly.

Typescript

class Animal {
  species: string;
  constructor(species: string) {
    this.species = species;
  }
}
type AnimalInstance = [1];

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

AInstanceType<typeof Animal>

BReturnType

CInstanceType

Dtypeof Animal

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the class type Animal directly instead of typeof Animal

Using ReturnType which is for functions

The InstanceType utility requires a constructor type, so we must pass typeof Animal inside the angle brackets.

4fill in blank

hard

Fill both blanks to create a type alias for the instance type and declare a variable of that type.

Typescript

class Book {
  title: string;
  constructor(title: string) {
    this.title = title;
  }
}
type [1] = [2]<typeof Book>;
const myBook: BookInstance = new Book('1984');

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

ABookInstance

BInstanceType

CReturnType

DBookType

Attempts:

3 left

💡 Hint

Common Mistakes

Using ReturnType instead of InstanceType

Naming the alias incorrectly

The type alias should be named BookInstance and use InstanceType with typeof Book.

5fill in blank

hard

Fill all three blanks to create an instance type alias, declare a variable, and access a property.

Typescript

class User {
  username: string;
  constructor(username: string) {
    this.username = username;
  }
}
type [1] = [2]<typeof User>;
const user: UserInstance = new User('alice');
const name: string = user.[3];

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

AUserInstance

BInstanceType

Cusername

DuserName

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property name userName with uppercase N

Not using InstanceType with typeof User

The alias is UserInstance, using InstanceType with typeof User. The property to access is username.

Practice

1. What does the TypeScript utility type InstanceType do?

easy

A. Creates a new class instance

B. Extracts the type of an instance created by a class

C. Defines a type alias for primitive types

D. Converts a type to a string

Solution

1. Step 1: Understand the purpose of InstanceType

   InstanceType is a utility type that extracts the type of an object created by a class constructor.

2. Step 2: Compare options with the definition

   Only Extracts the type of an instance created by a class correctly describes this behavior. Options B, C, and D describe unrelated actions.

3. Final Answer:

   Extracts the type of an instance created by a class -> Option B

4. Quick Check:

   InstanceType extracts instance type = A [OK]

Hint: Remember: InstanceType gets the object type from a class [OK]

Common Mistakes:

• Confusing InstanceType with creating instances
• Thinking it converts types to strings
• Assuming it defines primitive types

2. Which of the following is the correct syntax to use InstanceType with a class named Car?

easy

A. type CarInstance = InstanceType;

B. type CarInstance = InstanceType;

C. type CarInstance = InstanceType;

D. type CarInstance = InstanceType<Car>;

Solution

1. Step 1: Recall the syntax of InstanceType

   InstanceType expects a constructor type, so we pass typeof Car to get the class constructor type.

2. Step 2: Analyze each option

   type CarInstance = InstanceType; uses typeof Car, which is correct. type CarInstance = InstanceType<Car>; passes the class itself, which is a value, not a type. Options A, B, and C use invalid syntax.

3. Final Answer:

   type CarInstance = InstanceType; -> Option A

4. Quick Check:

   Use typeof with class name inside InstanceType for correct syntax = D [OK]

Hint: Use typeof ClassName inside InstanceType for correct syntax [OK]

Common Mistakes:

• Passing class name directly without typeof
• Using parentheses after class name
• Trying to instantiate inside InstanceType

3. Given the code below, what is the type of myDog?

class Dog {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let myDog: InstanceType;
myDog = new Dog('Buddy');

medium

A. string

B. { name: string; }

C. typeof Dog

D. Dog

Solution

1. Step 1: Understand what InstanceType means

   It extracts the instance type created by the Dog class constructor, which is the class Dog itself.

2. Step 2: Match the type of myDog

   myDog is typed as an instance of Dog, so its type is Dog (the class instance type). Dog matches this exactly.

3. Final Answer:

   Dog -> Option D

4. Quick Check:

   InstanceType = Dog instance type = A [OK]

Hint: InstanceType equals the class instance type [OK]

Common Mistakes:

• Confusing instance type with constructor type
• Choosing typeof Class instead of instance
• Picking object shape instead of class type

4. Identify the error in the following TypeScript code using InstanceType:

class Cat {
  age: number;
  constructor(age: number) {
    this.age = age;
  }
}

type CatInstance = InstanceType<Cat>;

const kitty: CatInstance = new Cat(3);

medium

A. Missing typeof before Cat in InstanceType

B. Cannot assign new Cat(3) to kitty

C. Cat class must have a method

D. InstanceType cannot be used with classes

Solution

1. Step 1: Check the usage of InstanceType

   InstanceType requires a constructor type, so the class name must be prefixed with typeof.

2. Step 2: Identify the error in the code

   The code uses InstanceType<Cat> instead of InstanceType, causing a type error.

3. Final Answer:

   Missing typeof before Cat in InstanceType -> Option A

4. Quick Check:

   InstanceType needs typeof ClassName = C [OK]

Hint: Always use typeof with class name inside InstanceType [OK]

Common Mistakes:

• Omitting typeof before class name
• Thinking InstanceType works on instances
• Assuming InstanceType works without constructor type

5. You have two classes, Circle and Square. You want to create a function that accepts an instance of either class using InstanceType. Which of the following is the correct way to type the parameter shape?

class Circle {
  radius: number;
  constructor(radius: number) {
    this.radius = radius;
  }
}

class Square {
  side: number;
  constructor(side: number) {
    this.side = side;
  }
}

function drawShape(shape: ???) {
  // drawing logic
}

hard

A. Circle | Square

B. typeof Circle | typeof Square

C. InstanceType | InstanceType

D. InstanceType

Solution

1. Step 1: Understand the goal

   The function should accept instances of Circle or Square, so the parameter type must represent instances, not classes or constructors.

2. Step 2: Analyze each option

   InstanceType | InstanceType correctly uses InstanceType and InstanceType combined with a union to represent instances of both classes. Circle | Square uses class names directly, which are types of instances but does not use InstanceType. typeof Circle | typeof Square uses constructor types, which is incorrect for instances. InstanceType tries to use InstanceType on a union of classes, which is invalid.

3. Final Answer:

   InstanceType | InstanceType -> Option C

4. Quick Check:

   Use InstanceType with typeof for each class, combine with | for union [OK]

Hint: Use InstanceType for each, join with | for multiple classes [OK]

Common Mistakes:

• Using class names without InstanceType
• Using typeof Class instead of InstanceType
• Trying InstanceType on union of classes directly