如何用TypeScript类型系统实现抽象类二选一方法约束？

现有如下TypeScript抽象类定义：

export abstract class AbstractButton {
    // 必须实现此方法
    abstract someRequiredMethod(): void;

    // 需要实现其中一个（或两个都实现）
    abstract setInnerText?(): void;
    abstract setInnerHTML?(): void;
}

要求子类必须实现someRequiredMethod，且至少实现setInnerText或setInnerHTML中的一个（或两者都实现），如何通过TypeScript的类型系统实现该约束？

方法一：拆分接口+联合类型约束 #

通过拆分出两个分别对应可选方法的接口，结合基础抽象类的必填方法，用联合类型强制子类至少满足其中一个接口的要求：

// 基础抽象类：仅保留必填方法
abstract class BaseButton {
    abstract someRequiredMethod(): void;
}

// 定义两个扩展接口，分别对应两种可选实现
interface WithInnerText extends BaseButton {
    setInnerText(): void;
}

interface WithInnerHTML extends BaseButton {
    setInnerHTML(): void;
}

// 用联合类型统一约束所有合法的按钮子类
type ValidButton = WithInnerText | WithInnerHTML;

// 合法子类：实现setInnerText
class TextButton implements ValidButton {
    someRequiredMethod(): void {
        // 业务逻辑
    }

    setInnerText(): void {
        // 业务逻辑
    }
}

// 合法子类：实现setInnerHTML
class HTMLButton implements ValidButton {
    someRequiredMethod(): void {
        // 业务逻辑
    }

    setInnerHTML(): void {
        // 业务逻辑
    }
}

// 合法子类：同时实现两个方法
class HybridButton implements ValidButton {
    someRequiredMethod(): void {
        // 业务逻辑
    }

    setInnerText(): void {
        // 业务逻辑
    }

    setInnerHTML(): void {
        // 业务逻辑
    }
}

// 错误示例：既没有实现setInnerText也没有setInnerHTML，会触发类型报错
class InvalidButton implements BaseButton {
    someRequiredMethod(): void {}
}

// 尝试将无效子类赋值给ValidButton类型时，TypeScript会报错
const invalidBtn: ValidButton = new InvalidButton();
// 类型错误：Type 'InvalidButton' is not assignable to type 'ValidButton'.

方法二：条件类型约束原抽象类 #

如果希望保留原AbstractButton的结构，可以通过条件类型创建一个约束，强制子类至少实现其中一个可选方法：

export abstract class AbstractButton {
    abstract someRequiredMethod(): void;
    abstract setInnerText?(): void;
    abstract setInnerHTML?(): void;
}

// 定义条件类型：仅允许实现了至少一个可选方法的类型通过
type RequiresAtLeastOneMethod<T> = 
    T extends { setInnerText(): void } ? T :
    T extends { setInnerHTML(): void } ? T :
    never;

// 合法子类：实现setInnerText
class ValidTextButton extends AbstractButton implements RequiresAtLeastOneMethod<AbstractButton> {
    someRequiredMethod(): void {}
    setInnerText(): void {}
}

// 合法子类：实现setInnerHTML
class ValidHTMLButton extends AbstractButton implements RequiresAtLeastOneMethod<AbstractButton> {
    someRequiredMethod(): void {}
    setInnerHTML(): void {}
}

// 错误示例：未实现任何可选方法，触发类型报错
class InvalidButton extends AbstractButton implements RequiresAtLeastOneMethod<AbstractButton> {
    someRequiredMethod(): void {}
}
// 类型错误：Type 'InvalidButton' is not assignable to type 'RequiresAtLeastOneMethod<AbstractButton>'.

方法说明 #

两种方法都利用TypeScript的结构类型系统实现约束：

• 方法一更直观，通过拆分接口明确不同的实现分支，适合需要区分不同按钮类型的场景；
• 方法二更贴近原抽象类的结构，适合需要保留原有类层级的场景。

内容的提问来源于stack exchange，提问作者Kenya-West