【TypeScript】泛型

news2025/1/7 15:11:49

泛型(Generics)是 TypeScript 中一个重要的概念,它允许你在编写可重用、灵活的函数、类或接口时,参数或返回值的类型变成一个占位符。

下面是一些关于 TypeScript 泛型的基本概念和用法:

  1. 函数泛型:

     // 用 T K 限制某一类型
     function xx<T, K>(x: T, y: K):Array<K |T> {
       return [x, y]
     }
     xx(1, false) // 会自动类型推断
    

也可以添加默认类型,例如 T = number ,此时默认为 number ,当然也还是可以使用其他类型。

  1. 接口泛型:

     type A<T> = string | number | T
     let a: A<number> = 1
     
     // 或者interface
     interface Data<T> {
       msg: T
     }
     let data: Data<number> = {
       msg: 1
     }
    

    这里我们创建了一个 Box 接口,它接受一个类型参数 T。当我们声明一个 box 变量时,我们指定了泛型类型为 number,这意味着 box 中的 value 属性的类型将会是 number

  2. 类泛型:

    class Pair<T, U> {
      constructor(public first: T, public second: U) {}
    }
    
    let pair = new Pair<number, string>(1, "one");
    

    这里我们创建了一个泛型类 Pair,它可以接受两个类型参数 TU。在实例化时,我们指定了 numberstring 作为类型参数,因此 pair 对象的 first 属性将是 number 类型,而 second 属性将是 string 类型。

  3. 泛型约束:

    function loggingIdentity<T extends Lengthable>(arg: T): T {
      console.log(arg.length);
      return arg;
    }
    
    interface Lengthable {
      length: number;
    }
    
    loggingIdentity("Hello"); // OK
    loggingIdentity(42); // Error: 无法找到 length 属性
    

    这里的 Lengthable 接口约束了泛型类型必须有一个 length 属性。函数 loggingIdentity 接受一个类型为 T(必须符合 Lengthable 接口的约束)的参数,并输出其 length 属性。

应用场景:

const axios = {
  get<T>(url: string): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      let xhr: XMLHttpRequest = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200) {
          resolve(JSON.parse(xhr.responseText))
        }
      }
      xhr.send(null)
    })
  }
}
interface Data {
  message:string,
  code:number
}
axios.get<Data>('./data.json').then(res => {
  console.log(res.code);
})

data.json

{
  "messsage":"success"'./index.js'
  "code": 1
}

将 index.ts 同步编译到 index.js ,在 index.html 中引入 ‘./index.js’

在这里插入图片描述

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

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

相关文章

实战:大数据Spark简介与docker-compose搭建独立集群

文章目录 前言技术积累Spark简介Spark核心功能及优势Spark运行架构 Spark独立集群搭建安装docker和docker-composedocker-compose编排docker-compose编排并运行容器 Spark集群官方案例测试写在最后 前言 很多同学都使用过经典的大数据分布式计算框架hadoop&#xff0c;其分布式…

disabled and validated 不能DML

Inserting Rows Not Allowed in Table with DISABLED and VALIDATED Constraint (Doc ID 139337.1)​编辑To Bottom Problem Description: You create a table with a referential integrity constraint (a foreign key constraint) referencing a view constraint.SQL> C…

深眸科技创新赋能视觉应用产品,以AI+机器视觉解决行业应用难题

随着工业4.0时代的加速到来&#xff0c;我国工业领域对于机器视觉技术引导的工业自动化和智能化需求持续上涨&#xff0c;国内机器视觉行业进入快速发展黄金期&#xff0c;但需求广泛出现同时也对机器视觉产品的检测能力提出了更高的要求。 传统机器视觉由人工分析图像特征&am…

【VS】InstallerProjects.vsix下载 Microsoft Visual Studio Installer Projects (2022)

InstallerProjects.vsix 是微软官方提供的winform程序打包工具&#xff0c;但是国内下载安装有时候比较慢。虽然只有5m左右&#xff0c;但是国内就是下载不下来。现将官网地址和下载后的百度网盘共享地址展示如下&#xff1a;方便大家使用 官方地址&#xff1a;https://market…

R语言实现网状Meta分析(1)

#R语言实现网状Meta library(gemtc) help(package"gemtc") data<-gemtc::smoking #注意按照实例格式编写数据 net<-mtc.network(data$data.ab) #网状图 plot(net,mode"circle",displaylabelsT,boxed.labelF) summary(net) #网状model model<-mtc…

软件开发企业SDL安全培训案例

1.背景 随着计算机技术的发展、internet及mobile应用的普遍使用,软件安全像功能、性能、稳定性一样是计算机系统的一个非常重要部分。没有安全的软件,任何美好的功能都是徒劳的,没有安全的软件,公司的机密数据、客户隐私、系统的可靠性都得不到保障.如何有效评估、开发安全、可…

第7天----【位运算进阶之----位或(|)】七夕特别版

❤️今天我们来学习位或 注意&#xff1a;本文中的位是从右往左来说的&#xff0c;也就是从低位开始数的&#xff01;&#xff01;&#xff01; 一、昨日重现&#xff1a; 当然&#xff0c;在正式学习之前&#xff0c;让我们先看看昨天留下的问题&#xff1a;⭐️如何判断一个…

二阶段——堆叠技术

堆叠技术——可以将多台真的物理设备逻辑上抽象成一台 思科——VPC 华为——IStack和CSS 华三——IRF 锐捷——VSU iStack和CSS的区别 CSS----集群---它仅支持将两台支持集群的交换机逻辑上整合成为一台设备 IStack---堆叠--可以将多台支持堆叠的交换机逻辑上整合成为一…

echarts三个月份数据对比图 实现思路

legend展示数据与tooltips数据不一致 先看结果&#xff1a;展示出来的legend 鼠标滑过当前日期展示的tooltips数据 这里的难点就是前两个月份的数据如何渲染上去到tooltips中&#xff0c;前两个月份的数据不在echarts的展示列。不能常规的series渲染。 后端给的数据&#xff…

Vue 3 常见面试题汇总

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 前言 最近两年许多大厂都在实行“降本增效”、“优化组织架构”&#xff0c;然后“为社会输送了大量人才”&#xff0c;今年&#xff08;2023&#xff…

单独说一下联合主键和组合索引

联合主键 mysql中,连点两个主键, 试验结果发现 只有当id 和 math 都一样时才会报主键重复, 这个就是联合主键 组合索引 mysql中,有一个主键了, 然后我自己创建了一个组合索引,这个索引是由math和sex两个列组成的. 试验结果发现 当math 和 sex都一样时会报重复错误.

穿起“新架构”的舞鞋,跳一支金融数字化转型的华尔兹

华尔兹&#xff0c;是男女两位舞者&#xff0c;通过形体的控制&#xff0c;舞步技巧的发挥&#xff0c;完美配合呈现而出的一种舞蹈形式。华尔兹舞姿&#xff0c;如行云流水、潇洒自如、飘逸优美&#xff0c;素有“舞中皇后”的美称。 在跳华尔兹的时候&#xff0c;如果舞者双…

想要恢复苹果删除的视频,一定不要错过这3个方法!

我是一名博主&#xff0c;前几天去外地拍了很多素材想留着制作下期视频。但是在清理手机内存的时候可能不小心点错了&#xff0c;然后我也没仔细看&#xff0c;就把拍的素材也一起删掉了。现在找不回来了&#xff0c;有什么办法能帮帮我吗&#xff1f; 对于苹果用户来说&#x…

chatGPT界面

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><title>复选框样式示例</title> </head> <style>* {padding:0;margin: 0;}.chatpdf{display: flex;height: 100vh;flex-direction: row;}.chatpdf .pannel{widt…

《剑指Offer》链表题大全 9道题【9道经典链表题帮助你掌握链表】

《剑指Offer》链表题大全 9道题 链表1. 从尾到头打印链表本题考点栈 2. 在O(1)时间删除链表结点3. 删除链表中重复的节点总结&#xff1a;删除节点的两种方法1. a-》b 直接让a的值等于b的值&#xff0c;a的next等于b的next2. a-》b-》c 让a的next指向c&#xff08;只有修改next…

NineData中标移动云数据库传输项目(2023)

近日&#xff0c;玖章算术NineData智能数据管理平台成功中标《2023年移动云数据库传输服务软件项目》&#xff0c;中标金额为406万。这标志着玖章算术NineData平台已成功落地顶级运营商行业&#xff0c;并在数据管理方面实现了大规模应用实践。 NineData中标2023移动云数据库传…

解决OpenFOAM颗粒计算输出文件Paraview无法打开问题(二)

第二个方案的源是在CFD中文网上看到的一篇帖子&#xff0c;其具体链接忘了。这个帖子给了一个github的链接&#xff0c;就是将OpenFOAM输出的颗粒位置信息转变为真实的位置信息的脚本。其链接在此。 1. 背景 我们知道&#xff0c;paraview之所以打不开OF输出的颗粒文件&#…

轻松玩转70亿参数大模型!借助Walrus在AWS上部署Llama2

Llama 2 是 Meta 的下一代开源大语言模型。它是一系列经过预训练和微调的模型&#xff0c;参数范围从 70 亿到 700 亿个。Meta Llama 2 可免费用于研究和商业用途并且提供了一系列具有不同大小和功能的模型&#xff0c;因此一经发布备受关注。在之前的文章中&#xff0c;我们详…

Spring 为什么使用三级缓存解决循环依赖

文章目录 前言1. 什么是循环依赖1.1 互相依赖1.2 递归依赖 2. Sping中循环依赖有什么问题&#xff1f;3. 什么是三级缓存4. Spring 可以解决哪些情况的循环依赖&#xff1f; 二级缓存作用——普通循环依赖实操环节1. 实例化类A对象2. 实例化类B对象3. B对象完成创建4.继续创建A…

Python自动化小技巧21——实现PDF转word功能(程序制作)

案例背景 为什么这个年代PDF转word&#xff0c;某wps居然还要收费.....很多软件都可以实现这个功能&#xff0c;但是效果都有好有坏&#xff0c;而且有的还付费&#xff0c;很麻烦。 那就用python实现这个功能吧&#xff0c;然后把代码打包为.exe的程序&#xff0c;这样随便在…