TS中的泛型

2023-11-17

一、泛型是什么?有什么作用

当我们定义一个变量不确定类型的时候有两种解决方式:

使用any
使用any定义时存在的问题:虽然 以 知道传入值的类型但是无法获取函数返回值的类型;另外也失去了ts类型保护的优势
使用泛型
泛型指的是在定义函数/接口/类型时,不预先指定具体的类型,而是在使用的时候在指定类型限制的一种特性。

二、泛型用法

2.1 在函数中使用泛型

function test <T> (arg:T):T{
  console.log(arg);
  return arg;
}
test<number>(111);// 返回值是number类型的 111
test<string | boolean>('hahaha')//返回值是string类型的 hahaha
test<string | boolean>(true);//返回值是布尔类型的 true

使用方式类似于函数传参,传什么数据类型,T就表示什么数据类型, 使用表示,T也可以换成任意字符串。

2.2 在接口中使用泛型 

// 注意,这里写法是定义的方法哦
interface Search {
  <T,Y>(name:T,age:Y):T
}

let fn:Search = function <T, Y>(name: T, id:Y):T {
  console.log(name, id)
  return name;
}
fn('li',11);//编译器会自动识别传入的参数,将传入的参数的类型认为是泛型指定的类型

2.3 在类中使用泛型 

class Animal<T> {
 name:T;
 constructor(name: T){
  this.name = name;
 }
 action<T>(say:T) {
   console.log(say)
 }
}
let cat = new Animal('cat');
cat.action('mimi')

三、泛型约束

3.1使用接口约束泛型 

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg:T):T {
  return arg;
}

student({name:'lili'});//类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性
student({ name: "lili" , age:'11'});//不能将类型“string”分配给类型“number”
student({ name: "lili" , age:11});

3.2 数组泛型

let arr:Array<number> =[1,2,3] === let arr:number[]=[1,2,3]

四、泛型工具类型

4.1 Partial
partial<T>的作用就是将某个类型中的属性全部变为可选项?
示例: 

interface Person {
  name:string;
  age:number;
}
function student<T extends Person>(arg: Partial<T>):Partial<T> {
  return arg;
}

4.2 Record
Record<K extends keyof any, T>的作用是将K中所有的属性转换为T类型;示例:

interface PageInfo {
  title: string
}
type Page = 'home'|'about'|'other';
const x: Record<Page, PageInfo> = {
  home: { title: "xxx" },
  about: { title: "aaa" },
  other: { title: "ccc" },
};

4.3 Pick
Pick<T, K extends keyof T>的作用是将某个类型中的子属性挑出来,变成包含这个类型部分属性的子类型,示例:

interface Todo {
  title:string,
  desc:string,
  time:string
}
type TodoPreview = Pick<Todo, 'title'|'time'>;
const todo: TodoPreview ={
  title:'吃饭',
  time:'明天'
}

4.4 Exclude
Exclude<T,U>的作用是将某个类型中属于另一个类型的属性移除掉,示例:

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
const t:T0 ='b';

4.5 ReturnType
returnType<T>的作用是用于获取函数T的返回类型,示例:

type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T2 = ReturnType<<T>() => T>; // {}
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; // number[]
type T4 = ReturnType<any>; // any
type T5 = ReturnType<never>; // any
type T6 = ReturnType<string>; // Error
type T7 = ReturnType<Function>; // Error 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TS中的泛型 的相关文章

随机推荐

  • Unity3D研究院之游戏开发中的人工智能AI

    人工智能这个东西在游戏中是非常重要的 人工智能说简单了就是根据随机的数字让敌人执行一些动作或逻辑 说难了TA需要一个非常复杂的算法 本文我主要说说Unity3D中人工智能的脚本如何来编写 首先你应该搞清楚的一点AI脚本属于一个工具类脚本 工
  • 数据结构之栈

    文章目录 栈的概念 栈的功能实现 栈结构的实现 栈的初始化 栈的判空 读取栈顶数据 插入数据 删除数据 栈中数据个数 栈的销毁 总结 Stack h文件 Stack c文件 栈的概念 栈 一种特殊的线性表 其只允许在固定的一端进行插入和删除
  • 带你了解锂电池保护板的工作原理

    拆过手机或者平板的用户 应该都注意过 在手机或者平板的锂电池部分 其上端有一块质地较软且被塑料膜包裹起来的电路板 电池大小不同 电路板尺寸也不一样 揭开塑料膜 你会发现 其上布置了很多的元器件 或许会有人问 这块板子究竟有何作用 其实呢 电
  • 数据结构C++实现——线性表之链表(单链表)

    线性表分为顺序表与链表 其中链表分为单链表 双链表 循环链表 这三个为指针实现 与静态链表 数组实现 指针实现的链表可以分为带头结点与不带头结点两种 其基本操作有插入 删除 按位查找 按值查找等 单链表 不带头结点 单链表 不带头结点 用链
  • 软件工程第五章习题

    软件工程第五章习题 1 为每种类型的模块耦合举一个具体例子 2 为每种类型的模块内聚举一个具体例子 1 为每种类型的模块耦合举一个具体例子 只需要答出什么模块和例子即可 一共5个 数控特环内 数据耦合 两个模块之间通过参数交换信息 信息仅为
  • 自动化运维管理工具 Ansible

    自动化运维管理工具 Ansible 一 Ansible介绍 Ansible是一个基于 Python开发 的配置管理和应用部署工具 现在也在自动化管理领域大放异彩 它融合了众多老牌运维工具的优点 Pubbet和Saltstack能实现的功能
  • Altium Designer侧边栏分上下或者左右两栏,并恢复

    如何分上下或左右 拖动的时候 鼠标移动到上面红框内 即可有提示 松开即完成 如何恢复 按住Shift 并鼠标拖动
  • Pytorch显存动态分配规律探索

    下面通过实验来探索Pytorch分配显存的方式 实验 显存到主存 我使用VSCode的jupyter来进行实验 首先只导入pytorch 代码如下 import torch 打开任务管理器查看主存与显存情况 情况分别如下 在显存中创建1GB
  • unity读取excel数据并绘制曲线

    一 读取数据 1 导入EPPlus类库 EPPlus dll 2 创建script脚本 3 创建空物体 挂载脚本 using System Collections using System Collections Generic using
  • android studio怎么更换默认主题?

    Android Studio默认主题IntelliJ 我们可以修改成黑色的Dracula的主题或者是Windows主题 1 首先双击桌面Android Studio图标 打开Android Studio 2 选择Android Studio
  • python3 nelink

    https github com facebookarchive gnlpy blob master netlink py 其中 注意这的encode decode 操作 class NulStringType object Ensure
  • hive-03-hive的分区

    1 hive分区与Bucket的畏难情绪 刚刚开始学习 这个的时候 一直感觉他比较难 看名字就觉得不好理解 但是实际上学起来超级简单 出现背景 这个东西为什么出来呢 来看一个需求 技术的的出现总是因为有了需求才会诞生的 假设我们有数据宾馆的
  • 1x pcie 引脚_PCIe 接口 引脚定义 一览表

    针脚号 定义 B 说明 定义 A 说明 1 12V 12V电压 PRSNT1 热拔插存在检测 2 12V 12V电压 12V 12V电压 3 RSVD 保留针脚 12V 12V电压 4 GND 地 GND 地 5 SMCLK 系统管理总线时
  • mac 安装 Adobe CC XD

    Adobe CC XD 在中国区已经免费 没什么破解一说 1 打开网址 https www adobe com cn products xd html 点击免费获取XD 下载 XD Installer dmg 2 双击 XD Install
  • sqli-labs/Less-13

    首先需要判断一下注入类型 输入如下 admin 存在报错信息 所以可以进行报错注入 但是无论正确与否都不会存在回显所以不能使用联合注入这题我们就是用报错注入吧 然后从报错信息我们可以知道注入类型为单引号注入 而且带有一个括号 我们进行作证
  • 图扑智慧城市

    十四五 新型城镇化实施方案 提出围绕提升城市治理能力智慧化水平提高数字政府服务能力 推行城市数据一网通用 城市运行一网统管 政务服务一网通办 公共服务一网通享 增强城市运行管理 决策辅助和应急处置能力 构建 人 企 地 物 政 五张城市基础
  • 输入商品单价和商品数量(输入负数时代表输入结束),自动计算商品总价,若支付金额不足会提示生育应付金额

    输入商品单价和商品数量 输入负数时代表输入结束 自动计算商品总价 若支付金额不足会提示生育应付金额 package day04 import java util Scanner public class Demo04 public stat
  • 在b站上跟着沐神学习深度学习

    算是给自己做个记录吧 每次学习之后都做点自己的笔记 加深一下印象吧 之前也看过一些资料 但是到头来还是有点乱 立下此贴为证 好好学习
  • python三位数水仙花数(附零基础学习资料)

    前言 所以直接上代码 python输入一个水仙花数 三位数 输出百位十位个位 从控制台输入一个三位数num 如果是水仙花数就打印num是水仙花数 否则打印num不是水仙花数 任务 1 定义变量num用于存放用户输入的数值 2 定义变量gw
  • TS中的泛型

    一 泛型是什么 有什么作用 当我们定义一个变量不确定类型的时候有两种解决方式 使用any 使用any定义时存在的问题 虽然 以 知道传入值的类型但是无法获取函数返回值的类型 另外也失去了ts类型保护的优势 使用泛型 泛型指的是在定义函数 接