【Typescript专题】之类型进阶

ゝ一世哀愁。 2022-09-02 13:57 227阅读 0赞

# 【Typescript专题】之类型进阶 #

> 本篇文章是《Typescript 专题》第一篇，本篇文章主要聊一聊基本类型相关的扩展，毕竟随着文章的加深，我在阅读官方文档的时候经常会见到陌生的声明和“单词”，感觉有必要跟大家分享一下，下一篇文章，我们主要聊一聊Ts的类型断言。

系列文章，收藏不走丢哦

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]

## 一、类型别名（type） ##

类型别名用来给一个类型起个新名字。例如：

type isNumber = number;
    const num: isNumber = 1;

上面的例子没有任何问题，当然也是一句“废话”，那么类型别名又是为什么创造的呢？来看下面的例子：

type Name = string; // 字符串
    type NameResolver = () => string; // 函数
    type NameOrResolver = Name | NameResolver; // 联合类型
    
    function getName(n: NameOrResolver): Name { 
      if (typeof n === "string") { 
        return n;
      } else { 
        return n();
      }
    }

别名常用于联合类型，如：

type ID = number | string;
    const id1: ID = 123;
    const id2: ID = "wpsd";

## 二、字符串字面量类型 ##

字符串字面量类型用来约束取值**只能是**某几个字符串中的一个。

type EventNames = "click" | "scroll" | "mousemove";
    function handleEvent(ele: Element, event: EventNames) { 
      // do something
    }
    
    handleEvent(document.getElementById("hello"), "scroll"); // 没问题
    handleEvent(document.getElementById("world"), "onmouseout"); // 报错，event 不能为 'onmouseout'

上例中，我们使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种。

在看过第一小节后，你可能会有疑问，字符串字面亮和类型别名非常相似，区别就在于一个是限制的是类型，一个限制的是具体的值。

## 三、元祖 ##

相信对于大家来说（包括我）都对这个词有些陌生，我们仍然通过具体的例子来形成概念

定义一对值分别为 string 和 number 的元组：

let yuguang1: [string, number] = ["yuguang", 25];
    
    let yuguang2!: [string, number];
    yuguang2 = ["a", 1];
    yuguang2[0] = "yuguang";
    yuguang2[1] = 25;
    console.log(yuguang2); // ['yuguang', 25]

**注意 1：** 当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。

let yuguang: [string, number];
    yuguang = ["yuguang"]; // 不能将类型“[string]”分配给类型“[string, number]”。源具有 1 个元素，但目标需要 2 个

**注意 2：** 添加的元素需要以元组的每个类型组成的联合类型检查：

let yuguang: [string, number];
    yuguang = ["yuguang", 100];
    yuguang.push({ });
    // 类型“{}”的参数不能赋给类型“string | number”的参数。
    // 不能将类型“{}”分配给类型“number”

**注意 3：** 元组和联合类型在校验是是相似的，但两者还是有区别的

## 四、枚举 ##

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。这和上一节字面量很想子

枚举使用`enum`关键字来定义(新关键词～)

enum Days { 
      Sun,
      Mon,
      Tue,
      Wed,
      Thu,
      Fri,
      Sat,
    }

枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：

enum Days { 
      Sun,
      Mon,
      Tue,
      Wed,
      Thu,
      Fri,
      Sat,
    }
    
    console.log(Days["Sun"] === 0); // true
    console.log(Days["Mon"] === 1); // true
    console.log(Days["Tue"] === 2); // true
    console.log(Days["Sat"] === 6); // true
    
    console.log(Days[0] === "Sun"); // true
    console.log(Days[1] === "Mon"); // true
    console.log(Days[2] === "Tue"); // true
    console.log(Days[6] === "Sat"); // true

如图，上面的例子会被编译为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]

真的是从 0 开始递增吗？我们看下面的编译示例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 1]

上图中，未手动赋值的枚举项会接着上一个枚举项递增。而且你会发现，Sun 和 Wed 存储的都是 7，并且没有报错～

enum Days { 
      Sun = 3,
      Mon = 1,
      Tue,
      Wed,
      Thu,
      Fri,
      Sat,
    }
    
    console.log(Days["Sun"] === 3); // true
    console.log(Days["Wed"] === 3); // true
    console.log(Days[3] === "Sun"); // false
    console.log(Days[3] === "Wed"); // true

上面的例子中，递增到 3 的时候与前面的 Sun 的取值重复了，但是 TypeScript 并没有报错，导致`Days[3]`的值先是"Sun"，而后又被"Wed"覆盖了。编译的结果是：

var Days;
    (function(Days) { 
      Days[(Days["Sun"] = 3)] = "Sun";
      Days[(Days["Mon"] = 1)] = "Mon";
      Days[(Days["Tue"] = 2)] = "Tue";
      Days[(Days["Wed"] = 3)] = "Wed";
      Days[(Days["Thu"] = 4)] = "Thu";
      Days[(Days["Fri"] = 5)] = "Fri";
      Days[(Days["Sat"] = 6)] = "Sat";
    })(Days || (Days = { }));

好了，有关枚举我们就了解这么多，其实官方文档上介绍枚举用了很大的篇幅，在未来我们会随着知识的深入一点点的渗透给大家（准确的说就是我还没看懂哈哈～）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]

## 写在最后 ##

本篇文章是《Typescript 专题》第一篇，本篇文章主要聊一聊基本类型相关的扩展，毕竟随着文章的加深，我在阅读官方文档的时候经常会见到陌生的声明和“单词”，感觉有必要跟大家分享一下，下一篇文章，我们主要聊一聊Ts的类型断言。

系列文章传送门：

1.  [【Typescript 入门手册】之基本类型在 TypeScript 中的应用][Typescript _ TypeScript]
2.  [【Typescript 入门手册】之引用类型在 TypeScript 中的应用][Typescript _ TypeScript 1]
3.  [【Typescript 入门手册】之函数类型在 TypeScript 中的应用][Typescript _ TypeScript 2]
4.  本文

### 关于我 ###

*  花名：余光
 *  WX：j565017805
 *  邮箱：webbj97@163.com

### 其他沉淀 ###

*  [Github: Js 版 LeetCode 题解][Github_ Js _ LeetCode]
 *  [前端进阶笔记][Link 1]
 *  [CSDN 博客汇总][CSDN]

![blog-bottom.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/f9fc2ae1c5df4dccb3820ef04c26d382.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70]: /images/20220829/3fbadfd5f1be4fa48dbdf5ea9c49c36b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70 1]: /images/20220829/b0151a25abc2431bb6c8b6debf98840c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/5089b4105c8840eaa37b044eea5fd656.png
[Typescript _ TypeScript]: https://yuguang.blog.csdn.net/article/details/119137707
[Typescript _ TypeScript 1]: https://yuguang.blog.csdn.net/article/details/119220029
[Typescript _ TypeScript 2]: https://yuguang.blog.csdn.net/article/details/119333719
[Github_ Js _ LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 1]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[blog-bottom.gif]: /images/20220829/c7ef2b0b69424e8faad9818077dd7cd3.png