【 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

相关文章

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C语言中位操作的实际应用举例

《C语言中位操作的实际应用举例》:本文主要介绍C语言中位操作的实际应用,总结了位操作的使用场景,并指出了需要注意的问题,如可读性、平台依赖性和溢出风险,文中通过代码介绍的非常详细,需要的朋友可以参... 目录1. 嵌入式系统与硬件寄存器操作2. 网络协议解析3. 图像处理与颜色编码4. 高效处理布尔标志集合

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

深入理解Apache Kafka(分布式流处理平台)

《深入理解ApacheKafka(分布式流处理平台)》ApacheKafka作为现代分布式系统中的核心中间件,为构建高吞吐量、低延迟的数据管道提供了强大支持,本文将深入探讨Kafka的核心概念、架构... 目录引言一、Apache Kafka概述1.1 什么是Kafka?1.2 Kafka的核心概念二、Ka

MySQL 分区与分库分表策略应用小结

《MySQL分区与分库分表策略应用小结》在大数据量、复杂查询和高并发的应用场景下,单一数据库往往难以满足性能和扩展性的要求,本文将详细介绍这两种策略的基本概念、实现方法及优缺点,并通过实际案例展示如... 目录mysql 分区与分库分表策略1. 数据库水平拆分的背景2. MySQL 分区策略2.1 分区概念

SpringBoot条件注解核心作用与使用场景详解

《SpringBoot条件注解核心作用与使用场景详解》SpringBoot的条件注解为开发者提供了强大的动态配置能力,理解其原理和适用场景是构建灵活、可扩展应用的关键,本文将系统梳理所有常用的条件注... 目录引言一、条件注解的核心机制二、SpringBoot内置条件注解详解1、@ConditionalOn