Typescript中的复杂类型解析

时间:2019-12-18 07:14:19

标签: typescript types interface alias

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

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

实际上只是一个带有一些嵌套值的接口-没有联合。无论如何,有没有窥视这种类型,看看它的实际外观?我可以不手动遵循其引用的所有其他类型来做到这一点吗?

1 个答案:

答案 0 :(得分:3)

您可以使用在交点上映射的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,对调试有用,但不要把它放在生产代码中