如何创建包含联合类型参数索引访问的TypeScript模板字面量类型？

问题场景 #

当尝试将模板字面量类型作为泛型函数的返回类型，且通过索引访问泛型对象的属性时，会出现类型不匹配错误：

type IPhone = {
  version: 1 | 2 | 3 | 4;
}

function getIPhoneName<T extends IPhone>(iPhone: T): `iPhone ${T['version']}` {
  return `iPhone ${iPhone.version}`; // 错误：类型“"iPhone 1"”无法赋值给类型“`iPhone ${T["version"]}`”
}

// 对比：直接用版本作为泛型参数时正常工作
function getIPhoneName2<T extends IPhone['version']>(iPhoneVersion: T): `iPhone ${T}` {
  return `iPhone ${iPhoneVersion}`;
}

问题原因 #

当泛型参数T是IPhone的子类型时，T['version']会被TypeScript视为联合类型的整体，而非自动分发到联合类型的每个成员。与条件类型不同，模板字面量类型不会对通过对象索引访问得到的联合类型进行自动分发，导致返回值的具体字面量类型无法匹配泛型推断出的\iPhone ${T['version']}``类型。

而getIPhoneName2能正常工作，是因为泛型参数T直接绑定到IPhone['version']的单个成员，模板字面量会为每个T的成员生成对应的字符串类型，自然完成了类型分发。

解决方案 #

方案1：将泛型参数绑定到版本类型，约束对象的version属性 #

直接让泛型参数对应版本的字面量类型，同时约束入参对象的version属性为该类型，这样模板字面量就能正确关联到具体版本：

type IPhone = {
  version: 1 | 2 | 3 | 4;
}

function getIPhoneName<T extends IPhone['version']>(iPhone: { version: T }): `iPhone ${T}` {
  return `iPhone ${iPhone.version}`; // 无类型错误
}

// 使用示例
const phone1 = getIPhoneName({ version: 1 }); // 类型："iPhone 1"
const phone2 = getIPhoneName({ version: 2 }); // 类型："iPhone 2"

方案2：通过条件类型强制分发（需类型断言） #

如果必须保留泛型参数为IPhone的子类型，可以通过条件类型的分发特性提取版本类型，但需要手动断言返回值类型：

type IPhone = {
  version: 1 | 2 | 3 | 4;
}

function getIPhoneName<T extends IPhone>(iPhone: T): T extends { version: infer V } ? `iPhone ${V}` : never {
  return `iPhone ${iPhone.version}` as ReturnType<typeof getIPhoneName<T>>;
}

这种方式虽然可行，但不如方案1简洁，且需要额外的类型断言。

关于as const的局限性 #

使用as const虽然能让TypeScript推断出具体的字面量类型：

function getIPhoneName3<T extends IPhone>(iPhone: T) {
  return `iPhone ${iPhone.version}` as const;
}

但在泛型类中，这种方式无法让返回类型与类的泛型参数建立关联，返回类型会被固定为联合类型"iPhone 1" | "iPhone 2" | "iPhone 3" | "iPhone 4"，而非与实例的泛型参数对应的具体类型，因此体验不佳。

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