typescript - 如何避免 TypeScript 模板文字类型推断中的歧义？-6ren

typescript - 如何避免 TypeScript 模板文字类型推断中的歧义？

转载作者：行者123 更新时间：2023-12-04 08:13:11

我正在尝试编写一种类型来验证给定的输入字符串是否具有由 1 个或多个空格字符分隔的有效类名。输入也可能有前导或尾随空格。
我现在的类型非常接近，但是 TS 编译器可以通过多种方式推断模板文字，这意味着语法不明确。这会导致不需要的结果。
首先我们定义原始类型:

// To avoid recursion as much as possible
type Spaces = (
  | "     "
  | "    "
  | "   "
  | "  "
  | " "
);
type Whitespace = Spaces | "\n" | "\t";
type ValidClass = 'a-class' | 'b-class' | 'c-class';

然后是实用程序类型

// Utility type to provide nicer error messages
type Err<Message extends string> = `Error: ${Message}`;

type TrimEnd<T extends string> = (
  T extends `${infer Rest}${Whitespace}`
  ? TrimEnd<Rest>
  : T
);
type TrimStart<T extends string> = (
  T extends `${Whitespace}${infer Rest}`
  ? TrimStart<Rest>
  : T
);
type Trim<T extends string> = TrimEnd<TrimStart<T>>;

最后是检查输入字符串的实际类型:

// Forces the string to be trimmed before starting recursive loop.
type SplitToValidClasses<T extends string> = SplitToValidClassesInner<Trim<T>>;

// Splits the input string into array of `Array<Token | 'Error: ...'>`
// strings. The input is converted to an array format mostly because I found it
// easier to work with arrays in other TS generics, instead of e.g space separated
// values.
type SplitToValidClassesInner<T extends string> =
  // Does `T` contain more than one string? For example 'aaaa\n\n  bbbb'
  T extends `${infer Head}${Whitespace}${infer Tail}`
    // Yes, `T` could be infered into three parts.
    // Is `Head` a valid class name?
    ? Trim<Head> extends ValidClass
        // Yes, it's a valid name. Continue recursively with rest of the string
        // but trim white space from both sides.
        ? [Trim<Head>, ...SplitToValidClassesInner<Trim<Tail>>]
        : [Err<`'${Head}' is not a valid class`>]
    : T extends `${infer Tail}`
      ? Tail extends ValidClass
        ? [Tail]
        : [Err<`'${Tail}' is not a valid class`>]
      : [never];

// This works
type CorrectResult = SplitToValidClasses<'a-class b-class c-class'>

但是当使用不同的输入进行测试时，我们会注意到不正确的结果:

// Should be ["a-class", "b-class", "c-class"]
type Input1 = `a-class b-class  c-class`;
type Result = SplitToValidClasses<Input1>;

// Should be ["a-class", "b-class", "c-class", "a-class"]
type Result2 = SplitToValidClasses<`

  a-class    b-class
c-class

    a-class
`>;

// Should be ["a-class", "Error: 'wrong-class' is not a valid class"]
type Result3 = SplitToValidClasses<`
  a-class
  wrong-class
  c-class
`>;

问题发生在模板推理中:

type SplitToValidClassesInnerFirstLevelDebug<T extends string> =
  T extends `${infer Head}${Whitespace}${infer Tail}`
    ? [Head, Whitespace, Tail]
    : never

// The grammar is ambiguous, leading to 
// "["a-class b-class" | "a-class", Whitespace, "c-class" | "b-class  c-class"]
// Removing the ambiguousity should fix the issue
type Result4 = SplitToValidClassesInnerFirstLevelDebug<Input1>

Playground link
除了 Anders Hejlsberg 在 his PR 中解释的内容之外，我找不到很多关于如何推断模板文字的细节的文档。 :

For inference to succeed the starting and ending literal character spans (if any) of the target must exactly match the starting and ending spans of the source. Inference proceeds by matching each placeholder to a substring in the source from left to right: A placeholder followed by a literal character span is matched by inferring zero or more characters from the source until the first occurrence of that literal character span in the source. A placeholder immediately followed by another placeholder is matched by inferring a single character from the source.

如何实现这种打字，而不会产生模棱两可的结果？我想到的一种方法是逐个字符地递归解析输入，但它很快就达到了 TS 中的递归限制。

最佳答案

我想出了两个解决方案，但都没有解决原始问题，因为类型变得太复杂或递归。第二种解决方案肯定比第一种解决方案更具可扩展性。
方案一:递归解析
此解决方案递归解析输入字符串。 type Split按空格拆分输入字符串并返回标记(或单词)数组。

type EndOfInput = '';

// Validates given `UnprocessedInput` input string
// It recursively iterates through each character in the string,
// and appends characters into the second type parameter `Current` until the
// token has been consumed. When the token is fully consumed, it is added to 
// `Result` and `Current` memory is cleared.
//
// NOTE: Do not pass anything else than the first type parameter. Other type
//       parameters are for internal tracking during recursive loop
//
// See https://github.com/microsoft/TypeScript/pull/40336 for more template literal
// examples.
type Split<UnprocessedInput extends string, Current extends string = '', Result extends string[] = []> =
  // Have we reached to the end of the input string ?
  UnprocessedInput extends EndOfInput
    // Yes. Is the `Current` empty?
    ? Current extends EndOfInput
      // Yes, we're at the end of processing and no need to add new items to result
      ? Result
      // No, add the last item to results, and return result
      : [...Result, Current]
    // No, use template literal inference to get first char, and the rest of the string
    : UnprocessedInput extends `${infer Head}${infer Rest}`
      // Is the next character whitespace?
      ? Head extends Whitespace
        // No, and is the `Current` empty?
        ? Current extends EndOfInput
          // Yes, continue "eating" whitespace
          ? Split<Rest, Current, Result>
          // No, it means we went from a token to whitespace, meaning the token
          // is fully parsed and can be added to the result
          : Split<Rest, '', [...Result, Current]>
        // No, add the character to Current 
        : Split<Rest, `${Current}${Head}`, Result>
      // This shouldn't happen since UnprocessedInput is restricted with
      // `extends string` type narrowing.
      // For example ValidCssClassName<null> would be a `never` type if it didn't
      // already fail to "Type 'null' does not satisfy the constraint 'string'"
      : [never]

这适用于较小的输入，但不适用于较大的字符串，因为 TS 递归限制:

type Result5 = Split<`
a   


b 

c`>

// Fails for larger string values, because of recursion limit
type Result6 = Split<`aaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbb`

Playground link
解决方案 2:称为 token 的类
由于我们实际上将有效的类名作为字符串联合，我们可以将其用作模板文字类型的一部分来使用整个类名。
为了理解这个解决方案，让我们从部分构建它。首先让我们使用 ValidClass在模板文字中:

type SplitDebug1<T extends string> =
  T extends `${ValidClass}${Whitespace}${infer Tail}`
  ? [ValidClass, Whitespace, Tail]
  : never

// The grammar is not ambiguous anymore!
// [ValidClass, Whitespace, "b-class c-class"]
type Result1 = SplitDebug1<"a-class b-class c-class">

这解决了歧义问题，但现在我们不能再访问解析的 Head，因为 ValidClass只是指类型 type ValidClass = "a-class" | "b-class" | "c-class" .不幸的是，TypeScript 不允许同时推断和限制 token ，所以这是不可能的:

type SplitDebug2<T extends string> =
  T extends `${infer Head extends ValidClass ? infer Head : never}${Whitespace}${infer Tail}`
  ? [Head, Whitespace, Tail]
  : never

// Still just [ValidClass, Whitespace, "b-class c-class"]
type Result2 = SplitDebug1<"a-class b-class c-class">

但这里是黑客。我们可以使用已知的 Tail作为反转匹配以访问 Head 的一种方式:

type SplitDebug3<T extends string> =
  T extends `${ValidClass}${Whitespace}${infer Tail}`
    ? T extends `${infer Head}${Whitespace}${Tail}` 
      ? [Head, Whitespace, Tail]
      : never
    : never

// Now we now the first valid token aka class name!
// ["a-class", Whitespace, "b-class c-class"]
type Result3 = SplitDebug3<"a-class b-class c-class">

这个技巧可以用来解析有效的类名，完整的解决办法:


// Demonstrating with large amount of class names
// Breaks to "too complex union type" with 20k class names
type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type ValidClass1000 = `class-${Digit}${Digit}${Digit}`;

type SplitToValidClasses<T extends string> = SplitToValidClassesInner<Trim<T>>;
type SplitToValidClassesInner<T extends string> =
  T extends `${ValidClass1000}${Whitespace}${infer Tail}`
    ? T extends `${infer Head}${Whitespace}${Tail}` 
      ? Trim<Head> extends ValidClass1000
          ? [Trim<Head>, ...SplitToValidClassesInner<Trim<Tail>>]
          : [Err<`'${Head}' is not a valid class`>]
      : never
    : T extends `${infer Tail}`
      ? Tail extends ValidClass1000
        ? [Tail]
        : [Err<`'${Tail}' is not a valid class`>]
      : [never];

// ["class-001", "class-002", "class-003", "class-004", "class-000"]
type Result4 = SplitToValidClasses<`

    class-001 class-002 
  class-003
      class-004 class-000

  `>

Playground link
这是我能想到的最好的解决方案，也适用于相当大的联合类型。错误消息可以被完善，但它仍然提示正确的位置。
虽然支持联合类型中的大量选择，但这不适用于我们在单个类型联合中有大约 40k Tailwind 类名称的实际用例。该类型表示在开发期间可能添加的所有可能的类名(未使用的在生产中被清除)。

关于typescript - 如何避免 TypeScript 模板文字类型推断中的歧义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65844206/

文章推荐： flutter - 如何在 flutter 中设置 showModalBottomSheet 宽度

文章推荐： angular - 我的拦截器上未定义构造函数变量(Angular 8)

typescript - 从另一个 TypeScript 包导入 TypeScript 类型
我已经写了并且 npm 发布了这个:https://github.com/justin-calleja/pkg-dependents 现在我正在用 Typescript 编写这个包:https://g
typescript - 如何在模拟函数时允许部分 TypeScript 类型 - Jest、TypeScript
我有一个函数，我想在 TypeScript 中模拟它以进行测试。在我的测试中，我只关心 json和 status .但是，当使用 Jest 的 jest.spyOn 时我的模拟函数的类型设置为返回 h
typescript - 如何在 Typescript 中声明一个从支持 Typescript 的库返回类型的函数
我正在使用一个库 (Axios)，它的包中包含 Typescript 声明。我想声明一个将 AxiosResponse(在库的 .d.ts 文件中声明)作为参数的函数。我有以下内容: functio
typescript - 使用引用将一个 typescript 文件加载到另一个 typescript 文件中
我是 Typescript 的新手。我想使用将一个 Typescript 文件加载到另一个 Typescript 文件中标签。我做了一些事情，但它不起作用!请帮助我。 first.ts: imp
typescript - atom-typescript - 为什么无法识别这些 Typescript 配置选项？
为什么我会收到下面屏幕截图中显示的错误？ Atom 说我的 tsconfig.json“项目文件包含无效选项”用于 allowJs、buildOnSave 和 compileOnSave。但是应该允
typescript - 将所有 TypeScript 文件编译成单个 TypeScript 文件
所以我正在创建一个 TypeScript 库，我可以轻松地将所有生成的 JS 文件编译成一个文件。有没有办法将所有 .ts 和 .d.ts 编译成一个 .ts 文件？除了支持 JS 的版本(较少的智
typescript - 更安全的 TypeScript - 与普通 TypeScript 有什么区别
Microsoft Research 提供了一种名为Safer TypeScript 的新 TypeScript 编译器变体: http://research.microsoft.com/en-us/
typescript - 将多个 typescript 文件合并为一个 typescript 定义文件
我需要这个来在单个文件中分发 TypeScript 中的库。有没有办法将多个 typescript 文件合并到(一个js文件+一个 typescript 定义)文件中？最佳答案要创建一个库，您可以
typescript - typescript 中的装饰器返回函数的时间
用例:我想知道一个函数在 typescript 中执行需要多少时间。我想为此目的使用装饰器。我希望装饰器应该返回时间以便(我可以进一步使用它)，而不仅仅是打印它。例如: export functio
typescript - Typescript 中可空的条件类型
我想检查一个类型是否可以为 null，以及它是否具有值的条件类型。我尝试实现 type IsNullable = T extends null ? true : false; 但是好像不行 type
typescript - TypeScript 如何推断回调参数类型
我的问题是基于这个 question and answer 假设我们有下一个代码: const myFn = (p: { a: (n: number) => T, b: (o: T) => v
typescript - TypeScript 中的后缀双感叹号
我知道双重否定前缀，我知道 TypeScript 的单后缀(非空断言)。但是这个双后缀感叹号是什么？ /.*验证码为(\d{6}).*/.exec(email.body!!)!![1] 取自here
typescript - typescript 的全局模块定义
我正在使用以下文件结构在 Webstorm 中开发一个项目 | src | ... | many files | types | SomeInterface |
typescript - TypeScript 对象字面量中的类型定义
在 TypeScript 类中，可以为属性声明类型，例如: class className { property: string; }; 如何在对象字面量中声明属性的类型？我试过下面的代码，但它
typescript - TypeScript 中的非破坏性类型断言
我正在寻找一种在不丢失推断类型信息的情况下将 TypeScript 中的文字值限制为特定类型的好方法。让我们考虑一个类型Named，它保证有一个名字。 type Named = { name:
typescript - TypeScript 中任意数量类型的非析取联合
在 TypeScript 中，我想创建一个联合类型来表示属于一个或多个不同类型的值，类似于 oneOf在 OpenAPI或 JSON Schema .根据a previous answer on a
typescript - Typescript 中函数声明的可重用类型注释？
type Func = (foo:string) => void // function expression const myFunctionExpression:Func = function(f
typescript - TypeScript 中联合类型的相应子类型的泛型
假设我有一个联合类型，我正在使用类似 reducer 的 API 调用模式，看起来像这样: type Action = { request: { action: "create
typescript - typescript 中的安全类型去抖功能
我在 typescript 中有以下去抖功能: export function debounce( callback: (...args: any[]) => void, wait: numb
typescript - vue3中props的定义方式是什么(Typescript)
在 Vue3 的 defineComponent 函数中，第一个泛型参数是 Props，所以我在这里使用 Typescript 接口(interface)提供我的 props 类型。喜欢: expor

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

typescript - 如何避免 TypeScript 模板文字类型推断中的歧义？