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

TypeScript: 常用的高级类型

作者头像
用户6901603
发布2020-07-23 23:40:57
1.9K0
发布2020-07-23 23:40:57
举报
文章被收录于专栏:不知非攻
UI鉴赏 - 这是我的第 62 篇原创
UI鉴赏 - 这是我的第 62 篇原创

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

1

枚举

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

代码语言:javascript
复制
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

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

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

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

代码语言:javascript
复制
enum Direction {
    Up,
    Down,
    Left,
    Right
}

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

也可以赋值为字符串

代码语言:javascript
复制
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}

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

可以反向映射访问

代码语言:javascript
复制
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}

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

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

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

2

& 交叉类型

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

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

代码语言:javascript
复制
type TouchEvent = React.TouchEvent & React.MouseEvent;
demo.gif
demo.gif

3

| 联合类型

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

代码语言:javascript
复制
let a: number = 10;

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

代码语言:javascript
复制
type Source = 10 | 20 | 30;
let a: Source = 10;

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

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

代码语言:javascript
复制
const attr: number | string = 20;

注意体会 & 与 | 的区别

4

类型保护

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

代码语言:javascript
复制
per: string | string[]

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

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

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

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

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

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

5

索引类型

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

代码语言:javascript
复制
interface Person {
  name: string,
  age: number
}

const key: keyof Person = 'name';

结果

他有点类似于

代码语言:javascript
复制
type Key = 'name' | 'age';

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

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

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

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

函数定义如下:

代码语言:javascript
复制
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 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档