如何在TypeScript中扩展两个接口并将指定属性设置为可空类型

你遇到的核心问题是TypeScript的接口继承类型兼容性限制：当尝试在子接口中重写父接口的属性时，新类型必须是原类型的子类型（更严格或等价），而string | null是string的超类型（更宽泛），所以直接在interface Gamma里重写amount会触发类型错误。

这里有一个无需修改原有Alpha和Beta接口的精准解决方案：

interface Alpha { name: string; login: string; amount: string; }
interface Beta { id: number; name: string; login: string; amount: string; }

// 使用Omit工具类型移除原有amount字段，再合并新的类型定义
type Gamma = Omit<Alpha & Beta, 'amount'> & {
  targetAmount: string | null;
  amount: string | null;
};

原理说明： #

1. Alpha & Beta：先通过交叉类型合并两个接口的所有属性，此时合并后的类型里amount保持为string（两个接口的该字段类型一致）。
2. Omit<..., 'amount'>：借助TypeScript内置的Omit工具类型，移除合并后类型中的amount字段，避免类型冲突。
3. 最后交叉上我们自定义的amount: string | null和新增的targetAmount: string | null，得到完全符合需求的Gamma类型。

验证示例： #

你可以像这样使用Gamma类型，完全满足你的预期：

const validGamma: Gamma = {
  id: 123,
  name: "Alice",
  login: "alice123",
  amount: null, // 允许为null
  targetAmount: "500"
};

const anotherGamma: Gamma = {
  id: 456,
  name: "Bob",
  login: "bob456",
  amount: "300", // 也允许为string
  targetAmount: null
};

如果坚持要用interface而非type，可以抽离不含amount的基础接口，但这需要修改原有Alpha和Beta：

// 抽离基础接口
interface Base { name: string; login: string; }
interface Alpha extends Base { amount: string; }
interface Beta extends Base { id: number; amount: string; }

// 直接扩展Base并定义新字段
interface Gamma extends Base {
  id: number; // 显式声明Beta中的id字段
  amount: string | null;
  targetAmount: string | null;
}

不过这个方案需要改动原有接口，因此更推荐第一种用Omit的方案，它对现有代码无侵入性。

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