Typescript中如何实现interface的key与其关联值的类型匹配

解决方案 #

你可以通过以下三种常用方式实现类型收窄，满足你的需求：

1. 函数重载（最推荐，兼容性最好）

通过定义明确的重载签名，TypeScript会自动在分支中匹配对应类型：

enum Enum1 {
  ENUM_1_KEY_1 = 'ENUM_1_KEY_1',
  ENUM_1_KEY_2 = 'ENUM_1_KEY_2',
}

enum Enum2 {
  ENUM_2_KEY_1 = 'ENUM_2_KEY_1',
  ENUM_2_KEY_2 = 'ENUM_2_KEY_2',
}

interface EnumNamespace {
  enum1: Enum1[]
  enum2: Enum2[]
}

// 定义重载签名
function func(key: 'enum1', type: Enum1[]): void
function func(key: 'enum2', type: Enum2[]): void
// 实现签名
function func(key: keyof EnumNamespace, type: Enum1[] | Enum2[]) {
  if (key === 'enum1') {
    // 此处type自动被推断为Enum1[]
    console.log(type)
  } else {
    // 此处type自动被推断为Enum2[]
    console.log(type)
  }
}

2. 元组联合参数（适合TS 4.6+版本）

将函数入参定义为联合元组，分支判断后自动收窄类型：

type FuncParams = 
  | [key: 'enum1', type: Enum1[]]
  | [key: 'enum2', type: Enum2[]]

function func(...args: FuncParams) {
  if (args[0] === 'enum1') {
    const [, type] = args
    // type 类型为 Enum1[]
  } else {
    const [, type] = args
    // type 类型为 Enum2[]
  }
}

3. 分支内直接类型断言（临时使用最简方案）

如果只需要在个别分支使用对应类型，可以直接手动断言：

function func<K extends keyof EnumNamespace>(key: K, type: EnumNamespace[K]) {
  if (key === 'enum1') {
    const enum1Type = type as Enum1[]
    // 直接使用enum1Type即可
  } else {
    const enum2Type = type as Enum2[]
    // 直接使用enum2Type即可
  }
}

内容的提问来源于stack exchange，提问作者André Krosby