TS系列（3）：常用类型（详细）

你好，我是沐爸，欢迎点赞、收藏、评论和关注。

TS系列（1）：TS是什么？如何使用？

TS系列（2）：类型声明、类型推断和类型总览

接着前两天的聊，说下 TypeScript 的常用类型，这是重点。

七、常用类型

1.any

any的含义是：任意类型，一旦将变量类型限制为 any，那就意味着放弃了对该变量的类型检查。

// 明确的表示a的类型是 any 【显式的any】
let a: any
// 以下对a的赋值，均无警告
a = 100
a = 'hello'
a = false

// 没有明确的表示b的类型是any，但TS主动推断出来b是any 【隐式地any】
let b
// 以下对b的赋值，均无警告
b = 100
b = 'hello'
b = false

注意点：any类型的变量，可以赋值给任意类型的变量

let c: any
c = 9

let x: string
x = c // 无警告

2.unknown

unknown的含义是未知类型。

1.unknown可以理解为一个类型安全的any，适用于不确定数据的具体类型。

// 设置a的类型为unknown
let a: unknown

// 以下对a的赋值，均正常
a = 100
a = 'hello'
a = false

// 设置x的数据类型为string
let x: string
x = a // Type 'unknown' is not assignable to type 'string'

2.unknown会强制开发者在使用之前进行类型检查，从而提供更强的类型安全性。

// 设置a的类型为unknown
let a: unknown
a = 'hello'

// 第一种方式：加类型判断
if (typeof a === 'string') {
  x = a
}

// 第二种方式：加断言
x = a as string

// 第三种方式：加断言
x = <string>a

3.读取any类型数据的任何属性都不会报错，而unknown正好与之相反。

let str1: string
str1 = 'hello'
str1.toUpperCase() // 无警告

let str2: any
str2 = 'hello'
str2.toUpperCase() // 无警告

let str3: unknown
str3 = 'hello'
str3.toUpperCase() // 'str3' is of type 'unknown'

// 使用断言强制指定str3的类型为string
(str3 as string).toUpperCase() // 无警告

3.never

never的含义是：任何值都不是，简而言之就是不能有值，undefined、null、''、0都不行！

1.几乎不用never去直接限制变量，因为没有意义，例如：

// 指定a的类型为never，那就意味着a以后不能存在任何的数据了
let a: never

// 以下对a的赋值都会有警告
a = 1
a = true
a = undefined
a = null

2.never一般是TypeScript主动推断出来的，例如：

// 指定a的类型为string
let a: string
a = 'hello'

if (typeof a === 'string') {
  console.log(a.toUpperCase())
} else {
  console.log(a) // TS会推断出此处的a是never，因为没有任何一个值符合此处的逻辑
}

3.never也可用于限制函数的返回值

// 限制throwError函数不需要有任何返回值，任何值都不行，包括undefined、null
function throwError(str: string): never {
  throw new Error('程序异常：' + str)
}

4.void

1.void通常用于函数返回值声明，含义：【函数返回值为空，调用者不应该依赖其返回值进行任何操作】

function logMessage(msg: string): void {
  console.log(msg)
}
logMessage('hello')

注意：编码者没有编写return去指定函数的返回值，所以logMessage函数是没有显式返回值的，但会有一个隐式返回值，就是undefined，即：虽然函数返回类型为void，但也是可以接受undefined的，简单记：undefined是void可以接受的一种"空"。

2.以下写法均符合规范

function logMessage(msg: string): void {
  console.log(msg)
}

function logMessage(msg: string): void {
  console.log(msg)
  return
}

function logMessage(msg: string): void {
  console.log(msg)
  return undefined
}

3.那限制函数返回值时，是不是undefined和void就没有区别呢？----有区别。因为还有这句话：【返回值类型为void的函数，调用者不应该依赖其返回值进行任何操作】对比下面两段代码：

function logMessage(msg: string): void {
  console.log(msg)
}

let result = logMessage('hello')

if (result) { // An expression of type 'void' cannot be tested for truthiness
  console.log('logMessage有返回值')
}

function logMessage(msg: string): undefined {
  console.log(msg)
}

let result = logMessage('hello')

if (result) { // 这里无警告
  console.log('logMessage有返回值')
}

理解 void 与 undefined

• void是一个广泛的概念，用来表达"空"，而undefined则是这种"空"的具体实现之一。
• 因此可以说undefined是void能接受的"空"状态的一种具体形式。
• 换句话说，void包含undefined，但void表达的语义超越了单纯的undefined，它是一种意图上的约定，而不仅仅是特定值的限制。

总结：若函数返回类型void，那么：

• 从语法上讲：函数可以返回undefined，至于显式返回，还是显式返回，都无所谓！
• 从语义上讲：函数调用这不应关系函数的返回值，也不应该依赖返回值进行任何操作！即使返回了undefined值。

5.object

关于object与Object，直接说结论：实际开发中用的较少，因为范围太大了。

object（小写）

object的含义是：所有非原始类型，可存储：对象、函数、数组等，由于限制的范围比较宽泛，在实际开发中使用的相对较少。

let a: object // a的值可以是任何非原始类型，包括对象、函数、数组等。

// 以下代码是将非原始类型赋值给a，所以均符合要求
a = {}
a = {name: '张三'}
a = [1, 2, 3]
a = function() {}
a = new String('hello')
class Person {}
a = new Person()

// 以下代码是将原始类型赋值给a，会警告
a = 1
a = true
a = 'hello'
a = null
a = undefined

Object（大写）

• 官方描述：所有可以调用Object方法的类型。
• 简单记忆：除了undefined和null的任何值。
• 由于限制的返回实在太大了！所以实际开发中使用频率极低。

let a: Object // a的值必须是Object的实例对象（出去undefined和null的任何值）

// 以下代码均无警告，因为赋值给a的值，都是Object的实例对象
a = {}
a = {name: '张三'}
a = [1, 2, 3]
a = function() {}
a = new String('hello')
class Person {}
a = new Person()
a = 1
a = true
a = 'hello'

// 以下代码均有警告
a = null // Type 'null' is not assignable to type 'Object'
a = undefined // Type 'undefined' is not assignable to type 'Object'

声明对象类型

1.实际开发中，限制一般对象，通常使用以下形式

// 限制person对象必须有name属性，age为可选属性
let person1: { name: string, age?: number }

// 含义同上，也能用分号做分隔
let person2: { name: string; age?: number }

// 含义同上，也能用换行做分隔
let person3: {
  name: string
  age?: number
}

// 如下赋值均可以
person1 = { name: '张三', age: 18}
person2 = { name: '李四' }
person3 = { name: '王五' }

// 如下赋值不合法
person3 = { name: '王五', gender: '男' } // Object literal may only specify known properties, and 'gender' does not exist in type '{ name: string; age?: number | undefined; }'

2.索引签名：允许定义对象可以具有任意数量的属性，这些属性的键和类型是可变的，常用于描述类型不确定的属性，（具有动态属性的对象）。

// 限制person对象必须具有name属性，可选age属性是数字，同时可以具有任意数量、任意类型的属性
let person {
  name: string
  age?: number
  [key: string]: any // 索引签名，完全可以不用key这个单词，换成其他的也可以
}

// 赋值合法
person = {
  name: '张三',
  age: 20,
  gender: '男'
}

声明函数类型

let count: (a: number, b: number) => number

count = function (x, y) {
  return x + y
}

count = (x, y) => {
  return x + y
}

备注：

• TypeScript 中的 => 在函数类型声明时表示函数类型，描述其参数类型和返回类型。
• JavaScript 中的 => 是一种定义函数的语法，是具体的函数实现。
• 函数类型声明还可以使用：接口、自定义类型等方式，下文中会详细讲解。

声明数组类型

let arr1: number[]
let arr2: Array<number> // 泛型

arr1 = [1, 2, 3]
arr2 = [4, 5, 6]

6.tuple

元组（tuple）是一种特殊的数组类型，存储一组固定数量和固定类型的元素。元组用于精确描述一组值的类型，?表示可选元素。

// 第一个元素必须是 string 类型，第二个元素必须是 number 类型
let arr1: [string, number]

// 第一个元素必须是 number 类型，第二个元素时可选的，如果存在，必须是 boolean 类型
let arr2: [number, boolean?]

// 第一个元素必须是 number 类型，后面的元素可以是任意数量的 string 类型
let arr3: [number, ...string[]]

// 可以赋值
arr1 = ['hello', 123]
arr2 = [100, false]
arr2 = [200]
arr3 = [100, 'a', 'b']
arr3 = [100]

// 不可以赋值
arr1 = ['hello', 123, false]

7.enum

枚举（enum）可以定义一组命名常量，它能增强代码的可读性，也让代码更好维护。

如下代码的功能是：根据调用walk时传入的不同参数，执行不同的逻辑，存在的问题是调用walk时传参时没有任何提示，开发者很容易写错字符串内容；并且用于判断逻辑的up、down、left、right是连续且相关的一组值，那此时就特别适合使用枚举（enum）。

function walk(str: string) {
  if (str === 'up') {
    console.log('向上走')
  } else if (str === 'down') {
    console.log('向下走')
  } else if (str === 'left') {
    console.log('向左走')
  } else if (str === 'right') {
    console.log('向右走')
  } else {
    console.log('未知方向')
  }
}

walk('up')
walk('down')
walk('left')
walk('right')

1.数字枚举

数字枚举是一种最常见的枚举类型，其成员的值会自动递增，且数字枚举还具备反响映射的特点，在下面代码的打印中，不难发现：可以通过值来获取对应的枚举成员名称。

// 定义一个描述【上下左右】方向的枚举Direction
enum Direction {
  Up,
  Down,
  Left,
  Right
}

console.log(Direction)
//   {
//     '0': 'Up',
//     '1': 'Down',
//     '2': 'Left',
//     '3': 'Right',
//     Up: 0,
//     Down: 1,
//     Left: 2,
//     Right: 3
//   }

// 反向映射
console.log(Direction.Up) // 0
console.log(Direction[0]) // Up

// 此代码报错，枚举中的属性是只读的
Direction.Up = 'shang' // Cannot assign to 'Up' because it is a read-only property

也可以指定枚举成员的初始值，其后的成员值会自动自增。

enum Direction {
  Up = 6,
  Down,
  Left,
  Right
}

console.log(Direction.Up) // 6
console.log(Direction.Down) // 7

使用数字枚举完成刚才walk函数中的逻辑，此时我们发现：代码更加直观易读，而且类型安全，同时也易于维护。

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function walk(n: Direction) {
  if (n === Direction.Up) {
    console.log('向上走')
  } else if (n === Direction.Down) {
    console.log('向下走')
  } else if (n === Direction.Left) {
    console.log('向左走')
  } else if (n === Direction.Right) {
    console.log('向右走')
  } else {
    console.log('未知方向')
  }
}

walk(Direction.Up) // 向上走
walk(Direction.Down) // 向下走

2.字符串枚举

枚举成员的值是字符串。

enum Direction {
  Up = 'up',
  Down = 'down',
  Left = 'left',
  Right = 'right'
}

let dir: Direction = Direction.Up
console.log(dir) // 'up'

3.常量枚举

官方描述：常量枚举是一种特殊枚举类型，它使用 const关键字定义，在编译时会被内联，避免生成一些额外的代码。

使用普通枚举的 TypeScript 代码如下：

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let x = Direction.Up

编译后生成的 JavaScript 代码量较大：

'use strict';

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
var x = Direction.Up;

使用常量枚举的 TypeScript 代码如下：

const enum Direction {
  Up,
  Down,
  Left,
  Right
}

let x = Direction.Up

编译后生成的 JavaScript 代码量较小：

'use strict';

var x = 0 /* Direction.Up */;

8.type

type可以为任意类型创建别名，让代码更简洁、可读性更强，同时能更方便地进行复用和扩展。

1.基本用法

类型别名使用type关键字定义，type后跟类型名称，例如下面代码中 num 是类型别名。

type num = number

let price: num
price = 10

2.联合类型

联合类型是一种高级类型，它表示一个值可以是几种不同类型之一。

type Status = number | string
type Gender = '男' | '女'

function printStatus(status: Status) {
  console.log(status)
}

function logGender(str: Gender) {
  console.log(str)
}

printStatus(404)
printStatus('200')
printStatus('501')

logGender('男')
logGender('女')

3.交叉类型

交叉类型允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。

// 面积
type Area = {
  height: number // 高
  width: number // 宽
}

// 地址
type Address = {
  num: number // 楼号
  cell: number // 单元号
  room: string // 房间号
}

type House = Area & Address

const house: House = {
  height: 180,
  width: 75,
  num: 6,
  cell: 3,
  room: '702'
}

9.一个特殊情况

代码段1（正常）

在函数定义时，限制函数返回值为void，那么函数的返回值就必须是空。

function demo(): void {
  // 返回 undefined 合法
  return undefined

  // 以下返回均不合法
  return 100
  return false
  return null
  return []
}

代码段2（特殊）

使用类型声明限制函数返回值为void时，TypeScript 并不会严格要求函数返回空。

type LogFunc = () => void

const f1: LogFunc = () => {
  return 100 // 允许返回非空值
}

const f2: LogFunc = () => 200 // 允许返回非空值

const f3: LogFunc = function() {
  return 300 // 允许返回非空值
}

为什么会这样？

是为了确保如下代码成立，我们知道Array.prototype.push的返回一个数字，而Array.prototype.forEach方法期望其回调的返回类型是void

const arr = [1, 2, 3]
const arr2 = [0]

arr.forEach((el) => arr2.push(el))

官方文档的说明：TypeScript: Documentation - More on Functions

好了，分享结束，谢谢点赞，下期再见。