前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >TypeScript: 常用的高级类型

TypeScript: 常用的高级类型

作者头像
用户6901603
发布于 2020-07-23 15:40:57
发布于 2020-07-23 15:40:57
1.9K00
代码可运行
举报
文章被收录于专栏:不知非攻不知非攻
运行总次数:0
代码可运行
UI鉴赏 - 这是我的第 62 篇原创
UI鉴赏 - 这是我的第 62 篇原创

今天这篇文章分享的内容挺简单,却应该引起重视,在实践场景中各种交叉使用又会让内容变得复杂。因此掌握基础不难,在实践中的思考与总结则是我们更应该随时要做的事情。

1

枚举

使用关键字enum可定义一个枚举类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

Direction.Up // 1
Direction.Down // 2
Direction.Left // 3
Direction.Right // 4

需要注意,与interface等类型约束关键字不同,枚举类型是真实运行的代码,因此枚举类型是真实存在的对象,而并非仅仅只是简单的类型约束。

如果不赋值,则从0开始递增。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
enum Direction {
    Up,
    Down,
    Left,
    Right
}

Direction.Up // 0
Direction.Down // 1
Direction.Left // 2
Direction.Right // 3

也可以赋值为字符串

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}

Direction.Up // up
Direction.Down // down
Direction.Left // left
Direction.Right // right

可以反向映射访问

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}

Direction.up // Up
Direction.down // Down
Direction.left // Lfet
Direction.right // Right

前端的一个特殊性在于,我们通常会将枚举类型的值描述展示在页面上,因此此时如果使用枚举来表达会存在一些问题。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 实践中更多使用这样方式表达枚举的含义
const sources = {
  1: '微信',
  2: 'QQ',
  3: '今日头条',
}

2

& 交叉类型

当我们在封装Drag组件时,需要兼容移动端的touch与pc端的mouse事件。可问题在于touch的事件对象与mouse的事件对象是不一样的。那么我们在兼容了这两种事件的回调中,如何去描述该回调的事件对象呢?

通常使用 & 符号来解决这样的常见,将两种类型合并为一种类型。这样就能够在智能提示中同时访问到两个事件对象的所有属性了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type TouchEvent = React.TouchEvent & React.MouseEvent;
demo.gif
demo.gif

3

| 联合类型

当我们想要设定一个变量的类型为number时,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let a: number = 10;

但是当我们想要设定他的数据只能是10, 20, 30时,就需要用到 |

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type Source = 10 | 20 | 30;
let a: Source = 10;

通常这种场景与枚举数据有关。

当然,我们也可以扩展一个数据的类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const attr: number | string = 20;

注意体会 & 与 | 的区别

4

类型保护

一个变量,被定义为可能是字符串,也可能是数组。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
per: string | string[]

我们在代码编写时,希望能够自动提示对应的api,typescript则不知道应该如何处理这种情况。

试图调用数组的map方法,结果无法找到
试图调用数组的map方法,结果无法找到

为此,我们应该使用一些判断,帮助编辑器做出正确推断。

自动提示所有字符串api
自动提示所有字符串api

自动提示所有数组api
自动提示所有数组api

这种处理,就叫做类型保护。

5

索引类型

我们可以使用 keyof 来获取一个对象中的key对应的具体值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface Person {
  name: string,
  age: number
}

const key: keyof Person = 'name';

结果

他有点类似于

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type Key = 'name' | 'age';

但 keyof 具备更强的灵活性,它会动态的去识别对象中的所有key值。

结合泛型,用一个复杂的例子来体验一下:

我们来封装这样一个方法:对于一个对象,当我们指定对应的key值数组时,希望能够得到所有key值对应的value值数组。

需要思考几个问题。目标对象的类型,我们不确定,因此,只能使用一个泛型变量做一个简单约束。key值的类型呢?我们可以使用 keyof 从泛型对象中获取。于是又定义另外一个泛型变量 K 来接收获取的结果。

函数定义如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function values<T, K extends keyof T>(o: T, names: K[]): T[K][] {
  return names.map(n => o[n]);
}

6

总结

ts的知识介绍,到这里就告一段落了。这4篇文章学完,已经足够应对我们接下来要面临的React学习。也为大家进一步深入学习ts打下了坚实的基础。

我们在实践场景中,还有更多更复杂的组合,这些经验很难通过技术文章获取到,需要在实践中慢慢体会。除此之外,typescript官方文档中,还有一些重要的东西需要去深入学习。「类型推导」「类型兼容性」「in操作符」等。这些概念,官网已经介绍得足够好,相信大家看一遍也能get到。

最后,收拾收拾心情,准备React的学习吧。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-01-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 不知非攻 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
看了《最强大脑》,我决定做这个游戏
今年年初,新一季的《最强大脑》开播了,第一集选拔的时候大家做了一个数字游戏,名叫《数字华容道》,当时何猷君以二十几秒的成绩夺得该项目的冠军,来看一下当时的比赛:
王强
2018/08/09
1.2K0
看了《最强大脑》,我决定做这个游戏
58. 精读《Typescript2.0 - 2.9》
我发现,许多写了一年以上 Typescript 开发者,对 Typescript 对理解和使用水平都停留在入门阶段。造成这个现象的原因是,Typescript 知识的积累需要 刻意练习,使用 Typescript 的时间与对它的了解程度几乎没有关系。
黄子毅
2022/03/14
1.1K0
【Kotlin】Kotlin enum 枚举类 ( 常用用法 | 初始化成员变量 | 实现抽象方法 | 实现接口 | 获取名称和位置索引 | 调用枚举常量方法 )
枚举最常用的方法 : 定义枚举常量 , 使用逗号隔开 , 每个枚举常量都是一个对象 ;
韩曙亮
2023/03/27
2.4K0
《现代Typescript高级教程》枚举和泛型
接下来我们将学习TypeScript 中的两个重要主题:枚举(Enums)和泛型(Generics)。这两个特性能大大提高代码的可重用性和安全性。
linwu
2023/07/27
2500
typescript基础笔记
typescript早在2013年就发布了第一个正式版本,印象中一直到了19年才大火起来。三年过去了,一直是可用可不用的状态,于是很多人都没学习使用。直到react和vue开始捆版上了ts,前端圈也开始了“内卷”,ts已经是不得不用的状态了。
wade
2022/03/28
7520
枚举_TypeScript笔记7
按照枚举值的类型,把枚举分为数值枚举,字符串枚举以及异构枚举。此外,还有特殊的联合枚举,以及常量枚举和环境枚举
ayqy贾杰
2019/06/12
5440
TypeScript 中枚举类型的理解?应用场景有哪些
枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型
全栈若城
2024/10/09
970
深入浅出 TypeScript
本文是阅读小册 「《深入浅出 TypeScript》」 的阅读笔记,对TypeScript感兴趣的同学请继续阅读吧。
chuckQu
2022/08/19
2.9K0
好好玩的螺旋算法No.69
看到一个小伙伴分享这么一个东西,觉得蛮好玩的。先上图。我觉得蛮好玩的,就心心念念想着分享给你们也玩玩,顺便自己实现了一遍。 好,现在开始说是怎么玩的。 首先我观察到的一个科学的知识。我们假设为 siz
大蕉
2018/02/05
6140
好好玩的螺旋算法No.69
Astar算法解决八数码问题Python实现(GUI)
八数码问题:在3*3的方格棋盘上,摆放着1到8这八个数码,有1个方格是空的,其初始状态如图1所示,要求对空格执行空格左移、空格右移、空格上移和空格下移这四个操作使得棋盘从初始状态到目标状态。
里克贝斯
2021/05/21
1.6K0
Astar算法解决八数码问题Python实现(GUI)
链表的应用—贪吃蛇游戏(附项目)
今天我们介绍的项目,是各位大多数人都有玩过,就算没玩过也不可能没听过的一款经典游戏,那就是 贪 吃 蛇 。
张晓衡
2020/05/05
8620
TypeScript: 为什么必须学
或者换一个问题,为什么在项目中,我们要选择使用typescript?也许你还不知道其中缘由,一起跟着我的思路捋一捋。
用户6901603
2020/07/25
1.3K0
TypeScript: 为什么必须学
TypeScript一些知识点
TypeScript 可以添加区域注释,可以让VS Code等编辑器识别为一个代码区域,区域注释使用的是单行注释语法:
kai666666
2024/07/11
1200
TypeScript - 类型声明、枚举、函数、接口
4.自定义类型 当一些复杂类型需要多次使用,可以通过type来自定义类型,便于复用
WahFung
2020/08/22
1.8K0
TypeScript中的高级类型工具类型及关键字
本文主要帮助理解 TypeScript 中的高级类型及工具类型。在实际使用 TypeScript 的开发过程中,得益于这些高级类型于工具类型,我们可以更方便的构建出我们需要的类型。
路过的那只狗
2020/11/13
2.1K0
React + TypeScript 实践
需要添加额外的配置:"allowSyntheticDefaultImports": true
公众号@魔术师卡颂
2021/05/08
6.5K0
BetterScroll源码阅读顺便学习TypeScript
TypeScript已经出来很多年了,现在用的人也越来越多,毋庸置疑,它会越来越流行,但是我还没有用过,因为首先是项目上不用,其次是我对强类型并不敏感,所以纯粹的光看文档看不了几分钟就心不在焉,一直就被耽搁了。
街角小林
2022/06/15
6360
BetterScroll源码阅读顺便学习TypeScript
自己动手写游戏:坦克撕逼大战
START:最近在公交车上无聊,于是用平板看了看下载的坦克大战的开发教程,于是在晚上回家后花了两天模仿了一个,现在来总结一下。
Edison Zhou
2018/08/20
1.5K0
自己动手写游戏:坦克撕逼大战
前端应该掌握的Typescript基础知识
js 是一门动态弱类型语言, 我门可以随意的给变量赋不同类型的值 ts 是拥有类型检查系统的 javascript 超集, 提供了对 es6 的支持, 可以编译成纯 javascript,运行在任何浏览器上。 TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
前端老鸟
2022/03/07
6260
了不起的 TypeScript 入门教程
想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图:
阿宝哥
2020/06/10
7K0
相关推荐
看了《最强大脑》,我决定做这个游戏
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文