TypeScript类型--泛型类型--泛型约束

一、泛型概述

泛型（Generics）可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、自定义类型、接口等类型中

创建一个 id 函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）

// 比如，该函数传入什么数值，就返回什么数值
function id(value: number): number { return value }

// res => 10
const res = id(10)
1
2
3
4
5

• 比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型
• 为了能让函数能够接受任意类型的参数，可以将参数类型修改为 any。但是，这样就失去了 TS 的类型保护，类型不安全

function id(value: any): any { return value }
1

这时候，就可以使用泛型来实现:

• 泛型在保证类型安全(不丢失类型信息)的同时，可以让函数、自定义类型、接口等与多种不同的类型一起工作，灵活可复用
• 实际上，在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一

二、泛型函数

创建泛型函数：

function id<Type>(value: Type): Type { return value }

// 也可以仅使用一个字母来作为类型变量的名称
function id<T>(value: T): T { return value }
1
2
3
4

语法：

• 在函数名称的后面添加 <>（尖括号），尖括号中添加类型变量，比如此处的 Type
• 类型变量 Type，是一种特殊类型的变量，它处理类型而不是值
• 类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）
• 因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
• 类型变量 Type，可以是任意合法的变量名称

调用泛型函数：

// 函数参数和返回值类型都为：number
const num = id<number>(10)

// 函数参数和返回值类型都为：string
const str = id<string>('a')
1
2
3
4
5

语法：

• 在函数名称的后面添加 <>（尖括号），尖括号中指定具体的类型，比如，此处的 number
• 当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到
• 此时，Type 的类型就是 number，所以，函数 id 参数和返回值的类型也都是 number
• 这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全

三、简化泛型函数调用

在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用

// 省略  调用函数
let num = id(10)
let str = id('a')
1
2
3

• 此时，TS 内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量 Type 的类型
• 比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型
• 推荐：使用这种简化的方式调用泛型函数，使代码更短，更易于阅读
• 说明：当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数

四、创建基于TS的React项目

创建基于 TS 的 React 项目命令：

npx create-react-app react-ts --template typescript

在命令行中，添加 --template typescript 表示创建支持 TS 的项目
相比 JS 的 React 项目，目录的变化：

1. 在项目根目录中多了一个文件：tsconfig.json（TS 的配置文件）
2. 在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx
   ○ .ts ts 文件的后缀名
   ○ .tsx 是在 TS 中使用 React 组件时的后缀。只要代码中出现 JSX 结构，就得使用该后缀
3. 在 src 目录中，多了 react-app-env.d.ts 文件
   ○ .d.ts 类型声明文件，用来指定类型
   ○ 注意：不要动 src/react-app-env.d.ts 文件！！！

// TS 中的 三斜线指令，作用类似于 import 用于指定对其他类型声明文件的依赖关系

// 此处，通过 types 来声明依赖于 react-scripts 包
// https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-
/// 
1
2
3
4
5

五、useState 泛型函数

• useState hook 是一个泛型函数，接收一个类型变量来指定状态的类型

// 指定 name 状态的类型为：string
const [name, setName] = useState<string>('jack')
// 指定 age 状态的类型为：number
const [age, setAge] = useState<number>(28)
1
2
3
4

注意：该类型变量，不仅指定了状态的类型，也指定了 setName 等修改状态函数的参数类型

const [name, setName] = useState<string>('jack')
// 此时，setName 的参数的类型也是 string
setName('rose')
// 错误演示：
// setName(18)
1
2
3
4
5

省略类型变量，简化 useState 的调用：

• 在使用 useState 时，只要提供了初始值，TS 就会自动根据初始值来推断出其类型，因此，可以省略类型变量

const [name, setName] = useState('jack')
1

注意：如果 TS 自动推断出来的类型不准确，就需要明确指定泛型类型

六、useState 明确指定泛型类型

• 获取频道列表数据并渲染
  ○ 频道列表数据的接口：http://geek.itheima.net/v1_0/channels

// 比如，频道列表数据是一个数组，所以，在 JS 中我们将其默认值设置为：[]
// 但是，在 TS 中使用时，如果仅仅将默认值设置为空数组，list 的类型被推断为：never[]，此时，无法往数组中添加任何数据
const [list, setList] = useState([])
1
2
3

• 注意：useState 的状态是数组、对象等复杂的数据类型，需要明确指定泛型类型
  ○ 虽然都是数组、对象，但是，项目开发中不同需求所需要的数组结构、对象结构是不同的。因此，需要明确指定其类型

type Channel = {
  id: number
  name: string
}
// 明确指定状态的类型，此时，list 的类型为：Channel[]
// Channel[] 表示 Channel 类型的数组，也就是，数组中只能出现 Channel 类型的数据
const [list, setList] = useState<Channel[]>([])
1
2
3
4
5
6
7

七、泛型类型总结：

• 使用 TS 时，应该以类型化思维来写代码，简单来说：先有类型，再写逻辑代码来使用该类型的数据
• 比如，对于 对象、数组 来说，就应该在使用前先明确指定要用到的对象的类型、数组的类型等等
  练习：

// 假设，有以下学生信息，使用 useState 来存储该信息，并展示
{ name, age, grade }

// 模拟获取学生信息
useEffect(() => {
  setTimeout(() => {
    setStudent({
      name: '张三',
      age: 13,
      grade: 3
    })
  }, 0)
}, [])
Redux + TS
1
2
3
4
5
6
7
8
9
10
11
12
13
14

八、泛型约束

默认情况下，泛型函数的类型变量 Type 可以代表任意类型，这导致，无法访问任何属性

function id<Type>(value: Type): Type {
  // 报错： 类型“Type”上不存在属性“length”
  console.log(value.length)
  return value
}

id<string>('a')
1
2
3
4
5
6
7

• 解释：Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length
• 此时，就需要为泛型添加约束来收缩类型(缩窄类型取值范围)

1. 添加约束

比如，想要访问参数 value 的 length 属性，就可以添加以下约束：

// 创建一个接口
// interface ILength { length: number }
type Length = { length: number }

// Type extends Length 添加泛型约束
// 解释：表示传入的 类型 必须满足 Length 类型的要求才行，也就是得有一个 number 类型的 length 属性
function id<Type extends Length>(value: Type): Type {
  console.log(value.length)
  return value
}
1
2
3
4
5
6
7
8
9
10

• 创建描述约束的接口 ILength，该接口要求提供 length 属性
• 通过 extends 关键字使用该接口，为泛型(类型变量)添加约束
• 该约束表示：传入的类型必须具有 length 属性

注意：传入的实参(比如，数组)只要有 length 属性即可（类型兼容性)

2. 多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)
比如，创建一个函数来获取对象中属性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')
1
2
3
4
5

1. 添加了第二个类型变量 Key，两个类型变量之间使用 , 逗号分隔
2. keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型
3. 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是：‘name’ | ‘age’
4. 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

当然，第一个参数也可以添加类型约束，比如：

// Type extends object 表示： Type 应该是一个对象类型，如果不是 对象 类型，就会报错
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key]
}
1
2
3
4

九、泛型约束案例代码

export {}

/*
function id(value: Type): Type {
  // 报错： 类型“Type”上不存在属性“length”
  // 原因：在此处，泛型类型 Type 是一个占位的类型，可以接收任意类型
  //      既然可以是任意的类型，那么，在访问属性的时候，就会提示所有类型都有的属性
  //      但又没有任何一个属性，在所有类型中都存在，所以，此处访问属性就报错了
  // 其中，最主要的原因是： Type 可以是任意类型
  console.log(value.length)
  return value
}
*/

// id('a')
// id(null)

// 实际上，在真实的项目开发中，函数、自定义类型等可以配合 泛型 来使用的
// 都会有明确的类型范围，而不是任意类型
//
// 比如，要访问 length 属性，那么，泛型类型就应该限制在有 length 的范围内

// 需求：要访问参数的 length 属性
// extends 关键字用来给 泛型添加类型约束
//  可以理解为：左侧的类型 必须满足 右侧类型的约束
// Type extends { length: number } 表示： Type 是一个对象，并且需要有 length 属性
function id1<Type extends { length: number }>(value: Type): Type {
  console.log(value.length)
  return value
}

// 错误： 因为 {} 没有 length 属性
// id1({})

id1({ length: 1 })
id1({ length: 1, name: '' })
id1([1, 3]) // 数组也是有 length 属性的
id1('abc') // 由于 JS 中可以 'abc'.length，也就是说只要能够访问 length 属性，那就是满足类型约束的

// 问题：'abc'.length 为什么 string 类型（简单类型），可以访问对象属性？
// 回答：简单类型在访问属性时，JS 会将其包装成复杂类型，比如，'abc' 就会被包装成：new String('abc')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

export {}

// 泛型约束的示例：
// 需求：创建一个函数，函数的参数只能是 string 类型
function fn<Type extends string>(value: Type) {}

fn('abc')
// 错误演示：
// fn(1)

// 需求：创建一个函数，函数的参数只能是： 'name' | 'gender' 其中一个
function fn1<Type extends 'name' | 'gender'>(value: Type) {}
fn1('name')
fn1('gender')
// 错误演示：
// fn1('gender1')

// 需求：创建一个函数，实现访问对象中的属性。它有两个参数
//  参数1： 要访问的对象， 约定第一个参数必须是对象类型
//  参数2： 要访问的属性， 约定第二个参数只能是第一个对象中有的键
//  返回值： 要访问的属性的值
//
// 调用演示：
//  const obj = { name: 'jack', gender: 'male' }
//  const name = getValue(obj, 'name') // 'jack'
//  const gender = getValue(obj, 'gender') // 'male'

const obj = { name: 'jack', gender: 'male', age: 18 }
// 泛型可以有多个类型变量，使用 逗号 分隔
// Key 的类型应该是 Obj 对象中所有的键，也就是：对象 Obj 中有什么键，那么，Key 就是哪些键
// function getValue(
//  keyof Obj 表示获取对象 Obj 中所有键的类型，如果对象中有多个属性，那么，就回到一个： 字面量类型+联合类型的形式
// 比如，此处，keyof Obj 结果是： 'name' | 'gender'
// Obj[Key] 表示对象 Obj 中所有 Key 的值的类型
function getValue<Obj extends object, Key extends keyof Obj>(
  o: Obj,
  k: Key
): Obj[Key] {
  return o[k]
}

console.log(getValue(obj, 'name'))
console.log(getValue(obj, 'gender'))
console.log(getValue(obj, 'age'))

// getValue(obj, 'gend123er')
// getValue(undefined)

type Obj = typeof obj // { name: string; gender: string; age: number }
type K = keyof Obj // "name" | "gender" | "age"
type V = Obj[K] // string | number

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52