【 TypeScript 】对TypeScript中泛型的理解?应用场景?

2024-03-12 15:44

本文主要是介绍【 TypeScript 】对TypeScript中泛型的理解?应用场景?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 是什么

泛型程序设计(generic programming)是程序设计语言的一种风格或范式
泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型

在typescript中,定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性
假设我们用一个函数,它可接受一个number参数并返回一个number参数,如下写法:

function returnItem (para: number): number {return para
}

如果我们打算接受一个string类型,然后再返回string类型,则如下写法:

function returnItem (para: string): string {return para
}

上述两种编写方式,存在一个最明显的问题在于,代码重复度比较高
虽然可以使用any类型去替代,但这也并不是很好的方案,因为我们的目的是接收什么类型的参数返回什么类型的参数, 即在运行时传入参数我们才能确定类型这种情况就可以使用泛型,如下所示:

function returnItem<T>(para: T): T {return para
}

可以看到,泛型给予开发者创造灵活、可重用代码的能力

2. 使用方式

泛型通过<>的形式进行表述,可以声明:

  • 函数
  • 接口

2.1 函数声明

声明函数的形式如下:

function returnItem<T>(para: T): T {return para
}

定义泛型的时候,可以一次定义多个类型参数,比如我们可以同时定义泛型T和泛型U:

function swap<T, U>(tuple: [T, U]): [U, T] {return [tuple[1], tuple[0]]; 
}
swap([2, 'red']); // ['red', 2]

2.2 接口声明

声明接口的形式如下:

interface ReturnItemFn<T> { (para: T): T } 

那么当我们想传入一个number作为参数的时候,就可以这样声明函数:

const returnItem:ReturnItemFn<number>=para =>para

2.3 类声明

使用泛型声明类的时候,既可以作用于类本身,也可以作用与类的成员函数下面简单实现一个元素同类型的栈结构,如下所示:

class Stack<T> {private arr: T[] = []public push(item: T) {this.arr.push(item) }public pop() {this.arr.pop() } 
}

使用方式

const stack = new Stack<number>()

如果上述只能传递string和number类型,这时候就可以使用的方式猜实
现约束泛型,如下所示:

type Params=string|numberclass Stack<T extends Params> {private arr: T[] = []public push(item: T) {this.arr.push(item) }public pop() {this.arr.pop() } 
} 
const stack = new Stack<boolean>()  //报错 类型bboolean 不满足约束Params

除了上述的形式,泛型更高级的使用如下:
例如要设计一个函数,这个函数接受两个参数,一个参数为对象,另一个参数为对象上的属性,我们通过这两个参数返回这个属性的值
这时候就涉及到泛型的索引类型和约束类型共同实现

2.4 索引类型、约束类型

索引类型keyof T」把传入的对象的属性类型取出生成一个联合类型,这里的泛型U被约束在这个联合类型中,如下所示:

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {return obj[key] // ok
}

上述为什么需要使用泛型约束,而不是直接定义第一个参数为object类型,是因为默认情况object指的是{},而我们接收的对象是各种各样的,一个泛型来表示传入的对象类型,比如T extends object
使用如下图所示:

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {return obj[key] // ok
} 
const a={name:'superrui',age:18
}
getValue(a) //显示如下

在这里插入图片描述

2.5 多类型约束

如下需要实现两个接口类型约束:

interface FirstInterface {doSomething(): number
}
interface SecondInterface {doSomethingElse(): string
}

可以创建一个接口继承上述两个接口,如下
interface ChildInterface extends FirstInterface, SecondInterface { }
正确使用如下:

class Demo<T extends ChildInterface> {private genericProperty: Tconstructor(genericProperty: T) {this.genericProperty = genericProperty}useT() {this.genericProperty.doSomething()this.genericProperty.doSomethingElse() } 
}

通过泛型约束就可以达到多类型约束的目的

3. 应用场景

通过上面初步的了解,后述在编写typescript的时候,定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性的时候,这种情况下就可以使用泛型

这篇关于【 TypeScript 】对TypeScript中泛型的理解?应用场景?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/801766

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛