TypeScript中如何从基类返回子类？（HTML元素创建类场景）

Great question! The core issue here is preserving subclass type information when calling base class methods—right now your className method returns any, which loses type safety and breaks chained calls to subclass-specific methods. Let's fix this with TypeScript's built-in features.

Solution 1: Use Polymorphic this Type (Simplest & Recommended) #

TypeScript supports polymorphic this types, which let methods return the type of the current instance (whether it's the base class or a subclass) instead of a fixed type. Here's how to update your base class:

class $NewElement<E extends HTMLElement> {
    public element: E; // Remove the `= null` assignment—we'll initialize it in the constructor
    constructor(name: string) {
        this.element = document.createElement(name) as E;
    }
    // Return `this` instead of `any`
    public className(className: string): this {
        this.element.className = className;
        return this;
    }
}

Now when you create a subclass, calling base class methods will automatically return the subclass type, enabling safe chained calls:

// Example subclass for <div> elements
class $DivElement extends $NewElement<HTMLDivElement> {
    constructor() {
        super('div');
    }
    // Subclass-specific method
    public text(content: string): this {
        this.element.textContent = content;
        return this;
    }
}

// Usage: Chained calls work with full type safety
const myDiv = new $DivElement();
myDiv.className('container').text('Hello, TypeScript!'); // No type errors

The polymorphic this type tells TypeScript: "Whatever type the current instance is, return that type". This is the cleanest approach because it requires no extra generics and leverages TypeScript's automatic type inference.

Solution 2: Explicit Generic Subclass Parameter (For Advanced Scenarios) #

If you need more explicit control over the return type (e.g., for complex inheritance hierarchies), you can add a second generic parameter to the base class that represents the subclass itself:

// Add a second generic `T` representing the subclass
class $NewElement<E extends HTMLElement, T extends $NewElement<E, T>> {
    public element: E;
    constructor(name: string) {
        this.element = document.createElement(name) as E;
    }
    // Return the subclass type `T`
    public className(className: string): T {
        this.element.className = className;
        return this as unknown as T;
    }
}

// When extending, pass the subclass itself as the second generic argument
class $DivElement extends $NewElement<HTMLDivElement, $DivElement> {
    constructor() {
        super('div');
    }
    public text(content: string): this {
        this.element.textContent = content;
        return this;
    }
}

This achieves the same result as the polymorphic this approach but is more verbose. It's useful if you need to reference the subclass type within the base class itself (e.g., for factory methods).

Key Notes #

• Avoid any: Returning any discards all type information, which defeats the purpose of using TypeScript. Polymorphic this or explicit generics keep your code type-safe.
• Type Assertions: The as E assertion in the constructor is safe because you're creating an element of the type specified by E (e.g., div for HTMLDivElement).
• Chaining: Both solutions let you chain methods seamlessly, since each method returns the subclass instance.

内容的提问来源于stack exchange，提问作者Nicholas Hill