基础类型

TS 中的常用基础类型分为两类：

1. JS已有类型：

   • 原始类型：number / string / boolean / null / underfined / symbol

   • 对象类型：数组、对象、函数等

2. TS新增类型：

   • 联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any 等

类型注解

为变量添加类型约束，即约定了什么类型，就只能给变量赋值该类型的值，否则报错。

let age: number = 20
age = 30  	   // 允许此操作
age = '小明'    // 直接报错

原始类型

let age: number = 20
let str: string = '小明'
let isTrue: boolean = false
let a: null = null
let b: undefined = undefined
let s: symbol = Symbol()

数组类型

// 两种书写方式
let arr1: number[] = [1, 3, 5]
let arr2: Array<string> = ['a', 'b', 'c']

// 联合类型
let arr3: (number | string)[] = [1, 3, 5, 'a', 'b']
let arr4: Array<number | string> = [1, 3, 5, 'a', 'b']

类型别名

当同一类型被多次使用时，可以通过 type 关键字给类型起别名，简化该类型的使用。

// 类型别名
type CustomArray = (number | string)[]

let arr: CustomArray = [1, 3, 5, 'a', 'b']
let arr1: CustomArray = [2, 4, 6, 'aa', 'bb']

函数类型

函数类型，实际上指的是 为函数的参数和返回值设置类型。

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

   // 普通函数 声明方式
   function add(num1: number, num2: number): number {
     return num1 + num2
   }
   
   // 函数表达式 声明方式
   const add = (num1: number, num2: number): number => {
     return num1 + num2
   }

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

   // 注意：此方式只适用于 函数表达式
   const add: (num1: number, num2: number) => number = (num1, num2) => {
     return num1 + num2
   }

3. 函数没有返回值（void）：

   // 函数没有返回值，可声明为 void
   function add(name: string): void {
     console.log('hello' + name)
   }

4. 函数可选参数与必选参数（?）：

   // 在 类型注解 中添加 ? 号，表示此参数为可选参数
   function mySlice(start?: number, end?: number) {
     console.log('起始索引:', start, '结束索引：', end)
   }

对象类型

直接使用 {} 来描述对象结构。

// 方式一
let person: { name: string; age: number; sayHi(): void } = {
  name: '小明',
  age: 20,
  sayHi() {}
}

// 方式二
let person: { name: string; age: number; sayHi: () => void } = {
  name: '小明',
  age: 20,
  sayHi() {}
}

接口

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

// 定义接口
interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 使用接口
let person: IPerson = {
  name: '小明',
  age: 20,
  sayHi() {}
}

类型别名（type）和接口（interface）有什么区别？

• 相同点：都可以为对象指定类型；

• 不同点：

  • 接口：只能为对象指定类型；

  • 类型别名：不仅可以为对象指定类型，实际上可以为任意类型指定别名。

接口继承

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

// 常规写法，复用性不高
interface Point2D { 
  x: number, 
  y: number 
}
interface Point3D { 
  x: number, 
  y: number, 
  z: number 
}

// 使用接口继承
interface Point2D { 
  x: number, 
  y: number 
}
// Point3D 继承了 Point2D 的属性，并添加了自己的新属性 z
interface Point3D extends Point2D { 
  z: number 
}

元组

元组类型可以确切的标记出有多少个元素，以及每个元素的类型。

let position: [number, number] = [114, 30]

类型推论

TS 中存在类型推论机制，可以辅助我们确定类型。

// 初始化变量，并声明值时，可以省略类型注解
// let age: number = 20
let age = 20

// 当函数的返回值由参数可以直接推论时，可以省略类型注解
function add(num1: number, num2: number) {
  return num1 + num2 // 数字+数字肯定等于数字类型
}

字面量类型

字面量类型配合联合类型一起使用。

function changeDirect(direct: 'up' | 'down' | 'left' | 'right') {
  console.log(direct)
}

// 传递的参数，只能是定义的 4 个字面量类型
changeDirect('left')

枚举

枚举的功能类似于 字面量类型 + 联合类型 组合的功能，也可以表示一组明确的可选值。

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

function changeDirection(direction: Direction) {}

// 使用枚举（ . 的方式）
changeDirection(Direction.Left)

数字枚举

注意，枚举成员是有值的，默认是从 0 开始自增的数值。我们把枚举成员的值为数字的枚举，称为 数字枚举。

// 为某一个枚举成员设置初始值
enum Direction {
  Up = 10,
  Down, // Down: 11;
  Left, // Left: 12;
  Right // Right: 13
}

// 为每一个枚举成员都设置初始值
enum Direction {
  Up = 2,
  Down = 4,
  Left = 6,
  Right = 8
}

字符串枚举

字符串枚举 只要为一个枚举设置了初始值，则其余的所有都必须设置初始值。

// 字符串枚举
enum Direction {
  Up = 'up',
  Down = 'down',
  Left = 'left',
  Right = 'right'
}