TS 入门(六):TypeScript泛型编程

目录

  • 前言
  • 回顾接口与类
  • 1. 泛型函数
  • 2. 泛型接口
  • 3. 泛型类
  • 4. 泛型约束
  • 5. 多重类型参数与默认类型
    • a. 多重类型参数
    • b. 默认类型参数
  • 结语

前言

在前三章中,我们介绍了 TypeScript 的基础知识、函数与对象类型。在本章中,我们将探讨更高级的类型和类型操作,包括联合类型、交叉类型、字面量类型、类型断言、类型兼容性和类型守卫等内容。通过这些高级特性,你将能够编写出更加灵活和强大的代码。

  • TS 入门(一):TypeScript 简介与安装
  • TS 入门(二):Typescript类型与类型注解
  • TS 入门(三):Typescript函数与对象类型
  • TS 入门(四):TypeScript 高级类型与类型操作
  • TS 入门(五):TypeScript接口与类

回顾接口与类

在上一章中,我们学习了以下内容:

  • 接口:包括基本接口、可选属性和只读属性、函数类型接口、可索引类型、接口继承。
  • 类:包括基本类、类的成员、构造函数、继承和派生类、公有、私有和受保护的修饰符、静态属性和方法、抽象类。

在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


1. 泛型函数

泛型函数允许你在定义函数时指定类型参数,而不是具体的类型。这样可以在函数内部使用不同的类型。

function identity<T>(arg: T): T {return arg;
}let output1 = identity<string>("我的名字"); // 输出类型为 'string'
let output2 = identity<number>(100); // 输出类型为 'number'
console.log(output1); // "我的名字"
console.log(output2); // 100

泛型函数还可以使用类型推断,根据传入的参数自动确定类型。

let output3 = identity("自动推断类型"); // 输出类型为 'string'
console.log(output3); // "自动推断类型"

2. 泛型接口

你可以使用泛型为接口定义类型参数,从而使接口更加灵活。

interface GenericIdentityFn<T> {(arg: T): T;
}function identity2<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = identity2;
console.log(myIdentity(42)); // 42

3. 泛型类

泛型也可以应用于类,使类能够处理不同的类型。

class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;constructor(zeroValue: T, addFn: (x: T, y: T) => T) {this.zeroValue = zeroValue;this.add = addFn;}
}let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(5, 10)); // 15

4. 泛型约束

有时候我们希望泛型类型满足一定的条件,可以通过泛型约束来实现。

interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length); // 现在我们知道arg有length属性了return arg;
}loggingIdentity({ length: 10, value: 3 }); // 输出: 10
// loggingIdentity(3); // 错误,number类型没有length属性

5. 多重类型参数与默认类型

a. 多重类型参数

泛型函数和类可以接受多个类型参数。

function map<T, U>(array: T[], transform: (item: T) => U): U[] {let result: U[] = [];for (let item of array) {result.push(transform(item));}return result;
}let numbers = [1, 2, 3];
let strings = map(numbers, num => num.toString());
console.log(strings); // ["1", "2", "3"]

b. 默认类型参数

你可以为泛型参数指定默认类型,这样在没有明确传入类型参数时将使用默认类型。

class Container<T = string> {content: T;constructor(content: T) {this.content = content;}
}let stringContainer = new Container("这是一个字符串");
console.log(stringContainer.content); // "这是一个字符串"let numberContainer = new Container<number>(42);
console.log(numberContainer.content); // 42

结语

通过本章的学习,你应该对 TypeScript 中的泛型编程有了更深入的理解。掌握泛型将使你能够编写更加灵活和可重用的代码。在下一章中,我们将继续探讨 TypeScript 中的模块与命名空间,包括导入和导出、默认导出、重命名导入和导出、命名空间等内容。务必掌握好每个概念,它们将为你后续学习 TypeScript 提供坚实的基础。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【STM32】按键控制LED光敏传感器控制蜂鸣器(江科大)

一、按键控制LED LED.c #include "stm32f10x.h" // Device header/*** 函 数&#xff1a;LED初始化* 参 数&#xff1a;无* 返 回 值&#xff1a;无*/ void LED_Init(void) {/*开启时钟*/RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENAB…

多级表头固定列问题

父级的width&#xff0c;是需要固定的列的width的总和 参考&#xff1a; el-table 多级表头下对应列的固定

springboot基于协同过滤算法的黔醉酒业白酒销售系统lw源码调试讲解

相关技术 2.1 Vue框架 目前市面上出现了许多优秀的前端框架可以解决了许多开发问题&#xff0c;Vue 就是这样一款优秀的框架&#xff0c;它与现代浏览器和支持ES2015的Node.js版本兼容&#xff0c;Vue.js的核心库只关注视图层&#xff0c;非常容易学习和集成到其他库或项目中[…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【23】【订单服务】

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【23】【订单服务】 订单中心订单信息用户信息订单基础信息商品信息优惠信息支付信息物流信息 订单状态订单流程订单创建与支付逆向流程 订单确认页Feign远程调用丢失请求头问题Feign异步…

基于springboot和mybatis的RealWorld后端项目实战一之hello-springboot

新建Maven项目 注意archetype选择quickstart pom.xml 修改App.java App.java同级目录新增controller包 HelloController.java package org.example.controller;import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotatio…

商业数据分析思维的培训PTT制作大纲分享

商业数据分析思维的培训PTT制作大纲: 基本步骤: 明确PPT的目的和主题 收集并整理相关内容资料 构思并确定PPT的框架大纲 编写PPT的内容文字 插入图片、图表等视觉元素 设计PPT的版式和模板 排练并修改PPT 输出并备份最终版本 目的:数据思维培养; 主题:商业数据分…

LLM微调

文章目录 一. 常见微调分类1.1 全量微调&#xff08;FFT&#xff1a;Full Fine-tuning&#xff09;1.2 参数高效微调(PEFT&#xff1a;Parameter-Efficient Fine-Tuning)1.3 指令微调&#xff08;IFT&#xff1a;Instructional Fine-tuning&#xff09;1.3.1 Hard prompt1.3.2 …

C++客户端Qt开发——常用控件QWidget

四、常用控件 属性 作用 enabled 设置控件是否可使用.true 表⽰可用&#xff0c;false 表示禁用 geometry 位置和尺寸&#xff0c;包含x,y,width,height四个部分 其中坐标是以⽗元素为参考进行设置的. windowTitle 设置widget标题 windowIcon 设置widget图标 windowO…

Window中 Redis下载安装

Redis7.2.3连接&#xff1a; 我用夸克网盘分享了「redis-windows-7.2.3.zip」&#xff0c;点击链接即可保存。打开「夸克APP」&#xff0c;无需下载在线播放视频&#xff0c;畅享原画5倍速&#xff0c;支持电视投屏。 链接&#xff1a;https://pan.quark.cn/s/4dfb0497707a 在安…

Java读写t5557卡源码

T5557卡是美国Atmel公司生产的多功能非接触式射频卡芯片&#xff0c;属于125KHz的低频卡&#xff0c;在国内有广大的应用市场。该芯片共有330bit(比特)的EPROM(分布为10个区块, 每个区块33bit)。0页的块0是被保留用于设置T5557操作模式的参数配置块。第0页第7块可以作用户数据块…

完善kset_uevent_ops结构体

1、struct kset_uevent_ops 2、实验 #include<linux/module.h> #include<linux/init.h>

win10删除鼠标右键选项-360工具

鼠标右键菜单时&#xff0c;发现里面的选项特别多&#xff0c;找一下属性&#xff0c;半天找不到。删除一些不常用的选项&#xff0c;让右键菜单变得干净整洁。 1、打开360安全卫士&#xff0c;点击功能大全&#xff0c;搜索"右键管理" 2、点击右键管理 3、找到对应的…

SpringCache介绍

SpringCache是Spring提供的缓存框架。提供了基于注解的缓存功能。 SpringCache提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff08;只需要导入不同的Jar包即可&#xff09;&#xff0c;如EHCache&#xff0c;Caffeine&#xff0c;Redis。 2个重要依赖已经导入&a…

C++ 高精度时钟获取当前时间 std::chrono::high_resolution_clock::now

C 高精度时钟获取当前时间 std::chrono::high_resolution_clock::now 1. std::chrono::high_resolution_clock::now1.1. Parameters1.2. Return value1.3. Example 2. std::chrono::milliseconds3. std::chrono::microseconds3.1. Example References 1. std::chrono::high_res…

OpenCV 棋盘格相机标定(保姆版)

目录 一、概述 1.1标定原理 1.2实现步骤 1.3应用场景 二、代码 2.1 cv2.calibrateCamera函数 2.1.1输入参数 2.1.2输出参数 2.2完整代码 三、实现效果 3.1处理图像 3.2内参与畸变系数 一、概述 使用 OpenCV 进行相机标定&#xff0c;通常需要拍摄多张包含棋盘格标定…

第一次参加数学建模竞赛新手小白备赛经验贴

2024年暑假已经来临&#xff0c;下半年的数学建模竞赛非常多&#xff0c;许多同学可能是第一次参赛&#xff0c;对于如何准备感到迷茫和无从下手。在这种情况下&#xff0c;我们将分享一些备赛的小技巧&#xff0c;帮助大家在这个暑假更好的入门&#xff0c;即便是零基础的小白…

Python面试宝典第14题:背包问题

题目 现有编号从 0 到 n - 1 的 n 个背包&#xff0c;给你两个下标从 0 开始的整数数组 capacity 和 rocks 。第 i 个背包最大可以装 capacity[i] 块石头&#xff0c;当前已经装了 rocks[i] 块石头&#xff08;0 < rocks[i] < capacity[i]&#xff09;。另给你一个整数 a…

牛客周赛 Round 51 (C++)

目录 A-小红的同余_牛客周赛 Round 51 (nowcoder.com) 思路&#xff1a; 代码&#xff1a; B-小红的三倍数_牛客周赛 Round 51 (nowcoder.com) 思路&#xff1a; 代码&#xff1a; C-小红充电_牛客周赛 Round 51 (nowcoder.com) 思路&#xff1a; 代码&#xff1a; …

SHOT(方向直方图)

Salti等人在2014年提出一种表面匹配的局部三维描述子SHOT。Salti等人将现有三维局部特征描述方法分为两类&#xff0c;即基于特征的描述方法与基于直方图的描述方法&#xff0c;并分析了两种方法的优势&#xff0c;提出基于特征的局部特征描述方法要比后者在特征的描述能力上更…

基于视觉工具箱和背景差法的行人检测,行走轨迹跟踪,人员行走习惯统计matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 在三维图中&#xff0c;幅度越大&#xff0c;则表示人员更习惯的行走路线。 2.算法运行软件版本 matlab2022a 3.部分核…