How to implement a Typescript interface to an es5-style "class"?

Question

The way we can implement an Interface to an es6 class is pretty straightforward:

interface IDog {
    bark(): void
}

class Dog implements IDog {
    bark(): void {

    }
}

The question is: how to implement the same interface to this "class":

const Dog = function() {

}

Dog.prototype.bark = function() {

}

I tried defining the type of Dog as IDog: const Dog: IDog. Didn't work.

So, I need it to implement Dependency Inversion and I can't figure out how to do this with es5 classes. I saw that Classical Inheritance style is an "antipattern" in Javascript, so I decided to create classes the old way and need help implementing Typescript Interfaces to them.

Answer 1

I assume that you want es5-style class implementation, which is declared to conform to IDog interface, and type-checked by the compiler to ensure that it really conforms to that interface.

Bad news - TypeScript does not support that. You can make TypeScript to think that es5 Dog is a class that implements IDog, but you have to declare DogConstructor interface and use as any as DogConstructor type assertion for Dog. And you can't make TypeScript to typecheck prototype-based implemenation because Object.prototype (and subsequently Dog.prototype) is declared as any in the system library (see these issues for some discussion):

interface IDog {
    bark(): void
}

interface DogConstructor {
    new(): IDog;
}

const Dog = function (this: IDog) {
    // this.bark(); you can do this because of `this: IDog` annotation
} as any as DogConstructor;

Dog.prototype.bark = function() {

}

const p = new Dog();
p.bark();

I don't think that support for this will ever be improved. Es5-style classes are usually implemented in javascript code which is not meant to be typechecked, and TypeScript provides enough support for writing type declarations that allow to use javascript implementation in type-safe way. If you are implementing classes in TypeScript, you can simply use real classes.

Answer 2

There is no language support for this, the best we can do, if this is a common enough occurrence, is to roll out our own class creating function, that imposes restrictions on the members we add to the class.

Using the noImplicitThis compiler option and ThisType we can get pretty good type checking for class members too, we don't get any of the fancy stuff like definite field assignment, but it is good enough:

interface IDog {
    bark(): void
}

function createClass<TInterfaces, TFields = {}>() {
    return function<TMemebers extends TInterfaces>(members: TMemebers & ThisType<TMemebers & TFields>) {
        return function<TCtor extends (this: TMemebers & TFields, ...a: any[]) => any>(ctor: TCtor) : FunctionToConstructor<TCtor, TMemebers & TFields> {
            Object.assign(ctor.prototype, members);
            return ctor as any;
        }
    }
}

const Dog = createClass<IDog, { age: number }>()({
    eat() {
        // this is not any and has the fields defined in the TFields parameter
        // and the methods defined in the current object literal
        for(let i =0;i< this.age;i++) {
            this.bark();
            console.log("eat")
        }
    },
    bark() {
        console.log("BA" + "R".repeat(this.age) + "K");
    }
})(function(age: number) {
    this.age = age; // this has the fields and members previously defined 
    this.bark();
})
const p = new Dog(10);
p.bark();

// Helpers
type IsValidArg<T> = T extends object ? keyof T extends never ? false : true : true;

type FunctionToConstructor<T, TReturn> =
    T extends (a: infer A, b: infer B) => void ?
    IsValidArg<B> extends true ? new (p1: A, p2: B) => TReturn :
    IsValidArg<A> extends true ? new (p1: A) => TReturn :
    new () => TReturn :
    never;

Note The above implementation is similar to the answer here and you can read a more in depth explanation of it there.