文章目录
一、泛型概述
泛型(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 项目命令:
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