Class constructor type in typescript?

Question

How can I declare a class type, so that I ensure the object is a constructor of a general class?

In the following example, I want to know which type should I give to AnimalClass so that it could either be Penguin or Lion:

class Animal {
    constructor() {
        console.log("Animal");
    }
}

class Penguin extends Animal {
    constructor() {
        super();
        console.log("Penguin");
    }
}

class Lion extends Animal {
    constructor() {
        super();
        console.log("Lion");
    }
}

class Zoo {
    AnimalClass: class // AnimalClass could be 'Lion' or 'Penguin'

    constructor(AnimalClass: class) {
        this.AnimalClass = AnimalClass
        let Hector = new AnimalClass();
    }
}

Of course, the class type does not work, and it would be too general anyway.

arthur.sw · Accepted Answer · 2022-01-14 15:05:28Z

94

Edit: This question was answered in 2016 and is kind of outdated. Look at @Nenad up-to-date answer below.

Solution from typescript interfaces reference:

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

So the previous example becomes:

interface AnimalConstructor {
    new (): Animal;
}

class Animal {
    constructor() {
        console.log("Animal");
    }
}

class Penguin extends Animal {
    constructor() {
        super();
        console.log("Penguin");
    }
}

class Lion extends Animal {
    constructor() {
        super();
        console.log("Lion");
    }
}

class Zoo {
    AnimalClass: AnimalConstructor // AnimalClass can be 'Lion' or 'Penguin'
    
    constructor(AnimalClass: AnimalConstructor) {
        this.AnimalClass = AnimalClass
        let Hector = new AnimalClass();
    }
}

edited Jan 14, 2022 at 15:05

answered Sep 21, 2016 at 10:43

arthur.sw

11.8k11 gold badges52 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

pixelpax Over a year ago

I just wanted to add that this solution did NOT work for me, and will not work if you want to use a constructor which takes a non-zero number of arguments. Took me forever to figure out why this example works but my code didn't. The thing I found after hours of searching was to use AnimalClass: typeof Animal. This will work for dynamically loading subclasses of a given class.

Sámal Rasmussen Over a year ago

@pixelpax You can define a non-zero argument constructor like this: new (...args: any[]): Animal

pixelpax Over a year ago

@Sammi, Thank you, your solution does make sense. For me, using typeof Animal to mean "the type of any subclass of Animal" worked really well, and looks descriptive in code.

John Over a year ago

@pixelpax Its meaningless though, as typeof Animal is just the string "function". Any class will satisfy that, not just Animal ctors.

gaperton Over a year ago

Its meaningless though, as typeof Animal is just the string "function" -- in plain JS, yes. In TypeScript type annotation, no. typeof X means the type of the symbol X, whatever it is, and is being processed by the compiler statically.

|

Nenad · Accepted Answer · 2019-08-14 12:51:40Z

86

I am not sure if this was possible in TypeScript when the question was originally asked, but my preferred solution is with generics:

class Zoo<T extends Animal> {
    constructor(public readonly AnimalClass: new () => T) {
    }
}

This way variables penguin and lion infer concrete type Penguin or Lion even in the TypeScript intellisense.

const penguinZoo = new Zoo(Penguin);
const penguin = new penguinZoo.AnimalClass(); // `penguin` is of `Penguin` type.

const lionZoo = new Zoo(Lion);
const lion = new lionZoo.AnimalClass(); // `lion` is `Lion` type.

answered Aug 14, 2019 at 12:51

Nenad

27k11 gold badges81 silver badges102 bronze badges

11 Comments

Joe Coder Over a year ago

+1 This answer is what the official documentation recommends.

fregante Over a year ago

You might need to specify the arguments too: new (...args: unknown[]) => T

atlantis Over a year ago

@Nenad: If I change the Zoo constructor to take (public readonly AnimalClass: new () => Lion) or (public readonly AnimalClass: new () => Penguin), it works fine and both Lion and Penguin instances are instantiated as expected. Shouldn't only the type passed to the constructor work? What gives?

Nenad Over a year ago

@atlantis This is interesting. You can also write const constructor: new () => Lion = Penguin;, but not const constructor: new () => number = Penguin;, so it seems TS is checking return type, but somehow does not differentiate two different subclasses. Maybe a bug?

khteh Over a year ago

How if AnimalClass references Zoo class in it's constructor?

|

gaperton · Accepted Answer · 2019-04-28 21:01:52Z

54

Like that:

class Zoo {
    AnimalClass: typeof Animal;

    constructor(AnimalClass: typeof Animal ) {
        this.AnimalClass = AnimalClass
        let Hector = new AnimalClass();
    }
}

Or just:

class Zoo {
    constructor(public AnimalClass: typeof Animal ) {
        let Hector = new AnimalClass();
    }
}

typeof Class is the type of the class constructor. It's preferable to the custom constructor type declaration because it processes static class members properly.

Here's the relevant part of TypeScript docs. Search for the typeof. As a part of a TypeScript type annotation, it means "give me the type of the symbol called Animal" which is the type of the class constructor function in our case.

edited Apr 28, 2019 at 21:01

answered Apr 16, 2018 at 21:32

gaperton

3,8561 gold badge23 silver badges16 bronze badges

6 Comments

Sheraff Over a year ago

typeof returns a string, you can't use the result to call new

gaperton Over a year ago

typeof Animal is a TypeScript type annotation which "returns" the type of the Animal constructor function. It doesn't return a string.

gaperton Over a year ago

It's always a good idea to run the code in question in typescript playground and consult the docs (typescriptlang.org/docs/handbook/classes.html) before trying to correct the answer. Never hurts :).

nerdlinger Over a year ago

Way better and more intuitive than the accepted answer!

Abdul Alim Over a year ago

It does not work with an abstract class though.

|

AleC · Accepted Answer · 2019-06-25 18:43:15Z

16

How can I declare a class type, so that I ensure the object is a constructor of a general class?

A Constructor type could be defined as:

 type AConstructorTypeOf<T> = new (...args:any[]) => T;

 class A { ... }

 function factory(Ctor: AConstructorTypeOf<A>){
   return new Ctor();
 }

const aInstance = factory(A);

edited Jun 25, 2019 at 18:43

answered Jun 25, 2019 at 18:36

AleC

5226 silver badges8 bronze badges

1 Comment

John Wiseman Over a year ago

Unfortunately with this method you lose type checking of the constructor arguments.

Guihgo · Accepted Answer · 2024-02-04 06:37:15Z

2

Use typeof to refer a Class Constructor

class Animal {
    constructor() {
        console.log("Animal");
    }
}

class Penguin extends Animal {
    constructor() {
        super();
        console.log("Penguin");
    }
}

class Lion extends Animal {
    constructor() {
        super();
        console.log("Lion");
    }
}

class Zoo {
    AnimalClass: typeof Animal // AnimalClass could be 'Lion' or 'Penguin'

    constructor(AnimalClass: typeof Animal) {
        this.AnimalClass = AnimalClass
        let Hector = new AnimalClass();
    }
}

edited Feb 4, 2024 at 6:37

answered Feb 4, 2024 at 6:30

Guihgo

66210 silver badges13 bronze badges

Collectives™ on Stack Overflow

Class constructor type in typescript?

5 Answers 5

10 Comments

11 Comments

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

11 Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related