如何在TypeScript中让HEADING、TEXT类型继承COMPONENT类型？

要让HEADING、TEXT成为COMPONENT的子类型，同时让TypeScript自动检测type值是否合法，你可以通过接口继承或交叉类型实现，以下是具体方案：

核心思路 #

COMPONENT作为基类型，定义了所有子类型必须遵循的结构规范，子类型必须严格符合这个规范——尤其是type字段必须属于ELEMENT_TYPE的取值范围，否则TypeScript会直接报错，这正是你需要的检测效果。

方案一：接口继承（推荐） #

把COMPONENT定义为接口，子类型通过extends继承，天然实现结构约束：

declare type ELEMENT_TYPE = "div" | "p" | "h1" | "button";

// 定义基接口
declare interface COMPONENT {
  type: ELEMENT_TYPE;
  children: string | (string | COMPONENT)[]; // 放宽children类型，支持嵌套组件
  styles: React.CSSProperties; // 替换any为具体的CSSProperties类型
}

// 合法子类型：type属于ELEMENT_TYPE
declare interface HEADING extends COMPONENT {
  type: "h1"; // 符合约束，无报错
}

declare interface TEXT extends COMPONENT {
  type: "p"; // 符合约束，无报错
}

// 非法子类型：type不属于ELEMENT_TYPE，TypeScript会直接报错
declare interface INVALID_HEADING extends COMPONENT {
  type: "hero"; // 报错：Type '"hero"' is not assignable to type 'ELEMENT_TYPE'.
}

方案二：交叉类型 #

如果更倾向于使用类型别名而非接口，可以用交叉类型实现约束：

declare type ELEMENT_TYPE = "div" | "p" | "h1" | "button";

declare type COMPONENT = {
  type: ELEMENT_TYPE;
  children: string | (string | COMPONENT)[];
  styles: React.CSSProperties;
};

// 合法子类型
declare type HEADING = COMPONENT & {
  type: "h1"; // 与COMPONENT的type兼容，无冲突
};

declare type TEXT = COMPONENT & {
  type: "p";
};

// 非法子类型：交叉后type为never，TypeScript报错
declare type INVALID_HEADING = COMPONENT & {
  type: "hero"; // 报错：Type '"hero"' is not assignable to type 'ELEMENT_TYPE'.
};

关于你期望的写法说明 #

你想写的declare type HERO: COMPONENT = {...}不符合TypeScript语法，类型别名没有这种继承写法。上述两种方案可以实现你想要的“子类型遵循基类型规范”的效果，同时支持扩展子类型的属性（比如调整children为数组、指定styles为具体类型）。

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