Typescript 中的复杂类型解析

Question

我的 Typescript 中定义了一个非常复杂的类型：

export type DraftCamp = DeepPartial<CampForm> & {
  isActive: false
} & FilesExtension

这实际上只是一个带有一些嵌套值的接口——没有联合。有没有办法看看这种类型，看看它实际上是什么样子的？我可以在不手动跟踪它引用的所有其他类型的情况下执行此操作吗？

Answer 1

您可以使用映射交叉路口的Id 类型。无法保证什么会扩展映射类型，但这种类型当前可以解决问题：

type Id<T> = {} & {
  [P in keyof T]: Id<T[P]>
}

在交叉路口使用Id 会将其变平：

type FilesExtension = {
  ext: string
}

// Naive implementation, just filler
type DeepPartial<T> = {
  [P in keyof T]?: DeepPartial<T[P]>
}

type CampForm = {
  foo: {
    bar: string
  }
  baz: {
    bars: string[]
  }
}

type Id<T> = {} & {
  [P in keyof T]: Id<T[P]>
}
export type DraftCamp = Id<DeepPartial<CampForm> & {
  isActive: false
} & FilesExtension>
// Hover over DraftCamp and you will see the expanded version of it:
// type DraftCamp = {
//     foo?: {
//         bar?: string | undefined;
//     } | undefined;
//     baz?: {
//         bars?: (string | undefined)[] | undefined;
//     } | undefined;
//     isActive: false;
//     ext: string;
// }

Playground Link

注意：我必须警告你，有一些神秘的可分配性规则在具有相同成员的交集和展平类型之间有所不同，但它们的工作原理大致相同。这个想法是 Id 很像 console.log 对调试很有用，但不要把它留在生产代码中