TypeScript相似上下文场景下Union与Extend的最佳实践问询

问题1：简化类型声明的方式 #

你当前的类型声明是正确的，但确实有更简便的方式减少重复代码：

1. 定义联合类型别名 #

把重复的联合类型抽成别名，后续直接复用：

// 定义联合类型别名
type DataUnion = AllTheDatas | GenericAllTheDatas;

// 提交处理函数复用别名
function submitHandler(canBeGenericOrDefaultData: DataUnion) {
  buildPointData(canBeGenericOrDefaultData.pointData);
  // 其他操作
}

// buildPointData 直接复用联合类型的 pointData 类型
function buildPointData(pointData: DataUnion["pointData"]) {}

2. 抽离公共接口（更优） #

既然两个数据接口核心结构一致，先抽离公共部分避免重复定义：

// 抽离公共的 pointData 结构
interface BasePointData {
  square: string;
  triangle: string;
}

// 复用公共结构定义数据接口
interface AllTheDatas {
  id: string;
  pointData: BasePointData;
}

interface GenericAllTheDatas {
  id: string;
  pointData: BasePointData;
}

这种方式后续修改公共字段时，只需改动BasePointData，所有依赖的接口都会同步更新，维护成本更低。

问题2：接口继承的可行性与最佳实践 #

完全可以创建新接口继承GenericAllTheDatas，这是符合最佳实践的做法，尤其适合这种「通用结构+扩展字段」的场景。

实现方式1：直接继承并扩展 pointData #

interface GenericAllTheDatas {
  id: string;
  pointData: {
    square: string;
    triangle: string;
  };
}

// 继承通用接口，同时扩展 pointData 的字段
interface AllTheDatas extends GenericAllTheDatas {
  pointData: GenericAllTheDatas["pointData"] & {
    newForm: string;
  };
}

实现方式2：先抽离 pointData 接口（更易维护） #

如果后续pointData字段还有变动，建议先抽离层级接口：

// 通用的 pointData 结构
interface GenericPointData {
  square: string;
  triangle: string;
}

// 默认页面的 pointData 扩展通用结构
interface DefaultPointData extends GenericPointData {
  newForm: string;
}

// 通用数据接口
interface GenericAllTheDatas {
  id: string;
  pointData: GenericPointData;
}

// 默认数据接口继承通用接口，并替换为扩展后的 pointData
interface AllTheDatas extends GenericAllTheDatas {
  pointData: DefaultPointData;
}

这种继承方式既复用了通用接口的字段（比如id），又能灵活扩展特有字段，符合DRY（Don't Repeat Yourself）原则，后续维护时只需修改对应层级的接口即可，代码结构更清晰。

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