How does interfaces with construct signatures work?

TypescriptConstructorInterface

Typescript Problem Overview


I am having some trouble working out how defining constructors in interfaces work. I might be totally misunderstanding something. But I have searched for answers for a good while and I can not find anything related to this.

How do I implement the following interface in a TypeScript class:

interface MyInterface {
    new ( ... ) : MyInterface;
}

Anders Hejlsberg creates an interface containing something similar to this in this video (at around 14 minutes). But for the life of me I can not implement this in a class.

I am probably misunderstanding something, what am I not getting?

EDIT:

To clarify. With "new ( ... )" I meant "anything". My problem is that I can not get even the most basic version of this working:

interface MyInterface {
    new () : MyInterface;
}

class test implements MyInterface {
    constructor () { }
}

This is not compiling for me I get "Class 'test' declares interface 'MyInterface' but does not implement it: Type 'MyInterface' requires a construct signature, but Type 'test' lacks one" when trying to compile it.

EDIT:

So after researching this a bit more given the feedback.

interface MyInterface {
    new () : MyInterface;
}

class test implements MyInterface {
    constructor () => test { return this; }
}

Is not valid TypeScript and this does not solve the problem. You can not define the return type of the constructor. It will return "test". The signature of the following: class test { constructor () { } } Seems to be "new () => test" (obtained by hovering over "class" in the online editor with just that code pasted in). And this is what we would want and what i thought it would be.

Can anyone provide an example of this or something similar where it is actually compiling?

EDIT (again...):

So I might have come up with an idea as to why it is possible to define this in an interface but not possible to implement in a TypeScript class.The following works:

var MyClass = (function () {
    function MyClass() { }
    return MyClass;
})();

interface MyInterface {
	new () : MyInterface;
}

var testFunction = (foo: MyInterface) : void =>  { }
var bar = new MyClass();
testFunction(bar);

So is this only a feature of TypeScript that lets you interface javascript? Or is it possible to implement it in TypeScript without having to implement the class using javascript?

Typescript Solutions


Solution 1 - Typescript

Construct signatures in interfaces are not implementable in classes; they're only for defining existing JS APIs that define a 'new'-able function. Here's an example involving interfaces new signatures that does work:

interface ComesFromString {
    name: string;
}

interface StringConstructable {
    new(n: string): ComesFromString;
}

class MadeFromString implements ComesFromString {
    constructor (public name: string) {
        console.log('ctor invoked');
    }
}

function makeObj(n: StringConstructable) {
    return new n('hello!');
}

console.log(makeObj(MadeFromString).name);

This creates an actual constraint for what you can invoke makeObj with:

class Other implements ComesFromString {
    constructor (public name: string, count: number) {
    }
}

makeObj(Other); // Error! Other's constructor doesn't match StringConstructable

Solution 2 - Typescript

On my search for the exact same question I went looking how the TypeScript-Team did that...

They are declaring an interface and afterwards a variable with a name matching exactly the interface-name. This is also the way to type static functions.

Example from lib.d.ts:

interface Object {
    toString(): string;
    toLocaleString(): string;
    // ... rest ...
}
declare var Object: {
    new (value?: any): Object;
    (): any;
    (value: any): any;
    // ... rest ...
}

I tried that and it works like charm.

Solution 3 - Typescript

Well an interface with a construct signature is not meant to be implemented by any class(at first glance this might look weird for guys with C#/Java background like me but give it a chance). It is slightly different.

For a moment think of it as a interface with a call signature(like a @FunctionalInterface in Java world). Its purpose is to describe a function type..kind of. The described signature is supposed to be satisfied by a function object...but not just any high level function or a method. It should be a function which knows how to construct an object, a function that gets called when new keyword is used.

So an interface with a construct signature defines the signature of a constructor ! The constructor of your class that should comply with the signature defined in the interface(think of it as the constructor implements the interface). It is like a factory !

Here is a short snippet of code that tries to demonstrate the most common usage:

interface ClassicInterface { // old school interface like in C#/Java
    method1();
    ...
    methodN();
}

interface Factory { //knows how to construct an object
    // NOTE: pay attention to the return type
    new (myNumberParam: number, myStringParam: string): ClassicInterface
}

class MyImplementation implements ClassicInterface {
    // The constructor looks like the signature described in Factory
    constructor(num: number, s: string) { } // obviously returns an instance of ClassicInterface
    method1() {}
    ...
    methodN() {}
}

class MyOtherImplementation implements ClassicInterface {
    // The constructor looks like the signature described in Factory
    constructor(n: number, s: string) { } // obviously returns an instance of ClassicInterface
    method1() {}
    ...
    methodN() {}
}

// And here is the polymorphism of construction
function instantiateClassicInterface(ctor: Factory, myNumberParam: number, myStringParam: string): ClassicInterface {
    return new ctor(myNumberParam, myStringParam);
}

// And this is how we do it
let iWantTheFirstImpl = instantiateClassicInterface(MyImplementation, 3.14, "smile");
let iWantTheSecondImpl = instantiateClassicInterface(MyOtherImplementation, 42, "vafli");

Solution 4 - Typescript

From the official documentation

> This is because when a class implements an interface, only the instance side of the class is checked. Since the constructor sits in the static side, it is not included in this check. > > Instead, you would need to work with the static side of the class directly. In this example, we define two interfaces, ClockConstructor for the constructor and ClockInterface for the instance methods. Then, for convenience, we define a constructor function createClock that creates instances of the type that is passed to it:

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

interface ClockInterface {
  tick(): void;
}

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);

Solution 5 - Typescript

From a design perspective, it isn't usual to specify the constructor requirements in an interface. The interface should describe the operations you can perform on an object. Different classes that implement the interface should be allowed to require different constructor parameters if they need to.

For example, if I had an interface:

interface ISimplePersistence {
    load(id: number) : string;
    save(id: number, data: string): void;
}

I might have implementations for storing the data as a cookie, which needs no constructor parameters, and a version that stores the data in a database, which needs a connection string as a constructor parameter.

If you are still want to define constructors in an interface, there is a dirty way to do this, which I used to answer this question:

https://stackoverflow.com/questions/12952248/interfaces-with-construct-signatures-not-type-checking

Solution 6 - Typescript

To achieve the intended behaviour you could use Decorators, even though that is probably not what they are supposed to be used for.

This

interface MyInterface {
    new ();
}

function MyInterfaceDecorator(constructor: MyInterface) {
}


@MyInterfaceDecorator
class TestClass {
    constructor () { }
}

compiles without a problem. In contrast, the following definition for TestClass

// error TS2345: Argument of type 'typeof TestClass' is not assignable to parameter of type 'MyInterface'.
@MyInterfaceDecorator
class TestClass {
    constructor (arg: string) { }
}

will not compile.

Solution 7 - Typescript

To expand on Nils' answer, you can also make a generic new-able function with the same technique:

interface MyArrayConstructor {
    <T>(...elements: Array<T>): MyArrayInstance<T>
    new <T> (...elements: Array<T>): MyArrayInstance<T>
}

// “Typecast” not the function itself, but another symbol,
// so that the body of myArray will also benefit from
// type-checking:
export const MyArray = myArray as MyArrayConstructor

interface MyArrayInstance<T> {
    push(...args: Array<T>): number
    slice(from?: number, to?:number): Array<T>
}

function myArray(...elements: Array<T>): MyArrayInstance<T> {
  return {
    push(...args) { ... },
    slice(from?: number, to?: number) { ... }
  }
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNypanView Question on Stackoverflow
Solution 1 - TypescriptRyan CavanaughView Answer on Stackoverflow
Solution 2 - TypescriptNilsView Answer on Stackoverflow
Solution 3 - TypescriptegelevView Answer on Stackoverflow
Solution 4 - TypescriptAzatView Answer on Stackoverflow
Solution 5 - TypescriptFentonView Answer on Stackoverflow
Solution 6 - TypescriptMarvinDVView Answer on Stackoverflow
Solution 7 - TypescriptDomQView Answer on Stackoverflow