如何为带标签模板函数实现指定字符串集合的类型安全限制？

嘿，这个问题我之前踩过坑！你想给标签模板函数的第一个模板字符串片段加上特定枚举类型的类型安全限制对吧？其实直接像你那样写行不通，因为TypeScript对标签模板的参数有特殊的类型推断逻辑——它会把模板字符串的数组统一推断成内置的TemplateStringsArray类型，而不是你期望的[Fruits, ...string[]]元组，所以才会报那个2345错误。

不过别担心，有两种靠谱的方式能实现你要的效果：

方法一：泛型 + 条件类型做编译时检查 #

这种方式会在编译期捕获不符合要求的字符串，通过条件类型让非法调用的参数类型变成never，触发TypeScript的错误提示：

type Fruits = 'apple' | 'orange' | 'banana';

const foo = <T extends string>(
  sections: T extends Fruits ? [T, ...TemplateStringsArray] : never,
  ...args: any[]
): string => {
  return sections.reduce((acc, cur, index) => {
    return acc + cur + (args[index] ?? '');
  }, '');
};

// 完全正常，编译通过
console.log(foo`apple`);
// 编译报错：类型 '["bar"]' 不能赋值给类型 'never'
console.log(foo`bar`);

原理很简单：我们用泛型T捕获第一个模板字符串的具体类型，然后通过条件类型判断T是否属于Fruits的成员。如果是，就允许参数类型是[T, ...TemplateStringsArray]；如果不是，就把参数类型设为never，TypeScript会直接拒绝这种非法调用。

方法二：函数重载实现直观约束 #

如果你觉得泛型+条件类型有点绕，用函数重载会更直观：

type Fruits = 'apple' | 'orange' | 'banana';

// 对外暴露的重载签名：只接受第一个片段是Fruits的情况
function foo<T extends Fruits>(sections: [T, ...TemplateStringsArray], ...args: any[]): string;
// 内部实现签名：用宽泛的类型接收参数，不对外暴露
function foo(sections: TemplateStringsArray, ...args: any[]): string {
  return sections.reduce((acc, cur, index) => {
    return acc + cur + (args[index] ?? '');
  }, '');
}

// 正常通过编译
console.log(foo`apple`);
// 编译报错：没有与此调用匹配的重载签名
console.log(foo`bar`);

这里我们对外只暴露符合要求的重载签名，当调用foo时，TypeScript会优先匹配这个签名，如果第一个模板字符串不是Fruits里的成员，就找不到匹配的重载，直接抛出错误。

两种方式都能完美实现你要的类型安全限制，选哪种全看你个人的代码风格偏好～

内容来源于stack exchange