【TS】泛型以及多个泛型参数

泛型

给函数或者属性定义类型的时候,类型是固定的,当业务发生变动时可能不好维护,例如:函数类型固定为string,后续需求更改不好维护,比如需要传入number类型,那么这个函数就不适用了

function add( val : string) : string{
     return val
}

为了解决这个问题,可以使用泛型,在调用的时候确定它是什么类型

  • 泛型:在定义函数、接口、类的时候不能预先确定要使用的数据类型,而是在使用函数、接口、类的时候才确定数据的类型
  • 如果直接在函数上定义数据类型,那么这个类型就固定了,后期只能通过类型重载更改
  • 为了便于维护,可以用到泛型
  • 给函数传入一个 自定义 类型,此类型由调用的时候规定,在调用是确定它的函数类型
    语法: function add<自定义>(val : 自定义) : 自定义 {}
function add<T>( val : T) : T{
 console.log(typeof val);
         return val
}

这样就定义好了泛型,这个<T>就是定义好的泛型,传入的类型是T返回的数据类型也是T,目前的类型不确定,在调用函数的时候确定是哪个类型。

// 在调用的时候确定,自定义类型为number 传入 数字类型的值
const arr1 = add<number>(1)
// 在调用的时候确定,自定义类型为string 传入 字符串类型的值
const arr2 = add<string>('东方不败')
// 在调用的时候确定,如果不传入类型,系统会自动类型推断
const arr3 = add(true)  

在这里插入图片描述
输出结果

console.log(arr1);
console.log(arr2);
console.log(arr3);

在这里插入图片描述


多个泛型参数

在使用泛型的时候可以规定多个,在传入时确定多个值的类型

// 传入 规定参数类型的值 ,返回 规定参数类型的值
function getMsg<T,S>(val : T , str : S) : [T,S]{
    return [val , str]
}

此处定义了两个泛型,在传入的时候需要定义两个数据类型与之对应

// 调用 getMsg 规定类型为 string 和 number  传入 字符串和数字
const arr = getMsg<string,number>('东方不败',100.123)

注意
此处传入的数据类型必须跟定义的数据类型位置一致,否则报错

// 报错,和规定传入的参数类型不匹配,必须是第一个参数字符串,第二个参数数字
const arr2 = getMsg<string,number>(100,'东方不败')  

在这里插入图片描述
既然泛型是在调用的时候确定其数据类型,那么可以用数字或字符串方法来检测是否可以使用

console.log(arr);  
console.log(arr[0].split(''));  // 正常,字符串类型可以使用字符串方法
console.log(arr[1].toFixed(2)); // 正常,数字类型可以使用数字方法

在这里插入图片描述


案例源码:https://gitee.com/wang_fan_w/ts-seminar

如果觉得这篇文章对你有帮助,欢迎点亮一下star

18 声望
5 粉丝
0 条评论
推荐阅读
微信小程序登录流程与实现
首先需要写一个微信小程序的登录弹窗,登录弹窗的作用就是发起登录,让用户点击授权后登录小程序,该弹窗是一个全局弹窗,因为小程序是有分享功能的,如果新用户是从分享的链接进来的,那么会先让新用户登录再做...

兔子先森阅读 130

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.7k评论 81

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen153阅读 17.9k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.6k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan47阅读 3.3k评论 14

封面图
18 声望
5 粉丝
宣传栏