乐趣区

关于前端:TS泛型以及多个泛型参数

jiezi

泛型

给函数或者属性定义类型的时候，类型是固定的，当业务产生变动时可能不好保护，例如：函数类型固定为 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

退出移动版