TypeScript定义空格分隔递归接受类型报ts2456循环引用错误如何解决

报错原因 #

你写的递归类型触发ts(2456)错误的核心原因有两点：

• 没有定义递归终止条件：原定义type ClassName = ${AcceptedClass} ${ClassName}``要求值必须是「合法类名+空格+ClassName」，展开后是无限长度的字符串，不存在任何可匹配的有限长度值，TypeScript会直接拦截这类无出口的递归类型。
• 未覆盖单值场景：需求中单个合法类名（比如"three"）属于合法值，原定义完全没有覆盖这个分支。

正确实现 #

TypeScript 4.1+ 原生支持模板字面量类型的递归定义，补充终止分支即可直接实现需求：

type AcceptedClass = "one" | "two" | "three";
// 终止分支：单个合法类名直接合法；递归分支：合法类名+空格+合法ClassName
type ClassName = AcceptedClass | `${AcceptedClass} ${ClassName}`;

// 所有预期内的赋值均能通过类型校验
const className: ClassName = "one two three";
const className2: ClassName = "two one three one three";
const className3: ClassName = "three";
const className4: ClassName = "three one two three one two";

// 非法值会被正确拦截
const invalid1: ClassName = "one four"; // 报错："four"不在合法类名范围内
const invalid2: ClassName = "one  two"; // 报错：存在连续多余空格
const invalid3: ClassName = " one"; // 报错：开头存在多余空格
const invalid4: ClassName = "two "; // 报错：结尾存在多余空格

兼容旧版本写法 #

如果使用4.5以下的TypeScript版本，直接写上述定义可能仍会触发循环引用检测，可以通过泛型包裹强制延迟类型计算来适配：

type AcceptedClass = "one" | "two" | "three";
type ClassName<T extends string = AcceptedClass> = T | `${T} ${ClassName<T>}`;

使用限制 #

这类递归类型受TypeScript的默认递归深度限制（约50层嵌套），如果拼接的类名数量超过50个会触发「类型实例化过深」的错误，绝大多数业务场景下类名拼接不会达到这个长度，完全可以满足使用需求。

内容的提问来源于stack exchange，提问作者June Lee