前端技术回顾系列 08|TS 泛型基础

在微信中阅读,关注公众号:CodeFit

创作不易,如果你觉得这篇文章对你有帮助,请不要忘了 点赞分享关注 我的公众号:CodeFit,为我的持续创作提供一些动力。

上篇内容回顾:枚举(Enums)

在上篇文章中,我们详细回顾了 TypeScript 中的 枚举(Enums)

枚举 是一种用于定义一组 常量 的数据类型,使用 枚举 可以以一种更清晰、更结构化的方式来管理一组相关的 常量

大纲

  1. TypeScript 中的泛型(Generics)
  2. 泛型出现的原因
  3. 没有使用泛型的示例
  4. 引入泛型
  5. 多个泛型参数
  6. 泛型在接口和类中的应用
  7. 使用泛型的优势小结
  8. 总结

1. TypeScript 中的泛型(Generics)

本文回顾的内容是 TypeScript 中的一个高级主题 —— 泛型(Generics)

泛型 在是一种强大的工具,用于创建 类型安全的可重用的更灵活的 代码。

2. 泛型出现的原因

泛型 的好处是,当处理 不同类型 的数据时,可以保持类型 安全性可重用性

探讨泛型出现的原因,我们可以看看在 没有泛型 的情况下,代码会如何编写。

具体来说,如果要处理不同类型的数据,我们可以使用 any 类型,但是会 丧失类型安全,导致潜在的运行时错误。

如果为每种数据类型都编写一个单独的函数或类,代码会变得 冗长且难以维护

而且,使用 泛型,还可以很方便地在函数或类在处理数据时,让传入或返回的类型 保持一致

3. 没有使用泛型的示例

假设我们有一个简单的函数 echo,它接收一个参数并返回该参数:

function echo(arg: any): any {return arg;
}let result = echo(123);
console.log(result); // 输出: 123

在这个例子中,我们使用了 any 类型,这允许我们传入任意类型的参数,但这通常也意味着我们丧失了类型安全。

如下所示:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设置路径别名

一、描述 如果想要给路径设置为别名,就是常见的有些项目前面的引入文件通过开头的,也就是替换了一些固定的文件路径,怎么配置。 二、配置 import { defineConfig } from vite import react from vitejs/plugin-react import path from path…

ElementUi el-tree动态加载节点数据 load方法触发机制

需求背景:需要根据点击后获取的数据动态渲染一个 el-tree,同时渲染出来的 el-tree,需要点击节点时才能获取该节点的层数的获取,如图所示,我需要点击“组”节点才能渲染“设备列表”树,同时“设备列表”树的…

war后门文件部署 什么是war后门文件 为什么要部署???看见war后门文件部署你知道????

在漏洞复现的时候做了一道war后门文件部署的,然后我们就要去了解什么是war包,然后这个漏洞实现要有什么情况??为什么要进行部署?? war包在哪些地方可以实现??? war是一种…

优设AI导航

1、优设AI导航 优设AI导航

数据结构与算法题目集(中文)6-2顺序表操作集

题目地址 https://pintia.cn/problem-sets/15/exam/problems/type/6?problemSetProblemId725&page0 注意审题,返回false的时候不要返回ERROR,否则答案错误,机器规则是死的。 位置一般指数组下标,位序一般指数组下标1。但是思…

[FreeRTOS 基础知识] 任务调度 与 链表

文章目录 任务并行的概念RTOS如何实现多任务调度? 任务并行的概念 在生活中,经常出现一心多用的情况。比如你需要一边吃饭一边手机回复信息,这里面就存在两个任务:任务一、吃饭。任务二、手机回复信息。 假如你无法一心多用&…

前端技术入门指南

引言 在数字化时代,前端开发成为了连接用户与数字世界的重要桥梁。无论你是对编程充满好奇的新手,还是想要拓展自己技能领域的在职人员,前端开发都是一个值得学习和探索的领域。本文将带你走进前端技术的世界,为你提供一个入门指…

【Modelground】个人AI产品MVP迭代平台(5)——神投手(实时投篮检测游戏)

文章目录 介绍篮框识别进球算法离屏渲染总结 介绍 神投手是我开发的一款移动端web实时投篮检测游戏。其解决的痛点是:专为投篮训练而生的,有手机就能玩的投篮计数游戏。我本人是一个篮球爱好者,特点就是投篮准,虽然投篮挺靠天赋&…

DevExpress WPF中文教程:Grid - 如何向项目添加GridControl并绑定到数据

DevExpress WPF拥有120个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

第十二届蓝桥杯单片机国赛练习代码

文章目录 前言一、问题重述二、主函数总结 前言 第十五蓝桥杯国赛落幕已有十天,是时候总结一下,这个专栏也将结束。虽然并没有取得预期的结果,但故事结尾并不总是美满的。下面是赛前练习的第十二届国赛的代码。 一、问题重述 二、主函数 完整…

大数据快速使用Kerberos认证集群

一、创建安全集群并登录其Manager 创建安全集群,开启“Kerberos认证“参数开关,并配置“密码“、“确认密码“参数。该密码用于登录Manager,请妥善保管。 登录MRS管理控制台页面。 单击“集群列表“,在“现有集群“列表&#xf…

虚拟机调用摄像头设备一直 select timeout问题的解决

在VMware里面调用v4l2-ctl捕获图像,或者opencv的VideoCapture(0)捕获图像,或者直接调用v4l2的函数,在streamon后,调用select读取数据,均会一直提示select timeout的问题,大概率是由于USB版本的兼容性造成的…

fs.1.10 ON rockylinux8 docker镜像制作

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 rockylinux docker上编译安装fs1.10版本的流程记录。 环境 docker engine:Version 24.0.6 rockylinux docker:8 freeswitch:v1.10.7 手动模式 rockylinux准备 docker hub拉取r…

AI智能体做高考志愿填报分析

关注公众号,赠送AI/Python/Linux资料,对AI智能体有兴趣的朋友也可以添加一起交流 高考正在进行时,学生焦虑考试,家长们焦虑的则是高考志愿怎么填。毕竟一个好的学校,好的专业是进入社会的第一个敲门砖 你看张雪峰老师…

2024.6.10学习记录

1、代码随想录二刷 2、项目难点 review 3、计组复习

RabbitMQ-工作模式(Topics模式RPC模式Publisher Confirms模式)

文章目录 Topics模式topic代码示例 RPC模式客户端界面回调队列关联ID总结RPC代码示例 Publisher Confirms模式概述在通道上启用发布者确认单独发布消息批量发布消息异步处理发布者确认总结总体代码示例 更多相关内容可查看 Topics模式 在Topics中,发送的消息不能具…

目标检测算法YOLOv9简介

YOLOv9由Chien-Yao Wang等人于2024年提出,论文名为:《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》,论文见:https://arxiv.org/pdf/2402.13616 ;源码见: https://github.com/W…

一文带你轻松掌握Java数组定义和声明

哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一…

Java_Map集合

认识Map集合 Map集合称为双列集合,格式:{key1value,key2value2,key3value3,…},一次需要存一对数据作为一个元素。 Map集合的每个元素“Keyvalue” 称为一个键值对/键值对对象/一个Entry对象,Map集合也被叫做“键值对集合” Map集…

Vue笔记(二)

Vue(一):Vue笔记(一)-CSDN博客 综合案例:水果购物车 项目功能: 视频链接:034-水果购物车-基本渲染_哔哩哔哩_bilibili 目录结构: index.css .app-container {padding-…