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

Question

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

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

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

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

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

然后我可以定义一个 EmailTemplate 接口：

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 而不是必须将它作为泛型类型参数传入，但我不确定如何。

Answer 2

type TemplateType = 'welcomeEmail' | 'referralEmail' | 'loginEmail' interface WelcomeEmail { firstName: string; lastName: string; // ... } interface WelcomeEmailTemplate { template: 'welcomeEmail'; params: WelcomeEmail; } interface ReferralEmailTemplate { // ... } interface LoginEmailTemplate { // ... } type EmailTemplate = WelcomeEmailTemplate | ReferralEmailTemplate | LoginEmailTemplate const myEmail: EmailTemplate = { template: 'welcomeEmail', params: { // then type checking and hinting is here for WelcomeEmailTemplate }, }