文章目录
一、泛型概述
泛型（Generics）可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、自定义类型、接口等类型中
创建一个 id 函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）
// 比如，该函数传入什么数值，就返回什么数值
function id(value: number): number {
return value }
// res => 10
const res = id(10)
- 比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型
- 为了能让函数能够接受任意类型的参数，可以将参数类型修改为 any。但是，这样就失去了 TS 的类型保护，类型不安全
function id(value: any): any {
return value }
这时候，就可以使用泛型来实现:
- 泛型在保证类型安全(不丢失类型信息)的同时，可以让函数、自定义类型、接口等与多种不同的类型一起工作，灵活可复用
- 实际上，在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一
二、泛型函数
创建泛型函数：
function id<Type>(value: Type): Type {
return value }
// 也可以仅使用一个字母来作为类型变量的名称
function id<T>(value: T): T {
return value }
语法：
- 在函数名称的后面添加 <>（尖括号），尖括号中添加类型变量，比如此处的 Type
- 类型变量 Type，是一种特殊类型的变量，它处理类型而不是值
- 类型变量相当于一个类型容器，能够捕获用户提供的类型（具体是什么类型由用户调用该函数时指定）
- 因为 Type 是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
- 类型变量 Type，可以是任意合法的变量名称
调用泛型函数：
// 函数参数和返回值类型都为：number
const num = id<number>(10)
// 函数参数和返回值类型都为：string
const str = id<string>('a')
语法：
- 在函数名称的后面添加 <>（尖括号），尖括号中指定具体的类型，比如，此处的 number
- 当传入类型 number 后，这个类型就会被函数声明时指定的类型变量 Type 捕获到
- 此时，Type 的类型就是 number，所以，函数 id 参数和返回值的类型也都是 number
- 这样，通过泛型就做到了让 id 函数与多种不同的类型一起工作，实现了复用的同时保证了类型安全
三、简化泛型函数调用
在调用泛型函数时，可以省略 <类型> 来简化泛型函数的调用
// 省略 <number> 调用函数
let num = id(10)
let str = id('a')
- 此时，TS 内部会采用一种叫做类型参数推断的机制，来根据传入的实参自动推断出类型变量 Type 的类型
- 比如，传入实参 10，TS 会自动推断出变量 num 的类型 number，并作为 Type 的类型
- 推荐：使用这种简化的方式调用泛型函数，使代码更短，更易于阅读
- 说明：当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数
四、创建基于TS的React项目
创建基于 TS 的 React 项目命令：
扫描二维码关注公众号，回复：
14866417 查看本文章
npx create-react-app react-ts --template typescript
在命令行中，添加 --template typescript 表示创建支持 TS 的项目
相比 JS 的 React 项目，目录的变化：
- 在项目根目录中多了一个文件：tsconfig.json（TS 的配置文件）
- 在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx
○ .ts ts 文件的后缀名
○ .tsx 是在 TS 中使用 React 组件时的后缀。只要代码中出现 JSX 结构，就得使用该后缀- 在 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-
/// <reference types="react-scripts" />
五、useState 泛型函数
useState hook 是一个泛型函数，接收一个类型变量来指定状态的类型
// 指定 name 状态的类型为：string
const [name, setName] = useState<string>('jack')
// 指定 age 状态的类型为：number
const [age, setAge] = useState<number>(28)
注意：该类型变量，不仅指定了状态的类型，也指定了 setName 等修改状态函数的参数类型
const [name, setName] = useState<string>('jack')
// 此时，setName 的参数的类型也是 string
setName('rose')
// 错误演示：
// setName(18)
省略类型变量，简化 useState 的调用：
- 在使用 useState 时，只要提供了初始值，TS 就会自动根据初始值来推断出其类型，因此，可以省略类型变量
const [name, setName] = useState('jack')
注意：如果 TS 自动推断出来的类型不准确，就需要明确指定泛型类型
六、useState 明确指定泛型类型
- 获取频道列表数据并渲染
○ 频道列表数据的接口：http://geek.itheima.net/v1_0/channels
// 比如，频道列表数据是一个数组，所以，在 JS 中我们将其默认值设置为：[]
// 但是，在 TS 中使用时，如果仅仅将默认值设置为空数组，list 的类型被推断为：never[]，此时，无法往数组中添加任何数据
const [list, setList] = useState([])
- 注意：useState 的状态是数组、对象等复杂的数据类型，需要明确指定泛型类型
○ 虽然都是数组、对象，但是，项目开发中不同需求所需要的数组结构、对象结构是不同的。因此，需要明确指定其类型
type Channel = {
id: number
name: string
}
// 明确指定状态的类型，此时，list 的类型为：Channel[]
// Channel[] 表示 Channel 类型的数组，也就是，数组中只能出现 Channel 类型的数据
const [list, setList] = useState<Channel[]>([])
七、泛型类型总结：
- 使用 TS 时，应该以类型化思维来写代码，简单来说：先有类型，再写逻辑代码来使用该类型的数据
- 比如，对于 对象、数组 来说，就应该在使用前先明确指定要用到的对象的类型、数组的类型等等
练习：
// 假设，有以下学生信息，使用 useState 来存储该信息，并展示
{
name, age, grade }
// 模拟获取学生信息
useEffect(() => {
setTimeout(() => {
setStudent({
name: '张三',
age: 13,
grade: 3
})
}, 0)
}, [])
Redux + TS
八、泛型约束
默认情况下，泛型函数的类型变量 Type 可以代表任意类型，这导致，无法访问任何属性
function id<Type>(value: Type): Type {
// 报错： 类型“Type”上不存在属性“length”
console.log(value.length)
return value
}
id<string>('a')
- 解释：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
}
- 创建描述约束的接口 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')
- 添加了第二个类型变量 Key，两个类型变量之间使用 , 逗号分隔
- keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型
- 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是：‘name’ | ‘age’
- 类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性
当然，第一个参数也可以添加类型约束，比如：
// Type extends object 表示： Type 应该是一个对象类型，如果不是 对象 类型，就会报错
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {
return obj[key]
}
九、泛型约束案例代码
export {
}
/*
function id<Type>(value: Type): Type {
// 报错： 类型“Type”上不存在属性“length”
// 原因：在此处，泛型类型 Type 是一个占位的类型，可以接收任意类型
// 既然可以是任意的类型，那么，在访问属性的时候，就会提示所有类型都有的属性
// 但又没有任何一个属性，在所有类型中都存在，所以，此处访问属性就报错了
// 其中，最主要的原因是： Type 可以是任意类型
console.log(value.length)
return value
}
*/
// id<string>('a')
// id<null>(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')
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<Obj extends object, Key extends 'name' | 'gender'>(
// 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