typescript学习回顾(五)

今天来分享一下ts的泛型，最后来做一个练习

泛型

有时候，我们在书写某些函数的时候，会丢失一些类型信息，比如我下面有一个例子，我想提取一个数组的某个索引之前的所有数据

function getArraySomeData(newArr, n:number) {let newArr2:any[] = [];newArr.forEach((it, i) => {if (n > i) {newArr2.push(it);}});return newArr2;
}const arr = getArraySomeData(['1112', '1213', '121'], 2);
console.log(arr)

但是这个数组它可以是任意类型的，可以是对象，字符串，数字数组，这个时候不约束的话会存在ts的隐患，这个时候就有了泛型的概念。

概念

泛型的一个概念：

泛型相当于是一个类型变量，在定义时，无法预先知道具体的类型，可以用该变量来代替，只有在调用时，才能确定它的类型

很多时候,TS会智能的根据传递的参数，推导出泛型的具体类型

我们可以把刚才的代码使用泛型改成这种形式

function getArraySomeData<T>(newArr:T[], n:number) {let newArr2:T[] = [];newArr.forEach((it, i) => {if (n > i) {newArr2.push(it);}});return newArr2;
}const arr = getArraySomeData(['1112', '1213', '121'], 2);
console.log(arr)

如果没有传递具体类型，无法完成推导，默认是空对象。

进行传值

如果我传递值只有ts会根据传递的类型进行严格类型检查，如下图，传递的是number，传递的就必须都是number

在这里插入图片描述

泛型设置默认值

function getArraySomeData<T = number>(newArr:any[], n:number) {}

在类型别名、接口、类使用泛型

回调函数，判断数组的某一项是否满足条件，这个某一项可以用泛型来代替

类型别名

type callback<T> = (n:T,i:number) => boolean;

接口

下面手动写了一个筛选的filter函数

interface callback<T> = (n:T,i:number) => boolean;function filter<T>(arr: T[], callback: callback<T>): T[] {const newArr: T[] = [];arr.forEach((n, i) => {if (callback(n, i)) {newArr.push(n);}});return newArr;
}

类

下面这个例子是一个数组帮助类，通过在类最外面设置了泛型T，来约束里面所有的方法的泛型，之后传递的所有的参数泛型以及数组放行，都是传递的值。

export class ArrayHelper<T> {constructor(private arr:T[]){}take(n: number): T[] {if (n >= this.arr.length) {return this.arr;}const newArr: T[] = [];for (let i = 0; i < n; i++) {newArr.push(this.arr[i])}return newArr;}shuffle() {for (let i = 0; i < this.arr.length; i++) {const targetIndex = this.getRandom(0, this.arr.length);const temp = this.arr[i];this.arr[i] = this.arr[targetIndex];this.arr[targetIndex] = temp;}}private getRandom(min: number, max: number) {const dec = max - min;return Math.floor(Math.random() * dec + min)}
}

泛型约束

这个是在有些特定场景的时候会需要使用，这里举一个简单的例子，我传递一个对象，然后我需要把这个对象的时间戳转换成日期字符串的形式

function dateFormat<T>(obj:T):T{obj.time = util.timeFormat(obj.time);return obj;
}

这个时候，ts会智能报错，报错的位置是obj.time的位置，因为泛型可以传递的类型是任意的类型，所以我用对象属性的方式，ts会进行报错，所以这种情况需要类型的约束

具体怎么做呢，很简单

interface hasTimePro{time : number
}function dateFormat<T extends hasTimePro>(obj:T):T{obj.time = util.timeFormat(obj.time);return obj;
}

上面通过接口定义要约束的泛型的类型，可以是对象，也可以是其他。然后在泛型里进行继承，继承这个接口，这样就可以对这个泛型进行一个约束。

多泛型

在很多情况下，我们可能参数特别多，要限制的类和接口可能不止一个，所以ts同样支持可以有多个泛型，具体的使用例子

我希望混合两个数组，数组1和数组2，两个可能都是不一样的数组，但是两个数组长度必须一样，至于传递什么类型不管，只负责混合。这里就可以通过英文逗号将泛型隔开，然后设置多个泛型

function mixinArray<T, K>(arr1: T[], arr2: K[]): (T | K)[] {if (arr1.length !== arr2.length) {throw new Error('两个数组长度不等');}let result: (T | K)[] = [];for (let i = 0; i < arr1.length; i++) {result.push(arr1[i]);result.push(arr2[i]);}return result;
}const result = mixinArray([1, 3, 4], ["a", "b", "c"]);result.forEach(r => console.log(r));

小练习

开发一个字典类（Dictionary），字典里会保存键值对的数据键值对数据的特点：
- 键（key）可以是任何类型，但不允许重复
- 值（value）可以是任何类型
- 每一个键对应一个值
- 所有的键类型相同，所有的值类型相同字典类对键值对数组的操作：- 添加一个键值对
- 按照键删除对应的键值对
- 循环每一个键值对
- 得到当前键值对的数量
- 判断某个键是否存在
- 重新设置某个键的值，如果不存在，就添加

代码

src

dictionary.ts

export type CallBack<K, V> = (key: K, val: V) => voidexport class Dictonary<K, V> {private keys: K[] = [];private vals: V[] = [];get size() {return this.keys.length;}set(key: K, val: V) {const i = this.keys.indexOf(key)if (i < 0) {this.keys.push(key);this.vals.push(val);} else {this.vals[i] = val;}}forEach(callback: CallBack<K, V>) {this.keys.forEach((k, i) => {const v = this.vals[i];callback(k, v);});}has(key: K) {return this.keys.includes(key);}delete(key: K) {const i = this.keys.indexOf(key);if (i === -1) {return;}this.keys.splice(i, 1);this.vals.splice(i, 1);}
}

index.ts

import { Dictonary } from "./dictionary";const dic = new Dictonary<string, number>();dic.set('a', 1);
dic.set('b', 1);
dic.set('a', 12);
dic.set('c', 1231);dic.forEach((d,i)=>{console.log(`key:${d},v:${i}`)
});dic.delete('b');dic.forEach((d,i)=>{console.log(`key:${d},v:${i}`)
});console.log('当前键值对的数量:' + dic.size)