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

文章目录

  • 一、泛型概述
  • 二、泛型函数
  • 三、简化泛型函数调用
  • 四、创建基于TS的React项目
  • 五、useState 泛型函数
  • 六、useState 明确指定泛型类型
  • 七、泛型类型总结:
  • 八、泛型约束
      • 1. 添加约束
      • 2. 多个类型变量
  • 九、泛型约束案例代码

一、泛型概述

泛型(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 函数与多种不同的类型一起工作,实现了复用的同时保证了类型安全

三、简化泛型函数调用

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

// 省略  调用函数
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 项目,目录的变化:

  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-
/// 

五、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')
  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]
}

九、泛型约束案例代码

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')

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

你可能感兴趣的:(React,typescript,javascript,前端,开发语言,vue.js)