利用索引访问类型完整预览出交叉类型定义的属性

前言

在越来越深入使用ts的时候，我们会遇到这种痛点，有人声明了一个类型A，然后另一个人声明了B类型，此时我需要将A、B类型交叉起来，再增加一些新属性，这很好，但是当我们将鼠标移动到定义的新类型C上面的时候，你会发现你只能看到自己新增的属性，A、B类型只能看到一个名字，你无法感知到它们具体都有哪些属性。

当然，这在开发中并不会有多大的影响，大不了跳转查看就是了，但是我们能不能不跳转进行预览呢？

于是晚上刷小破站看到国外的一个大神的视频，讲述了一个有趣的分享，他分享了一个自定义的Prettify类型，通过使用这个类型我们就能查看到完整的属性了。

不多说，上教程。

教程

typescript
复制代码
interface Test {
  name: string;
  age: number;
}

interface Test2 {
  a: string;
  b: number;
}

type Test3 = Test & Test2 & { c: boolean };

interface Test4 extends Test, Test2 {
  c: boolean;
}

我们现在有这么些类型，其中Test3和Test4是我在上面所述的情况，我们看下它的预览效果。

你会发现预览炒鸡难受！

下面我们创建一个Prettify类型：

typescript
复制代码
type Prettify<T> = {
  [K in keyof T]: T[K];
};

然后我们再去利用它创建一个新类型：

typescript
复制代码
type B = Prettify<Test3>;

type C = Prettify<Test4>;

此时我们再将鼠标移动到上面，就可以看到完整的属性了。

一清二楚还是很快乐的。

但是这个工具类型只能在你声明的文件中使用，如果我希望全局都能使用，比较便捷的办法就是创建一个全局类型文件，比如：type-helpers.d.ts，内容如下：

typescript
复制代码
declare global {
  type Prettify<T> = {
    [K in keyof T]: T[K];
  } & {}; 
}

此时我们就能愉快的在全局任意处使用该类型了，当然，我更加建议这个类型只用来辅助开发，不能作为正式类型去使用。