TypeScript 常用类型

TypeScript 常用类型

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。

let age: number = 18
age = 20
age = '20' // 报错

报错提示如下：

原始类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。

let num: number = 18
let str: string = 'hello'
let flag: boolean = false
let n: null = null
let u: undefined = undefined
let s: symbol = Symbol()

对象类型

数组类型

数组的项中不允许出现除指定类型外的其他类型

let arr: number[] = [1, 2, 3] // 推荐写法
let arr: Array<string> = ['1', '2', '3']

当需要指定多个类型时可以使用联合类型：
联合类型使用 | 分隔每个类型。

let arr: (number | string)[] = [1, '2', 3] // arr 数组中的元素只能为 number 或 string
// 不加小括号时，arr 表示 number 类型或者 string 类型的数组
let arr: number | string[] = 1 // ['1']

类型别名

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

type CustomArray = (number | string)[]
let arr: CustomArray = [1, 2, '3', '4']
let arr1: CustomArray = [1, 2, '3', '4']

• 使用 type 关键字类创建类型别名
• 类型别名可以是任意合法的变量名称
• 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

函数类型

函数的类型实际上指的是：函数参数和返回值的类型
为函数指定类型有两种方式：

• 单独指定参数、返回值的类型
• 同时指定参数、返回值的类型

单独指定参数、返回值的类型：

function add(num1: number,num2: number): number {
  return num1 + num2
}
const add = (num1: number, num2: number): number => num1 + num2

同时指定参数、返回值的类型

当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型
注意：这种形式只适用于函数表达式

const add: (num1: number, num2: number) => number = (num1, num2) => num1 + num2 

void

如果函数没有返回值，那么，函数返回值为：void

function greet(name: string): void {
  console.log('Hello', name)
}

可选参数

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给参数指定类型时，就用到了可选参数了。
可选参数：在可传可不传的参数名称后面添加**?**（问好）
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数。

function mySlice(start?: number, end?: number): void {
  console.log('起始索引：',start, '结束索引：', end)
}

对象类型

JS 中的对象由属性和方法构成，而 TS 中对象的类型就是在描述对象的结构（有什么类型的属性和方法）。
对象类型的写法：

// 写法1
let person: {name: string, age: number, sayHi(): void} = {
  name: 'mike',
  age: 20,
  sayHi() {}
}

// 写法2
let person: {
  name: string
  age: number
  sayHi: (name: string) => void
} = {
  name: 'mike',
  age: 20,
  sayHi(name) {}
}

• 直接使用 {} 来描述对象结构。属性采用属性名：类型的形式；方法采用方法名(): 返回值类型的形式
• 如果方法有参数，就在方法名后面的小括号中指定参数类型（比如：greet(name: string): void）。
• 在一行代码中指定对象的多个属性类型时，使用**;（分号）或者,（逗号）**来分隔。
• 如果一行代码只指定一个属性类型（通过换行来分隔多个属性类型），可以去掉;（分号）和,（逗号）。
• 方法的类型也可以使用箭头函数形式（比如：{sayHi: () => void}）。

可选参数

对象的属性或方法，也可以是可选的，此时就用到可选属性了。
可选属性的语法和函数可选参数的语法一致，都是用**?（问号）**来表示。

function myAxios(config: {url: string, method?: string}) {}

接口

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

• 使用 interface 关键字来声明接口。
• 接口名称（比如，此处的 IPerson），可以是任意合法的变量名称。
• 声明接口后，直接使用接口名称作为变量的类型。

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

let person: IPerson = {
  name: 'mike',
  age: 20,
  sayHi() {}
}

interface（接口）和 type（类型别名）的对比：

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

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

type IPerson = {
  name: string
  age: number
  sayHi(): void
}  

type NumStr = number | string

继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。

• 使用 extends （继承）关键字实现接口的继承
• 继承后，继承接口就有了被继承接口的所有属性和方法

interface Point2D {
  x: number
  y: number
}

interface Point3D extends Point2D {
  z: number
}

let point: Point3D = {
  x: 1,
  y: 1,
  z: 1
}

元组

元组（Tuple）是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型。

• 元组类型可以确切地标记处有多少个元素，以及每个元素的类型

let position: [number, number] = [1, 2]

类型推论

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

• 声明变量并初始化时
• 决定函数返回值时
  
  
  注意：以上两种情况下，类型注解可以省略不写
  推荐：能省略类型注解的地方就省略，充分利用 TS 类型推论的能力，提升开发效率。
  技巧：如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型。

字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。
使用模式： 字面量类型配合联合类型一起使用。
使用场景： 用来表示一组明确的可选值列表。
优点：相比于 string 类型，使用字面量类型更加精确、严谨

function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {}
changeDirection('up')

枚举

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

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function changeDirection(direction: Direction) {}
changeDirection(Direction.Up)

• 使用 enum 关键字定义枚举
• 约定枚举名称、枚举中的值以大写字母开头
• 枚举中的多个值之间通过 ，（逗号）分隔
• 定义好枚举后，直接使用枚举名称作为类型注解
  注意：形参 direction 的 类型为枚举 Direction ，那么，实参的 值就应该是枚举 Direction 成员的任意一个。
  访问枚举成员：

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function changeDirection(direction: Direction) {}
changeDirection(Direction.Up)

类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员。

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

//给枚举中的成员初始化值
enum Direction {
  Up = 10,
  Down, // 11
  Left, // 12
  Right // 13
}

enum Direction {
  Up = 10,
  Down = 12,
  Left = 16,
  Right = 20
}

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

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

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


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

any 类型

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

以上操作都不会有任何类型错误提示，即使可能存在错误！
尽可能的避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型！
其他隐式具有 any 类型的情况：

• 声明变量不提供类型也不提供默认值
• 函数参数不加类型
  注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型。

typeof

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

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

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

let p = {x: 1, y: 10}
function formatPoint(point: {x: number, y: number}) {}

function formatPoint(point: typeof p) {}

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