文档章节

TypeScript高级技巧: 提取对象类型

 背井
发布于 01/13 16:56
字数 508
阅读 457
收藏 4

现在无论是前端,还是基于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)。扫码可关注。

© 著作权归作者所有

粉丝 3
博文 3
码字总数 2817
作品 0
杭州
高级程序员
私信 提问
Typescript 小书之入门篇-连载中...

假想你会问(没有这个问题更好) 已经有 Typescript 官方手册 和 Typescript 非官方中文网 这两个权威且全面讲解 Typescript 的站点,干嘛还要再浪费时间整理这本小书? 首先,对于官方的和类...

pr
2019/07/03
0
0
【TS 演化史 -- 破晓】一步一个脚印带你入门 TS

作者:Valentino Gagliardi 译者:前端小智 来源:valentinog 上个月自己花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架,在 号之前它们有做活动,1300 的配置现在一年只要 ...

前端小智
2019/11/04
0
0
Vue3.0之前你必须知道的TypeScript实战技巧

本文首发于微信公众号「程序员面试官」 很多人对TypeScript的使用还停留在基本操作上,其实TypeScript的特性非常强大,我们利用好这些特性可以有效地提高代码质量、加速开发效率,今天就介绍9...

寻找海蓝96
2019/09/10
0
0
为vue3学点typescript(1), 体验typescript

看了vue conf 2019的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点. 19年最酷的前端技术 我是19年初开始使用的typescrip...

铁皮饭盒
2019/07/01
0
0
复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取

前言:在编写 typescript 应用的时候,有时候我们会希望复用或者构造一些特定结构的类型,这些类型只从 typescript 靠内建类型和 interface、class 比较难以表达,这时候我们就需要用到类型推...

richardo2016
2019/10/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 谨以此文怀念逝去的人

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 今天没歌曲 手机党少年们想听歌,请使劲儿戳(这里) 今天是周六, 刚想开始写乱弹的时候, 翻到了巴叔新建的话题上, @ 巴拉迪维:宏哥,一路...

小小编辑
今天
19
4
判断php变量是否定义,是否为空,是否为真的一览表

使用 PHP 函数对变量 $x 进行比较 表达式 gettype() empty() is_null() isset() boolean : if($x) $x = ""; string TRUE FALSE TRUE FALSE $x = null; NULL TRUE TRUE FALSE FALSE var $x; N......

Grayk
今天
19
0
服务器监控

1. 服务器监控内容有哪些? 答: 主要有服务监控 和 流量监控 2. 监控重点是? 答: 是 磁盘 和 流量,cpu是浮动的,意义不大 3. 怎样 实现 监控? 答:将 服务器 分为:监控者 和 被监管协议...

杨凯123
昨天
246
0
Apollo开发指南

一、准备工作 二、本地启动 2.1 Apollo Config Service和Apollo Admin Service 2.2 Apollo-Portal 2.3 Java样例客户端启动 2.4 .Net样例客户端启动 三、开发 3.1 Portal 实现用户登录功能 3....

Ciet
昨天
307
0
英文词汇 计算机网络中的专业英语单词及其缩写

学习计算机网络时,会阅读相关的专业文献。对于文献中经常出现的缩写形式的专业名词,做了一些积累。现于此博文中做个简单的分享,希望能对后来人有所帮助,平稳地入门计算机网络。 注:博文...

志成就
昨天
186
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部