Typescript 如何推断深层嵌套属性的类型

以下是如何做到这一点，如果您不想使用as const，并将数组设置为readonly-

type Cast<A, B> = A extends B ? A : B;

type Narrowable = string | number | bigint | boolean;

type Narrow<A> = Cast<
  A,
  [] | (A extends Narrowable ? A : never) | { [K in keyof A]: Narrow<A[K]> }
>;

type ChildType = 'foo' | 'bar' | 'baz';

type ChildDescriptor<
  TName extends string = string,
  TType extends ChildType = ChildType,
> = {
  name: TName;
  type: TType;
};

type ParentDescriptor<
  TSomeProp extends string,
  TChildren extends ChildDescriptor[],
> = {
  someProp: TSomeProp;
  children: [...TChildren];
};

// Identity function so we can observe what types are inferred
const identity = <
  TSomeProp extends string,
  TChildren extends ChildDescriptor[],
>(
  descriptor: ParentDescriptor<TSomeProp, Narrow<TChildren>>,
) => descriptor;

const inferredValue = identity({
  //    ^? const inferredValue: ParentDescriptor<"I get inferred", [{ name: "I don't get inferred"; type: "foo"; }, { name: "I don...
  someProp: 'I get inferred',
  children: [
    {
      name: "I don't get inferred",
      type: 'foo',
    },
    {
      name: "I don't get inferred either",
      type: 'baz',
    },
  ],
});

const [
  childA,
  //^? const childA: { name: "I don't get inferred"; type: "foo"; }
  childB,
  //^? const childB: { name: "I don't get inferred either"; type: "baz"; }
] = inferredValue.children;

这是一张Playground link美元.

解释

这样做的原因是因为TypeScrip编译器扫描输入，使用它的算法，它首先扫描非上下文的泛型，然后扫描上下文的泛型，你可以阅读更多关于它的here和here.

因此，如果我们使用Narrow实用程序，则TypeScrip被迫运行分析以捕获其上的类型，由于Array实际上是一个对象，因此我们详尽地映射到它的所有属性，因为您可以看到这是一个递归实用程序.This个例子会让你对它有更多的了解-

type A = { [K in keyof ["some", "things"]]: ["some", "things"][K] }
//   ^? type A= { [x: number]: "some" | "things"; 0: “some"; 1: "things"; length: 2; toString: () => string; toLocaleString: (...

中间的Cast实用程序是所有魔术发生的地方，它实际上是一个技巧，让编译器通过类型B推断A的类型，本质上，如果你添加两个泛型并约束其中一个，然后在另一个约束泛型中使用它，编译器就会推断出as const,for example这样的类型-

type Some = number | string;

function getValues<N extends Some, K extends Record<keyof K, N>>(arg: K) {
    return arg;
}

const value = getValues({ a: "something", b: "another thing" });
//    ^? const value: { a: "something"; b: “another thing”; }