TypeScript中给函数传泛型避免硬编码联合类型访问公共属性的方法

给泛型添加结构约束即可解决该问题，无需硬编码联合类型。

完整可运行代码 #

// 定义通用结构约束：所有包含string类型foo属性的类型都符合该约束
interface HasFoo {
  foo: string;
}

interface A {
  foo: string;
}

interface B {
  foo: string;
}

// 给泛型T添加extends约束，要求传入的T必须符合HasFoo的结构
function a<T extends HasFoo>() {
  function b(arg: T) {
    return arg.foo; // TypeScript可确认T一定存在foo属性，不会报错
  }

  return b;
}

a<A>();
a<B>();

// 后续新增符合结构的类型时，无需修改原有函数逻辑，直接传入即可
interface C {
  foo: string;
  otherProperty: number;
}
a<C>();

原理说明 #

• T extends HasFoo是TypeScript的泛型约束语法，作用是限制传入的泛型类型必须满足HasFoo的结构要求，即必须包含类型为string的foo属性。
• 如果约束逻辑简单不需要复用，也可以直接使用内联结构约束，写法如下：

function a<T extends { foo: string }>() {
  function b(arg: T) {
    return arg.foo;
  }
  return b;
}

• 该方案扩展性极强，后续新增任意符合结构的类型都可以直接使用，不需要修改原有函数的类型定义，可维护性远高于硬编码联合类型的方案。

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