Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

Question

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

I am currently facing an issue with a function that takes a constructor as a parameter and creates an instance based on that constructor. When attempting to check the type of the constructor, I encountered an error.

Below are some snippets of code that I have experimented with:

First attempt:

function hello(arg: Function) {
  if(arg instanceof typeof MyClass) { // .. constructor(a: number) ..
    return new arg(123)
  } else if(arg instanceof typeof MyClass2) { // .. constructor(a: string) ..
    return new arg('abc')
  } else return arg(true)
}

This resulted in the following error:

The right-hand side of an 'instanceof' expression must be of type 'any' or of a type assignable to the 'Function' interface type. ts(2359)

Second attempt:

// ...
if (arg.prototype instanceof Component) {
  const hi = new arg(123)
  // ...
}

However, this also led to an error:

Cannot use 'new' with an expression whose type lacks a call or construct signature. ts(2351)

My goal is to validate the type of certain constructors like so:

hello(MyClass) // new MyClass(123)
hello(MyClass2) // new MyClass2('abc')

typescript

Answer 1

Answer №1

Consider the classes given below:

class SampleClass {
  constructor(public x: number) {}
}

class AnotherSampleClass {
  constructor(public y: string) {}
}

A factory function can be created in the following way:

function createInstance<T extends new (...args: any[]) => any>(arg: T): InstanceType<T> {
   if (arg instanceof SampleClass) {
      // .. constructor(x: number) ..
      return new arg(123);
   } else if (arg instanceof AnotherSampleClass) {
      // .. constructor(y: string) ..
      return new arg("abc");
   } else return new arg(true);
}

InstanceType is a useful builtin utility type.

Usage example:

const obj = createInstance(SampleClass); // type = SampleClass

Answer 2

Consider the classes given below:

class SampleClass {
  constructor(public x: number) {}
}

class AnotherSampleClass {
  constructor(public y: string) {}
}

A factory function can be created in the following way:

function createInstance<T extends new (...args: any[]) => any>(arg: T): InstanceType<T> {
   if (arg instanceof SampleClass) {
      // .. constructor(x: number) ..
      return new arg(123);
   } else if (arg instanceof AnotherSampleClass) {
      // .. constructor(y: string) ..
      return new arg("abc");
   } else return new arg(true);
}

InstanceType is a useful builtin utility type.

Usage example:

const obj = createInstance(SampleClass); // type = SampleClass

Answer 3

Answer №2

When working with Typescript, constructor functions are an integral part of classes. The Typescript compiler will generate JavaScript "constructor" functions for ES5 or earlier versions, and for more recent ECMAScript versions, the output JavaScript will maintain the use of the class keyword.

This code snippet draws inspiration from the Typescript handbook section on instanceof type guards.

Instead of creating a function that takes a constructor function as a parameter, the function instantiateClass is designed to receive a Typescript class, which it then instantiates and returns based on the runtime type.

An Example of a Typescript Function That Accepts a Class for Instantiation

interface Padder {
    getPaddingString(): string
}

class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString() {
        return Array(this.numSpaces + 1).join(" ");
    }
}

class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString() {
        return this.value;
    }
}

function instantiateClass(myClass: new (...args: any[]) => any): Padder {
    if (myClass instanceof SpaceRepeatingPadder) {
        return new myClass(2 /* numSpaces */);
    } else if (myClass instanceof StringPadder) {
        return new myClass('*' /* value */);
    } else {
        return new myClass()
    }
}

let padder = instantiateClass(SpaceRepeatingPadder);
if (padder instanceof SpaceRepeatingPadder) {
    console.log("type narrowed to 'SpaceRepeatingPadder'")
}
if (padder instanceof StringPadder) {
    console.log("type narrowed to 'StringPadder'")
}

padder = instantiateClass(StringPadder);
if (padder instanceof SpaceRepeatingPadder) {
    console.log("type narrowed to 'SpaceRepeatingPadder'")
}
if (padder instanceof StringPadder) {
    console.log("type narrowed to 'StringPadder'")
}

Console Output

type narrowed to 'SpaceRepeatingPadder'
type narrowed to 'StringPadder'

Check out the example in the TypeScript Playground

In the Playground, go to Options and experiment by changing the target version of ECMAScript.

Answer 4

When working with Typescript, constructor functions are an integral part of classes. The Typescript compiler will generate JavaScript "constructor" functions for ES5 or earlier versions, and for more recent ECMAScript versions, the output JavaScript will maintain the use of the class keyword.

This code snippet draws inspiration from the Typescript handbook section on instanceof type guards.

Instead of creating a function that takes a constructor function as a parameter, the function instantiateClass is designed to receive a Typescript class, which it then instantiates and returns based on the runtime type.

An Example of a Typescript Function That Accepts a Class for Instantiation

interface Padder {
    getPaddingString(): string
}

class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString() {
        return Array(this.numSpaces + 1).join(" ");
    }
}

class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString() {
        return this.value;
    }
}

function instantiateClass(myClass: new (...args: any[]) => any): Padder {
    if (myClass instanceof SpaceRepeatingPadder) {
        return new myClass(2 /* numSpaces */);
    } else if (myClass instanceof StringPadder) {
        return new myClass('*' /* value */);
    } else {
        return new myClass()
    }
}

let padder = instantiateClass(SpaceRepeatingPadder);
if (padder instanceof SpaceRepeatingPadder) {
    console.log("type narrowed to 'SpaceRepeatingPadder'")
}
if (padder instanceof StringPadder) {
    console.log("type narrowed to 'StringPadder'")
}

padder = instantiateClass(StringPadder);
if (padder instanceof SpaceRepeatingPadder) {
    console.log("type narrowed to 'SpaceRepeatingPadder'")
}
if (padder instanceof StringPadder) {
    console.log("type narrowed to 'StringPadder'")
}

Console Output

type narrowed to 'SpaceRepeatingPadder'
type narrowed to 'StringPadder'

Check out the example in the TypeScript Playground

In the Playground, go to Options and experiment by changing the target version of ECMAScript.

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

Answer №1

Answer №2

An Example of a Typescript Function That Accepts a Class for Instantiation

Console Output

Similar questions

Can you provide instructions on executing package dependencies using yarn in the command line? For example, is there a command similar to npx tsc init for initializing a npm

Unable to utilize Stats.js with @angular/cli version 1.4.4

Guide to correcting the file path of an external css within the public directory on Express framework

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

Here is an example showcasing how to use Angular 2 to make an

How to extract key-value pairs from an object in a TypeScript API request

Retrieving Data in Typescript Async Function: Ensuring Data is Returned Once All Code is Executed

Build a stopwatch that malfunctions and goes haywire

Using TypeScript - Implementing Reduce function with a return type containing optional fields

Double invocation of ActivatedRoute.params.subscribe method observed

Issue encountered while trying to iterate through an observable: Object does not have the capability to utilize the 'forEach' property or method

Retrieving the chosen option from a personalized drop-down element

What is the best way to handle various sections with changing structures within a complex form using react-hook-form?

Setting up Webpack for Node applications

Versatile Typescript options

Bringing Typescript classes into React-scripts does not act as a constructor

Changing an element within an item stored in Ionic Storage

Issues with the ngModel data binding functionality

Tips for RETRIEVING a particular cookie value in Angular version 14