Using mixins throws TS4093, TS4020 and TS4060 when exporting the class that extends the result of a mixin

[rolandjitsu]

TypeScript Version: 2.2.1

Code

I'm having some problems with using the new syntax for mixins. Consider the following example:

export abstract class Item {
    foo(): void {}
}

export class FooItem extends Item {
	name?: string;

	toString(): string {
		if (this.name) {
			return this.name;
		}
		return `${this.id}`;
	}
}


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

// Throws an error when compiled
// "Error TS4060: Return type of exported function has or is using private name '(Anonymous class)'.
export function WithTags<T extends Constructor<FooItem>>(Base: T) {
	return class extends Base {
		static getTags(): Promise<any> { ... }
		tags(): Promise<any> { ... }
	}
}

// Throws two errors:
// At `Test`: "Error TS4093: 'extends' clause of exported class 'Test' refers to a type whose name cannot be referenced."
// At `WithTags`: "Error TS4020: 'extends' clause of exported class 'Test' has or is using private name '(Anonymous class)'."
export class Test extends WithTags(FooItem) {}

const test = new Test();

Test.getTags()
test.tags();

Expected behavior:
It should not throw any errors.

Actual behavior:
It throws those three errors that are described in the code comments.

[DanielRosenwasser]

This is still a bit painful. I was talking to @alexeagle and others about this today.

You can get around this by creating an explicit interface for your inner WithTags type. Then writing out the explicit return type for WithTags. For example:

export class FooItem {
    name?: string;

    toString(): string {
        return ""
    }
}

// Instance side:
export interface WithTagsInstance {
    tags(): Promise<any>
}

// Constructor static side:
export interface WithTagsStatic {
    getTags(): Promise<any>;
    new (...args: any[]): WithTagsInstance;
}

export function WithTags<T extends Constructor<FooItem>>(Base: T): WithTagsStatic & T {
	return class extends Base {
		static getTags(): Promise<any> { throw 1;  }
		tags(): Promise<any> { throw 1; }
	}
}

Then later on, you unfortunately cannot immediately extend WithTags(Foo). You have to use

export const FooItemWithTags = WithTags(FooItem)
export class Test extends FooItemWithTags {}

So that there's a direct name that TypeScript can reference.

[rolandjitsu]

I see. Though, if my Test is located in another file I get:

Error TS4023: Exported variable 'Test' has or is using name 'WithTagsStatic' from external module "... path to where WithTagsStatic is" but cannot be named.

Furthermore, It also complains about the .toString() method if Test overrides it:

export class Test extends WithTags(FooItem) {
    // Error TS2425: Class 'WithTagsInstance & FooItem' defines instance member property 'toString', but extended class 'Test' defines it as instance member function.
    toString(): string {
        return '';
    }
}

I'm also curious how would I implement the mixin if FooItem would also be an abstract class:

export abstract class Item {
    foo(): void {}
}

export abstract class FooItem extends Item {
	name?: string;

	toString(): string {
		if (this.name) {
			return this.name;
		}
		return `${this.id}`;
	}
}

...

// This definitely doesn't work ...
export const FooItemWithTags = WithTags(FooItem)
export class Test extends FooItemWithTags {}

[HerringtonDarkholme]

It seems TS either need to natively support mixin or support function call signature, #6606.

Otherwise it is quite hard to generate optimal declaration file.

[mhegazy]

This should be covered by #14075, but leaving it open to ensure we capture all the scenarios.