TypeScript模板字面量泛型类型定义报错是什么原因

TypeScript 模板字面量类型对插入的占位符类型有明确限制，仅支持可自动序列化为字符串的原始类型：string | number | bigint | boolean | null | undefined。
你定义的泛型参数T没有添加任何类型约束，TypeScript 无法预判传入的T一定符合上述合法范围——如果传入对象、函数等无法序列化为字面量字符串的类型，拼接逻辑完全无法成立，因此直接抛出类型不匹配的错误。

给泛型参数T添加对应类型约束，限定其取值范围为模板字面量支持的合法类型即可：

type WithAlpha<T extends string | number | bigint | boolean | null | undefined> = `${T}A10`

如果你确定后续传入的联合类型成员全是字符串，还可以把约束收窄为T extends string，写法更精简，也能在误传非字符串类型时提前触发报错：

type WithAlpha<T extends string> = `${T}A10`

加完约束后，泛型会对联合类型自动做分发处理，给每个成员末尾拼接A10后缀，完全符合预期：

// 测试示例
type BaseColor = "red" | "green" | "blue"
type ColorWithAlpha = WithAlpha<BaseColor>
// 推导结果："redA10" | "greenA10" | "blueA10"

内容的提问来源于stack exchange，提问作者Justin Wallace