如何使用 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 }, }