TypeScript中如何实现函数模板参数与对应参数的关联？

我有一个用于通过模板（tpl）和模板参数（params）生成内容的create函数：

create(tpl, params) {
  // create something
}

定义了枚举TEMPLATE来表示两个模板：

enum TEMPLATE {
  TPL1 = "TPL1",
  TPL2 = "TPL2",
}

每个模板对应一套参数，包含公共参数和特定参数：

interface BaseParamsTPL {
  name: string;
  topic: string;
}

interface ParamsTPL1 extends BaseParamsTPL {
  URL: string;
}

interface ParamsTPL2 extends BaseParamsTPL {
  productId: number;
  price: number;
}

我需要让create函数的两个参数类型关联：传入TEMPLATE.TPL1时，params必须符合ParamsTPL1类型；传入TEMPLATE.TPL2时，params必须符合ParamsTPL2类型。比如下面的调用应该触发类型错误：

const myCreation = create(TEMPLATE.TPL2, {
  name: "something",
  topic: "random",
  URL: "http://loin.labas.com"
}) // 应报错，因为模板与参数不匹配

我尝试了以下写法，但无法实现预期效果：

create<T extends keyof typeof TEMPLATE>(tpl: T, params: `Params${T}`) {
  // create something
}

请问该如何实现这一需求？

解决方案 #

要实现模板与参数的类型关联，核心是建立枚举值到对应参数类型的绑定，以下是两种可行的实现方式：

方法一：映射类型 + 泛型约束 #

首先定义一个映射类型，明确每个枚举值对应的参数类型：

type TemplateParamsMap = {
  [TEMPLATE.TPL1]: ParamsTPL1;
  [TEMPLATE.TPL2]: ParamsTPL2;
};

然后修改create函数的泛型定义，让泛型T约束为TEMPLATE的成员，同时将params的类型指定为映射类型中对应的项：

function create<T extends TEMPLATE>(tpl: T, params: TemplateParamsMap[T]) {
  // 函数逻辑
}

这种方式能让TypeScript根据传入的tpl自动推断params的预期类型，不匹配时直接抛出类型错误。

方法二：函数重载 #

如果需要更直观的类型提示，可以用函数重载逐个定义模板与参数的对应关系：

// 重载签名：定义每个模板对应的参数类型
function create(tpl: TEMPLATE.TPL1, params: ParamsTPL1): void;
function create(tpl: TEMPLATE.TPL2, params: ParamsTPL2): void;
// 实现签名：处理通用逻辑
function create(tpl: TEMPLATE, params: BaseParamsTPL) {
  // 函数逻辑
}

调用函数时，TypeScript会根据传入的tpl匹配对应的重载签名，强制params符合对应类型。

验证效果 #

用你提供的错误调用示例测试：

const myCreation = create(TEMPLATE.TPL2, {
  name: "something",
  topic: "random",
  URL: "http://loin.labas.com"
})

此时TypeScript会抛出明确的类型错误：类型"{ name: string; topic: string; URL: string; }"的参数不能赋给类型"ParamsTPL2"的参数。对象文字可以只指定已知属性，并且"URL"不在类型"ParamsTPL2"中。，完全符合预期。

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