TypeScript 可以只迭代接口的“自己的”键吗？

Question

有什么方法可以构建一个类似于DeepRequired<T> 的帮助器类型，它只会影响不是T“外部”的键？

我的意思是，用这个示例代码：

interface Test{
  prop1?: string
  prop2: {
    prop3?: {
      prop3b?: HTMLElement
    }
    prop4?: number
  }
}

declare const test: DeepRequired<Test>
const c: HTMLElement = test.prop2.prop3.prop3b

这将在c 上失败并出现错误：

键入'{ accessKey：字符串；只读 accessKeyLabel: string;自动大写：字符串；目录：字符串；可拖动：布尔值；隐藏：布尔值；内部文本：字符串；语言：字符串；只读 offsetHeight: number; ... 233 更多 ...;焦点：（选项？：FocusOptions | undefined）=> void； }' 不可分配给类型 'HTMLElement'。

如果我理解正确，那是因为 prop3b?: HTMLElement 已转换为 prop3b: DeepRequired<HTMLElement>。

有什么办法可以“深而浅”？

我尝试过构建自己的递归类型，比如：

type IsObject<T> = T extends AnyArray
  ? false
  : T extends object
  ? true
  : false

type RRequired<T> = {
  [P in keyof T]-?: NonNullable<T[P]> extends Builtin
    ? T[P]
    : NonNullable<T[P]> extends AnyArray
    ? T[P]
    : IsObject<NonNullable<T[P]>> extends true
    ? RRequired<T[P]>
    : T[P]
}

...但我找不到停止递归的方法。

我的理解是，对于TypeScript，我的Test接口相当于：

interface Test{
  prop1?: string
  prop2: {
    prop3?: {
      prop3b?: {
        ...HTMLElement
      }
    }
    prop4?: number
  }
}

即所有HTMLElement 的属性（或任何其他类型/接口）都内联在我使用它们的类型中......所以我不知道如何区分我的接口的嵌套属性和“外部”的嵌套属性，非-内置类型。

那么，有没有办法编写一个RRequired<T> 类型，将Test 转换为以下类型？

RRequired<Test> == {
  prop1: string
  prop2: {
    prop3: {
      prop3b: HTMLElement // <- preserve HTMLElement
    }
    prop4: number
  }
}

Answer 1

实现这样的事情的唯一方法是检查您不希望深入要求的“允许类型”列表。例如

type DeepRequired<T> = T extends HTMLElement ? T : {
    [K in keyof T]-?: DeepRequired<T[K]>
}

或

type AllowedTypes = HTMLElement | WhateverTypeYouWantToAllow | ...
type DeepRequired<T> = T extends AllowedTypes ? T : {
    [K in keyof T]-?: DeepRequired<T[K]>
}

但我们知道这会检查结构是否匹配。这意味着如果您有一个形状与HTMLElement 完全相同的类型，或者您的AllowedTypes 中的任何元素具有相似的形状，则条件将短路并且不会给您想要的结果。这里Bogus 的类型与Test.prop2 中的所有内容相似，这意味着prop2 以下的所有内容都不需要

type Bogus = {
    prop4?: number;
}

type AllowedTypes = HTMLElement | Bogus;

type DeepRequired<T> = T extends AllowedTypes ? T : {
    [K in keyof T]-?: DeepRequired<T[K]>
}

declare const z: DeepRequired<Test>
z.prop2.prop3.prop3b // BOOM, prop3 is optional!

由于 HTMLElement 和它的所有子类型都是非常复杂的形状，你很可能会用这种方法走得很远。但在结构化类型系统中，形状就是一切，随之而来的是一些陷阱。