现在无论是前端，还是基于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对象，若我们想提取数组内元素的类型呢？
方法有多种。
一、利用下标提取元素类型
type Animals = Array<{ type: string, name: string }>;
type Animal = Animals[number];
二、利用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)。扫码可关注。
![]()
