javascript - 如何使用Typescript定义强类型电子邮件模板参数？

Question

我有许多不同的电子邮件模板，每个模板都有不同的参数。

我可以为每个模板定义一个类型:

type TemplateType = 'welcomeEmail' | 'referralEmail' | 'loginEmail'

对于每个模板，我可以定义参数:

interface WelcomeEmail {
  firstName: string;
  lastName: string;
  ...
}

然后我可以定义一个 EmailTemplate 接口(interface):

interface EmailTemplate {
  template: TemplateType;
  params: WelcomeEmail | ReferralEmail | LoginEmail;
}

有没有办法输入此内容，以便当模板为“welcomeEmail”时，params 类型为 WelcomeEmail？

Answer 1

如果您稍微更改一下类型，就可以在最新版本的 Typescript 中完成此操作。这是通过从相同的 EmailTemplates 类型获取 TemplateType 和 EmailTemplate 来实现的。 Typescript 知道 TemplateType 的成员对应于 EmailTemplates 的键，并且它可以使用该关系来查找与给定 TemplateType 关联的值类型>.

type EmailTemplates = {
  welcomeEmail: {
    firstName: string;
    lastName: string;
  };
  referralEmail: {
    referrer: string;
  };
}

type TemplateType = keyof EmailTemplates;

type EmailTemplate<T extends TemplateType> = {
  template: T;
  params: EmailTemplates[T]
}

const myEmail: EmailTemplate<'referralEmail'> = {
  template: 'referralEmail',
  params: { referrer: 'test' },
}

可能有某种方法可以推断 TemplateType，而不必将其作为泛型类型参数传递，但我不确定如何实现。