Typescript 中逗号分隔字符串的真正递归模板文字

如何解决Typescript 中逗号分隔字符串的真正递归模板文字

我正在尝试为包含逗号分隔值的字符串定义 Typescript 模板文字。我能让这个定义真正递归和通用吗？

请参阅 this typescript playground 以对该案例进行实验。

每个逗号分隔值代表一个排序顺序，如 height asc。该字符串应定义一个顺序（包括一级、二级、三级等），根据有效字段名称和两个可能的排序 "asc" 和 "desc" 的并集，该顺序可能包含无限多个排序级别，以分隔符分隔根据示例代码中的示例使用逗号。

下面的实现最多可处理 4 个排序顺序，但案例 5 表明它并不是真正的递归。当前扩展 (2x2) 的数量最多只包含 4 个可能的值，所以我很幸运地处理了我尝试过的初始情况。

const FIELD_NAMES = [
  "height","width","depth","time","amaze",] as const;

const SORT_ORDERS = [
  "asc","desc",] as const;

type Field = typeof FIELD_NAMES[number];
type Order = typeof SORT_ORDERS[number];

type FieldOrder = `${Field} ${Order}`
type Separated<S extends string> = `${S}${""|`,${S}`}`;
type Sort = Separated<Separated<FieldOrder>>;

/** SUCCESS CASES */
const sort1:Sort = "height asc"; //compiles
const sort2:Sort = "height asc,depth desc"; //compiles
const sort3:Sort = "height asc,height asc,height asc"; //compiles
const sort4:Sort = "height asc,width asc,depth desc,time asc"; //compiles
const sort5:Sort = "height asc,time asc,amaze desc"; //SHOULD compile but doesn't

/** FAILURE CASES */
const sort6:Sort = "height"; //doesn't compile 
const sort7:Sort = "height asc,"; //doesn't compile
const sort8:Sort = ""; //doesn't compile

我不能再增加这个模板文字的“arity”了，因为尝试像下面那样做 2x2x2 会导致 Expression produces a union type that is too complex to represent

type Sort = Separated<Separated<Separated<FieldOrder>>>;

是否可以定义一个模板文字来处理一般情况？

解决方法

如您所见，您正在创建的 template literal types 类型会迅速破坏编译器表示联合的能力。如果您阅读 pull request that implements template literal types，您会看到联合类型最多只能有 100,000 个元素。因此，您只能让 Sort 接受最多 4 个逗号分隔的值（这将需要大约 11,110 个成员）。而且您当然不能让它接受任意数字，因为这意味着 Sort 需要是一个无限联合，并且无穷大比 100,000 大一些。因此，我们不得不放弃将 Sort 表示为特定联合类型的不可能完成的任务。

---

通常，my approach 在这种情况下是从特定类型切换到充当 recursive constraints 的泛型类型。所以我们有Sort而不是ValidSort<T>。如果 T 是有效的排序字符串类型，则 ValidSort<T> 将等同于 T。否则，ValidSort<T> 将是来自 Sort 的一些合理候选（或这些的联合），它“接近”到 T。

这意味着您打算编写 Sort 的任何地方现在都需要编写 ValidSort<T> 并将一些泛型类型参数添加到适当的范围。此外，除非您想强迫某人编写 const s: ValidSort<"height asc"> = "height asc";，否则您需要调用一个 helper 函数，例如 asSort()，它检查其输入并推断类型。这意味着你得到 const s = asSort("height asc");。

它可能并不完美，但它可能是我们能做到的最好的。

---

让我们看看定义：

type ValidSort<T extends string> = T extends FieldOrder ? T :
  T extends `${FieldOrder},${infer R}` ? T extends `${infer F},${R}` ?
  `${F},${ValidSort<R>}` : never : FieldOrder;

const asSort = <T extends string>(t: T extends ValidSort<T> ? T : ValidSort<T>) => t;

ValidSort<T> 是一个 recursive conditional type，它检查字符串类型 T 以查看它是 FieldOrder 还是以 FieldOrder 开头的字符串一个逗号和一个空格。如果它是 FieldOrder，那么我们有一个有效的排序字符串，我们只需返回它。如果它以 FieldOrder 开头，那么我们递归地检查字符串的其余部分。否则，我们有一个无效的排序字符串，我们返回 FieldOrder。

让我们看看它的实际效果。您的成功案例现在都按预期工作了：

/** SUCCESS CASES */
const sort1 = asSort("height asc"); //compiles
const sort2 = asSort("height asc,depth desc"); //compiles
const sort3 = asSort("height asc,height asc,height asc"); //compiles
const sort4 = asSort("height asc,width asc,depth desc,time asc"); //compiles
const sort5 = asSort(
  "height asc,time asc,amaze desc"); //compiles

并且失败案例失败，错误消息显示您应该使用的“足够接近”类型：

/** FAILURE CASES */
const sort6 = asSort("height"); // error!
/* Argument of type '"height"' is not assignable to parameter of type 
'"height asc" | "height desc" | "width asc" | "width desc" | "depth asc" | 
"depth desc" | "time asc" | "time desc" | "amaze asc" | "amaze desc"'. */

const sort7 = asSort("height asc,"); // error!
/* Argument of type '"height asc,"' is not assignable to parameter of type 
'"height asc" | "height desc" | "width asc" | "width desc" | "depth asc" | 
"depth desc" | "time asc" | "time desc" | "amaze asc" | "amaze desc"'. */

const sort8 = asSort(""); // error!
/* Argument of type '""' is not assignable to parameter of type 
'"height asc" | "height desc" | "width asc" | "width desc" | "depth asc" | 
"depth desc" | "time asc" | "time desc" | "amaze asc" | "amaze desc"'. */

const sort9 = asSort("height asc,death desc"); // error!
/* Argument of type '"height asc,death desc"' is not assignable to parameter of type 
'"height asc,depth desc" | "height asc,height asc" | "height asc,time asc" |
 "height asc,amaze desc" | "height asc,height desc" | "height asc,width asc" | 
 "height asc,width desc" | "height asc,depth asc" | "height asc,time desc" | 
 "height asc,amaze asc"'. */

我添加了 sort9 来向您展示错误消息如何不仅显示 FieldOrder，还显示以 "height asc," 开头，后跟 FieldOrder 的字符串。

Playground link to code