TypeScript如何表示分隔符拼接的模板类型数组join结果类型

可以实现，TypeScript 4.1 版本新增的递归模板字面量类型完全可以满足需求，不需要依赖不存在的数组类型.join()方法。

具体实现代码 #

type Foo = `foo:${string}`;
type Bar = `bar:${string}`;

type Fragments = Foo | Bar;

// 通用递归拼接类型
type Join<T extends string, Delimiter extends string> =
  | '' // 匹配空串（对应空数组拼接结果）
  | T // 匹配单个片段无分隔符的场景
  | `${T}${Delimiter}${Join<T, Delimiter>}`; // 递归匹配多片段拼接场景

// 生成目标类型
type JoinOfFragments = Join<Fragments, ';'>;

// 给出的示例全部可以通过类型校验
const example1: JoinOfFragments = 'bar:456';
const example2: JoinOfFragments = 'foo:123;bar:456';
const example3: JoinOfFragments = 'bar:789;foo:123;bar:456';
const example4: JoinOfFragments = '';

// 以下非法值会被类型系统直接拦截
// const badCase1: JoinOfFragments = 'foo:123;baz:789'; // 存在不符合Fragments定义的片段
// const badCase2: JoinOfFragments = 'foo:123;'; // 末尾多余分隔符
// const badCase3: JoinOfFragments = ';foo:123'; // 开头多余分隔符
// const badCase4: JoinOfFragments = 'foo:123;;bar:456'; // 连续出现分隔符

类型逻辑说明 #

• 泛型参数T约束为允许出现的片段联合类型，Delimiter约束为拼接使用的分隔符类型
• 三个联合分支分别覆盖空串、单片段、多片段三种场景，通过递归实现任意长度的合法拼接字符串匹配
• 如果业务场景不允许空字符串，直接移除联合类型中的''分支即可

内容的提问来源于stack exchange，提问作者Chris Harding