TypeScript高級技巧: 提取對象類型

如今不管是前端，仍是基於Node.js的後端，對TypeScript的使用愈來愈多。今天咱們說一個TypeScript高級使用技巧——提取已有對象的類型。

---

在ts中，一般咱們是先聲明類型，再建立該類型的對象：

type User = {
  name: string,
  age: number
}

const me: User = { name: 'Youmoo', age: 18 };

在某些狀況下咱們並不知道一個對象的類型，(如引用三方庫的對象，而三方庫並無暴露該對象的類型時)

咱們能夠藉助ts，讓它幫咱們推斷出對象類型：

const animal = { type: 'cat', name: 'Tom' };

// 對於以上對象，咱們須要提取出它的類型，並建立一個同類型的對象
type Animal = typeof animal;

// 定義一個同類型的對象
const mouse: Animal = { type: 'mouse', name: 'Jerry' };

在visual studio code中，能夠看到ts幫咱們正確地推導出了Animal類型：

以上是簡單的object對象，若咱們想提取數組內元素的類型呢？

方法有多種。

1、利用下標提取元素類型

type Animals = Array<{ type: string, name: string }>;
type Animal = Animals[number];

2、利用conditional+infer

type Animals = Array<{ type: string, name: string }>;
type Animal = Animals extends (infer T)[] ? T : never;

---

有了以上技巧，能夠引出一些有意思的玩法。

好比，將string數組中的元素提取爲常量類型。

const valid_answers = ['yes', 'no', 'answer'] as const;
type Answer = (typeof valid_answers)[number];
const ans1: Answer = 'yes';// 沒問題
const ans2: Answer = 'nope';// 編譯不經過

其中Answer的類型定義是：

咱們甚至能夠繼續向內，提取更深層的字段類型：

type Foo = { x: Array<{ y: string }> };
type TypeY = Foo['x'][number]['y'];

你說，TypeY是什麼類型呢？

---

本文初發佈於微信公衆號 背井(nineteen84)。掃碼可關注。