MST

星途 面试题库

面试题:深入理解TypeScript条件类型分布式特性及边界情况处理

考虑如下场景,有一个递归条件类型`type RecursiveConditional<T> = T extends [infer Head, ...infer Tail]? Head extends string? [Head, ...RecursiveConditional<Tail>] : RecursiveConditional<Tail> : []`。当传入类型`type Input = [1, 'a', 2, 'b']`时,分析`RecursiveConditional<Input>`的计算过程,尤其要阐述分布式特性在递归过程中的作用,以及如何处理可能出现的边界情况,比如空数组或者嵌套数组。
43.1万 热度难度
前端开发TypeScript

知识考点

AI 面试

面试题答案

一键面试
  1. RecursiveConditional<Input>的计算过程
    • 初始时,Input = [1, 'a', 2, 'b'],传入RecursiveConditional<T>
    • 第一次递归:
      • T[1, 'a', 2, 'b']Head推断为1Tail推断为['a', 2, 'b']
      • 因为1不满足Head extends string,所以执行RecursiveConditional<Tail>,即RecursiveConditional<['a', 2, 'b']>
    • 第二次递归:
      • T['a', 2, 'b']Head推断为'a'Tail推断为[2, 'b']
      • 由于'a'满足Head extends string,返回['a', ...RecursiveConditional<[2, 'b']>]
    • 第三次递归:
      • T[2, 'b']Head推断为2Tail推断为['b']
      • 因为2不满足Head extends string,执行RecursiveConditional<Tail>,即RecursiveConditional<['b']>
    • 第四次递归:
      • T['b']Head推断为'b'Tail推断为[]
      • 由于'b'满足Head extends string,返回['b', ...RecursiveConditional<[]>]
    • 第五次递归:
      • T[],不满足T extends [infer Head, ...infer Tail]条件,返回[]
    • 最终结果为['a', 'b']
  2. 分布式特性在递归过程中的作用
    • 分布式条件类型在递归过程中起到了将联合类型拆分为单个类型进行处理的作用。虽然在这个例子中没有涉及联合类型,但在更复杂场景下,如果T是一个联合类型,比如type UnionInput = [1, 'a', 2, 'b'] | [3, 'c'],分布式特性会将联合类型拆分为[1, 'a', 2, 'b'][3, 'c']分别传入RecursiveConditional进行处理,然后再合并结果。这使得递归条件类型能够更灵活地处理复杂的类型结构。
  3. 处理边界情况
    • 空数组
      • 当传入空数组[]时,T extends [infer Head, ...infer Tail]条件不成立,直接返回[],这在定义RecursiveConditional时已经处理,保证了对空数组输入的正确性。
    • 嵌套数组
      • 目前的RecursiveConditional类型定义只能处理一维数组。如果要处理嵌套数组,需要修改类型定义以支持递归地展开嵌套数组。例如,可以修改为:
type Flatten<T> = T extends [infer Head, ...infer Tail]
  ? Head extends Array<infer Inner>
      ? [...Flatten<Inner>, ...Flatten<Tail>]
       : [Head, ...Flatten<Tail>]
    : [];

type RecursiveConditionalForNested<T> = Flatten<T> extends [infer Head, ...infer Tail]
  ? Head extends string
      ? [Head, ...RecursiveConditionalForNested<Tail>]
       : RecursiveConditionalForNested<Tail>
    : [];
 - 这里先通过`Flatten`类型将嵌套数组展开为一维数组,然后再使用类似`RecursiveConditional`的逻辑处理字符串元素。这样就可以处理嵌套数组的情况。