InstanceType type in Typescript - Mini Project: Build & Apply

Using the InstanceType Type in TypeScript

📖 Scenario: You are working on a TypeScript project where you want to create an instance of a class dynamically and use its type safely.

🎯 Goal: Learn how to use the InstanceType utility type to get the instance type of a class constructor.

📋 What You'll Learn

Create a class called Car with a property model of type string and a method drive that returns a string.

Create a type alias called CarInstance using InstanceType with the typeof Car.

Create a variable called myCar of type CarInstance and assign it a new instance of Car.

Print the result of calling myCar.drive().

💡 Why This Matters

🌍 Real World

Using <code>InstanceType</code> helps when you want to work with instances of classes dynamically and keep your code type-safe.

💼 Career

Understanding utility types like <code>InstanceType</code> is important for writing robust TypeScript code in professional development.

1

Create the Car class

Create a class called Car with a constructor that takes a model parameter of type string and assigns it to a public property model. Add a method called drive that returns the string `Driving the ${this.model}`.

Typescript

// Your code here

Hint

Use class Car with a constructor and a method drive that returns a template string.

2

Create the CarInstance type alias

Create a type alias called CarInstance using InstanceType with typeof Car as the parameter.

Typescript

class Car {
    constructor(public model: string) {}
    drive() {
        return `Driving the ${this.model}`;
    }
}

// Your code here

Hint

Use type CarInstance = InstanceType<typeof Car> to get the instance type.

3

Create a variable of type CarInstance

Create a variable called myCar of type CarInstance and assign it a new instance of Car with the model 'Tesla'.

Typescript

class Car {
    constructor(public model: string) {}
    drive() {
        return `Driving the ${this.model}`;
    }
}

type CarInstance = InstanceType;

// Your code here

Hint

Use const myCar: CarInstance = new Car('Tesla') to create the instance.

4

Print the drive method output

Write a console.log statement to print the result of calling myCar.drive().

Typescript

class Car {
    constructor(public model: string) {}
    drive() {
        return `Driving the ${this.model}`;
    }
}

type CarInstance = InstanceType;

const myCar: CarInstance = new Car('Tesla');

// Your code here

Hint

Use console.log(myCar.drive()) to show the output.

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