Difference in TypeScript between types `InstanceType<typeof MyClass>` and `: MyClass`

ONLINECAST

2 min read

·

05-10-2024

13

0

Share

Demystifying InstanceType<typeof MyClass> vs. : MyClass in TypeScript

Understanding the nuances of type definitions in TypeScript is crucial for writing robust and type-safe code. Two commonly encountered types, InstanceType<typeof MyClass> and : MyClass, often leave developers wondering about their differences and when to use each. This article aims to clarify their distinction and shed light on their respective use cases.

The Scenario

Let's consider a simple TypeScript class:

class MyClass {
  name: string;

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

Now, imagine we want to define a variable that holds an instance of MyClass. We could use either of these type annotations:

const instance1: InstanceType<typeof MyClass> = new MyClass('John'); 
const instance2: MyClass = new MyClass('Jane');

Both instance1 and instance2 successfully store MyClass instances. However, what exactly sets these two types apart?

Understanding the Differences

• InstanceType<typeof MyClass>: This type represents the concrete instance type of the class MyClass. It essentially says, "This variable can only hold an object that is an instance of MyClass."

• : MyClass: This is a more general type annotation. It simply signifies that the variable should hold an object that conforms to the structure defined by the MyClass class. It doesn't necessarily have to be a direct instance of MyClass.

Key Insight: Inheritance and Flexibility

The crucial distinction lies in how these types handle inheritance. Let's introduce a subclass:

class SubClass extends MyClass {
  age: number;

  constructor(name: string, age: number) {
    super(name);
    this.age = age;
  }
}

Now, consider these assignments:

const instance3: InstanceType<typeof MyClass> = new SubClass('Peter', 30); // Error!
const instance4: MyClass = new SubClass('Alice', 25); // Valid!

Using InstanceType<typeof MyClass> for instance3 results in an error because SubClass is a subclass, not a direct instance of MyClass. However, instance4 is valid because the SubClass instance conforms to the structure defined by MyClass, even though it's a subclass.

Practical Implications

• InstanceType<typeof MyClass>: Use this type when you need to guarantee that a variable holds a direct instance of the specified class. This is useful for situations where you need to access methods or properties specific to that class and not any potential subclasses.

• : MyClass: This type offers more flexibility. If you're working with inheritance hierarchies and want to accept instances of both MyClass and its subclasses, : MyClass is the appropriate choice.

Conclusion

While both InstanceType<typeof MyClass> and : MyClass seem similar, their subtle distinctions can have significant implications in your code. By understanding their differences, you can choose the most suitable type annotation for each situation, ensuring type safety and flexibility within your TypeScript project.

References

• TypeScript Documentation - InstanceType
• TypeScript Documentation - Class Types