TypeScript学习笔记（三）：常用基础类型之 TS 新增类型

前言

TypeScript 常用基础类型可以细分为两类：

JS 已有类型
原始类型：number/string/boolean/null/undefined/symbol
对象类型：object(包括，数组、对象、函数等对象)。

TS 新增类型
联合类型、自定义类型(类型别名)、接口、元组、字面量类型、举、void、any等

一、TypeScript 自定义类型(类型别名)

类型别名(自定义类型)：为任意类型起别名
使用场景：当同一类型(复杂)被多次使用时，可以通过类型别名，简化该类型的使用。

type CustomArray = (number | string)[]

let arr1: CustomArray = ['a', 1, 2, 'c']
let arr2: CustomArray = [5, 8,'x', 'y']

解释：
·  使用 type 关键字来创建类型别名。
·  类型别名(比如，此处的CustomArray)，可以是任意合法的变量名称。
·  创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

二、TypeScript 接口

1、TypeScript 接口定义

当一个对象类型被多次使用时，一般会使用接口(interface)来描述对象的类型，达到复用的目的。

// 接口
interface MyPerson {
    name: string
    age: number
    sayHi(): void
    greet: (name: string) => void
}

let person: MyPerson = {
    name: 'luhuohuo',
    age: 22,
    sayHi() {},
    greet: (name) => {}
}

解释:
·  使用 interface 关键字来定义接口。
·  接口名称(比如，此处的 MyPerson)，可以是任意合法的变量名称。
·  定义接口后，直接使用接口名称作为变量的类型。
·  因为每一行只有一个属性类型，因此，属性类型后没有 ; (分号)。

2、interface(接口)和 type(类型别名)的区别：

相同点：都可以给对象指定类型。
不同点：
·  接口，只能为对象指定类型
·  类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

// 接口
// interface MyPerson {
//     name: string
//     age: number
//     sayHi(): void
//     greet: (name: string) => void
// }

// 类型别名
type MyPerson = {
    name: string
    age: number
    sayHi(): void
    greet: (name: string) => void
}

let person: MyPerson = {
    name: 'luhuohuo',
    age: 22,
    sayHi() {},
    greet: (name) => {}
}

// 类型别名
type NumStr = number | string

3、interface (接口)的继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。
比如，这两个接口都有x、y两个属性，重复写两次，可以，但很繁琐。

interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }

更好的方式

interface Point2D { x: number; y: number }
// interface Point3D { x: number; y: number; z: number }

// 使用 extends(继承) 实现复用
interface Point3D extends Point2D { z: number }

let p3: Point3D = {
    x: 1,
    y: 1,
    z: 0
}

解释:
·  使用 extends (继承)关键字实现了接口 Point3D 继承 Point2D。
·  继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)。

三、TypeScript 元组

场景:在地图中，使用经纬度坐标来标记位置信息。可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。

let position: number[] = [39.5427, 116.2317]

使用 numberl]的缺点：不严谨，因为该类型的数组中可以出现任意多个数字。
更好的方式：元组(Tuple)。
元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型。

// 使用 Tuple 元组，定义几个元素就只能几个元素，且每个元素的类型必须与定义的一致
let position: [number, number] = [39.5427, 116.2317]

解释:
·  元组类型可以确切地标记出有多少个元素，以及每个元素的类型1.
·  该示例中，元素有两个元素，每个元素的类型都是number。

四、TypeScript 类型推论

在 TS 中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型。
换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写!

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

1、声明变量并初始化时。

// 声明遍历并立即初始化值，此时，可以省略类型注解
let age = 18

// 注意：如果声明变量但没有立即初始化值，此时，还必须手动添加类型注解
let a: number

a = 20

2、决定函数返回值时。

// 函数省略返回值类型注解，VSCode 提示返回值类型 function add3(num1: number, num2: number): number
function add3(num1: number, num2: number) {
    return num1 + num2
}

add(1, 3)

注意：这两种情况下，类型注解可以省略不写!
推荐：能省略类型注解的地方就省略(偷懒，充分利用TS类型推论的能力，提升开发效率)。
技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型，

五、TypeScript 类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型

// html
<a href="https://www.baidu.com/" id="link">百度一下，你就知道</a>

// typescript 类型推断 aLink 的类型为 const aLink: HTMLElement | null
const aLink = document.getElementById('link')

// 但 HTMLElement 类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性。
aLink.href

getElementByld 方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性。
因此，这个类型太宽泛(不具体)，无法操作 href 等 a 标签特有的属性或方法。

解决方式：这种情况下就需要使用类型断言指定更加具体的类型。

// html
<a href="https://www.baidu.com/" id="link">百度一下，你就知道</a>

// typescript 类型推断 aLink 的类型为 const aLink: HTMLElement | null
// const aLink = document.getElementById('link')

// 使用类型断言指定 aLink 的类型为 HTMLAnchorElement
const aLink = document.getElementById('link') as HTMLAnchorElement

// 此时，aLink 就能访问 a 标签的 href 等属性了
aLink.href

解释:
·  使用 as 关键字实现类型断言。
·  关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement 是 HTMLElement 的子类型)。·  通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了。

另一种语法，使用<>语法（不推荐，react 中跟 jsx 语法冲突不能用）:

// ...

// 使用类型断言指定 aLink 的类型为 HTMLAnchorElement
// const aLink = document.getElementById('link') as HTMLAnchorElement

// 另一种语法，使用<>语法（不推荐，react 中跟 jsx 语法冲突不能用）
const aLink = <HTMLAnchorElement>document.getElementById('link')

// ...

查看DOM元素类型技巧：在浏览器控制台 Elements 标签页选中 DOM 元素，切换到 Console 标签页，通过 console.dir($0) 打印 DOM 元素，在属性列表的最后面，即可看到该元素的类型。

六、TypeScript 字面量类型

以下代码，通过 TS 类型推论机制，可以得到答案：
·  变量 str1 的类型为：string。
·  变量 str2 的类型为：’Hello TS’。

// 通过 TS 类型推论得出 let str1: string
let str1 = 'Hello TS'

// 通过 TS 类型推论得出 const str2: 'Hello TS'
const str2 = 'Hello TS'

解释:
·  str1 是一个变量(let)，它的值可以是任意字符串，所以类型为：string。
·  str2 是一个常量(const)，它的值不能变化只能是 ‘HelloTS’，所以，它的类型为：’HelloTS’。

注意:
·  此处的‘Hello TS’，就是一个字面量类型。也就是说某个特定的字符串也可以作为TS 中的类型。
·  除字符串外，任意的JS 字面量(比如，对象、数字等)都可以作为类型使用。

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

// 字面量类型
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
    // ...
}

changeDirection('up') // 参数只能是 'up' | 'down' | 'left' | 'right' 其中之一

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

七、TypeScript 枚举

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

// 枚举定义
enum Direction {
    Up,
    Down,
    Left, 
    right
}

function changeDireaction(direction: Direction) {
    // ...
}

解释：
·  使用 enum 关键字定义枚举。
·  约定枚举名称、枚举中的值以大写字母开头。
·  枚举中的多个值之间通过，(逗号)分隔。
·  定义好枚举后，直接使用枚举名称作为类型注解。

注意：形参 direction 的类型为枚举 Direction，那么，实参的值就应该是枚举 Direction 成员的任意一个。
访问枚举成员：

// 通过点(.)语法访问枚举的成员
changeDireaction(Direction.Down)
changeDireaction(Direction.Up)

解释：类似于IS中的对象，直接通过点(.)语法访问枚举的成员。

注意：枚举成员是有值的，默认为：从 0 开始自增的数值。
我们把，枚举成员的值为数字的枚举，称为：数字枚举。
当然，也可以给枚举中的成员初始化值。

// 在 vscode 中可以看到枚举成员的值，从 0 开始自增的数值
enum Direction {
    Up, // (enum member) Direction.Up = 0
    Down, // (enum member) Direction.Up = 1
    Left,  // (enum member) Direction.Up = 2
    right // (enum member) Direction.Up = 3
}

// 如果给某个成员定义了值，前面的成员从 0 开始自增，后面的成员从定义的值开始自增
enum Direction1 {
    up, // (enum member) Direction.Up = 0
    Down = 10, // (enum member) Direction.Up = 11
    Left,  // (enum member) Direction.Up = 12
    right // (enum member) Direction.Up = 13
}

// 完全自定义值
enum Direction2 {
    up = 3, // (enum member) Direction.Up = 3
    Down = 10, // (enum member) Direction.Up = 10
    Left = 15,  // (enum member) Direction.Up = 15
    right = 20 // (enum member) Direction.Up = 20
}

字符串枚举：枚举成员的值是字符串。

// 字符串枚举
enum Direction3 {
    up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    right = 'RIGHT'
}

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

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

// 字符串枚举
enum Direction3 {
    UP = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    right = 'RIGHT'
}

// tsc 编译成js后
var Direction3;
(function (Direction3) {
    Direction3["UP"] = "UP";
    Direction3["Down"] = "DOWN";
    Direction3["Left"] = "LEFT";
    Direction3["right"] = "RIGHT";
})(Direction3 || (Direction3 = {}));

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

八、TypeScript any类型

原则：不推荐使用 any! 这会让TypeScript变为“AnyScript”(失去TS 类型保护的优势)。
因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示。

let obj: any = { x: 0 }

// 访问不存在的属性或者赋值
obj.aaa
obj.aaa = 10

// 当作函数调用
obj()

// 赋值给其它类型的变量
const n: number = obj

解释：
·  以上操作都不会有任何类型错误提示，即使可能存在错误!
·  尽可能的避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型!
·  其他隐式具有 any 类型的情况：
    ·  声明变量不提供类型也不提供默认值。
    ·  函数参数不加类型。
·  注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型!

九、typeof

众所周知，JS中提供了typeof操作符，用来在JS 中获取数据的类型。

console.log(typeof 'Hello TS') // string

实际上，TS也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型(类型查询)。
使用场景：根据已有变量的值，获取该值的类型，来简化类型书写。

let p = { x: 1, y: 2 }

// 查询变量类型
function formatPoint(point: typeof p) {} // p: { x: number; y: number; }
// function formatPoint(point: { x: number, y: number }) {}
formatPoint({ x: 1, y: 100 })

// 查询对象属性的类型
let num: typeof p.x // (property) x: number

function add4(num1: number, num2: number) {
    return num1 + num2
}

//let ret: typeof add4(1, 2) // 不能查询函数调用形式的类型

解释：
·  使用 typeof 操作符来获取变量p的类型，结果与第一种(对象字面量形式的类型)相同。
·  typeof 出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文(区别于JS 代码)
·  注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型(比如，函数调用的类型)。