TypeScript中如何让参数类型依赖首个参数？（非重载方案）

需求是实现一个getEmailTemplate函数，根据传入的templateName自动推导第二个data参数的类型，确保类型安全，但当前代码出现编译错误。

原代码：

const TEMPLATES = {
  emailVerification: getEmailVerificationTemplate,
  welcome: getWelcomeTemplate
}

type TemplateName = "emailVerification" | "welcome"

function getEmailTemplate<T extends TemplateName>(
  templateName: T,
  data?: Parameters<typeof TEMPLATES[T]>
): EmailContent {
  return TEMPLATES[templateName](data)
}

function getEmailVerificationTemplate(
  data: { name: string; tokenLink: string }
): EmailContent {
  //return template
}

function getWelcomeTemplate(): EmailContent {
  //return template
}

编译错误：

Argument of type '[data: { name: string; tokenLink: string; }] | [] | undefined' is not assignable to parameter of type '{ name: string; tokenLink: string; }'.
  Type 'undefined' is not assignable to type '{ name: string; tokenLink: string; }'.ts(2345)

非重载的惯用实现方式 #

核心问题是Parameters<typeof TEMPLATES[T]>返回的是元组类型，而模板函数接收的是单个参数（或无参数），直接传递data会导致类型不匹配。我们可以通过条件类型和元组展开来处理参数的传递逻辑，同时确保data的可选性与对应模板函数的参数要求一致。

修改后的代码：

const TEMPLATES = {
  emailVerification: getEmailVerificationTemplate,
  welcome: getWelcomeTemplate
}

type TemplateName = keyof typeof TEMPLATES;
// 定义模板函数的参数类型映射
type TemplateParams<T extends TemplateName> = Parameters<typeof TEMPLATES[T]>;

function getEmailTemplate<T extends TemplateName>(
  templateName: T,
  ...data: TemplateParams<T> extends [] ? [] : TemplateParams<T>
): EmailContent {
  return TEMPLATES[templateName](...data);
}

function getEmailVerificationTemplate(
  data: { name: string; tokenLink: string }
): EmailContent {
  return { /* 模板内容 */ };
}

function getWelcomeTemplate(): EmailContent {
  return { /* 模板内容 */ };
}

// 测试类型推断
// 必须传入符合要求的data参数
getEmailTemplate("emailVerification", { name: "Alice", tokenLink: "https://example.com/verify" });
// 不能传入多余参数，也不能少传
// getEmailTemplate("emailVerification"); // 编译错误，缺少data
// getEmailTemplate("emailVerification", { name: "Alice" }); // 编译错误，缺少tokenLink

// welcome模板不需要参数
getEmailTemplate("welcome");
// getEmailTemplate("welcome", {}); // 编译错误，welcome不接受参数

关键改动说明： #

• 使用...data剩余参数语法，直接匹配模板函数的参数元组，避免单个参数的类型不匹配问题。
• 通过条件类型TemplateParams<T> extends [] ? [] : TemplateParams<T>，实现：
  • 如果模板函数无参数（元组为空），则data参数不可传；
  • 如果模板函数需要参数，则data参数必须传入对应类型的值。
• 调用模板函数时使用...data展开参数，确保参数传递完全匹配。

这样既实现了类型安全的自动推断，又不需要依赖方法重载，是TypeScript中处理这类动态参数匹配的惯用方式。

内容的提问来源于stack exchange，提问作者paul.kim1901