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

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

You cannot invoke this expression while destructuring an array of React hooks in TypeScript

Managing the display of numerous ngFor components

When using Styled Components with TypeScript, you may encounter the error message "No overload matches

Creating Dynamic ion-card Elements in Typescript by Programmatically Changing Values

Unable to locate any static exports within the TypeScript library bundle

Fixing the "Module not found" error in an Angular library using npm link

Managing a scenario with a union type where the value can be retrieved from one of two different functions

Utilizing Typescript for Axios Response

When utilizing ng2-bootstrap, there is no directive that is defined with the "exportAs" attribute set to "bs-modal"

D3-cloud creates a beautiful mesh of overlapping words

Effortlessly collapsing cards using Angular 2 and Bootstrap

The error message "tsc not found after docker image build" appeared on the

Having trouble resolving modules with Angular 2 and ASP.NET 5 (unable to locate angular2/core)?

I encountered a permission denied error while attempting to execute the command npm install -g tsc

Collaborate on Typescript Interfaces within a Firebase development environment

The introduction of an underscore alters the accessibility of a variable

It's conceivable that the item is 'null'

"Ionic Calendar 2 - The ultimate tool for organizing your

Understanding TypeScript typing when passing arguments to the Object.defineProperty function