TypeScript学习笔记（六）

小徐今天学习了吗
102 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章TypeScript学习笔记（五）中，我们学习了TypeScript的相关知识点，包括对象可选属性、使用类型别名、接口、interface和type对比、接口继承、元组类型等相关知识点。在本篇文章中，我们将学习TypeScript的相关知识点，包括类型推论、字面量类型、枚举类型等内容。

类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型。换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写。推荐：能省略类型注解的地方就省略，充分利用TS类型推论的能力，提升开发效率。如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型。

发生类型推论的 2 种常见场景:

  1. 声明变量并初始化时
  2. 决定函数返回值时
// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

字面量类型

思考以下代码，两个变量的类型分别是什么?

let str1 = 'Hello TS'
const str2 = 'Hello TS'

通过 TS 类型推论机制，可以得到答案：

  1. 变量 str1 的类型为：string
  2. 变量 str2 的类型为：'Hello TS'

原因：

  1. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
  2. str2 是一个常量(const)，它的值不能变化只能是 'Hello TS'，所以，它的类型为:'Hello TS'。

需要注意的是，此处的 'Hello TS'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型。

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用。字面量：{ name: 'jack' } [] 18 20 'abc' false function() {}。

字面量类型配合联合类型一起使用。用来表示一组明确的可选值列表。比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个。

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

参数 direction 的值只能是 up/down/left/right 中的任意一个。相比于 string 类型，使用字面量类型更加精确、严谨。

枚举类型

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个。

用法：

  • 使用 enum 关键字定义枚举
  • 约定枚举名称以大写字母开头
  • 枚举中的多个值之间通过 ,（逗号）分隔
  • 定义好枚举后，直接使用枚举名称作为类型注解
// 创建枚举
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

数字枚举

我们把枚举成员作为了函数的实参，它的值是什么呢?通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0。枚举成员是有值的，默认为：从 0 开始自增的数值。我们把枚举成员的值为数字的枚举，称为数字枚举。当然，也可以给枚举中的成员初始化值。

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

字符串枚举

字符串枚举：枚举成员的值是字符串。需要注意的是字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值。

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

枚举实现原理

枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一。因为其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)。也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码。

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// 会被编译为以下 JS 代码：
var Direction;

(function (Direction) {
  Direction['Up'] = 'UP'
  Direction['Down'] = 'DOWN'
  Direction['Left'] = 'LEFT'
  Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})

枚举与前面讲到的字面量类型+联合类型组合的功能类似，都用来表示一组明确的可选值列表。一般情况下，推荐使用字面量类型+联合类型组合的方式，因为相比枚举，这种方式更加直观、简洁、高效。

avatar
文章
阅读
粉丝