TypeScript之泛型

泛型的基本使用

// 函数的作用：根据数量产生对应个数的数据，存放在一个数组中

//  T  >>（可以定义为任意的）  表示可以输入任意类型的
function getArr<T>(value:T,count:number):T[]{
    const  arr:T[] = []
    for (let i= 0;i<count;i++){
        arr.push(value)
    }
    return arr
}

// 此时可能想到 会传其他的类型的，这时候我们就会想 把number 类型 改为 any 类型
// 但是原则是是不推荐用 any 的，那么此时就可以用到泛型
// 使用泛型，在定义时不需要先确定类型，而是使用的时候再去确定
// 如果没有确定的话，就会走类型推断
console.log(getArr('大白',4))
console.log(getArr<number>(123,4))

多个泛型参数

// [123,"123"] --> ["123",123]
function  updateArr<T,U>(t:[T,U]):[U,T]{
    return [t[1],t[0]]
}

console.log(updateArr<string,number>(['123',123]))
console.log(updateArr<boolean,number>([true,123]))

泛型约束

TypeScript 泛型约束是一种限制泛型类型参数范围的方式，它可以确保泛型参数满足特定的条件。
通过使用泛型约束，我们可以在编译时检查泛型参数是否符合预期，从而提高代码的稳定性和可读性。

泛型约束通常采用 extends 关键字来实现，即通过 extends 将泛型参数限制为某个类型或接口的子集

interface Lengthwise {
    length: number;
}

// 泛型约束，必须有length 属性
function getLength<T extends Lengthwise>(arg: T): number {
    return arg.length;
}

let str = "hello";
let arr = [1, 2, 3];
console.log(getLength(str)); // 输出 5
console.log(getLength(arr)); // 输出 3

泛型接口和泛型类

// 泛型接口是一种定义接口时使用泛型参数的方式
interface GenericIdentityFn<T> {
    (arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

//泛型类是一种定义类时使用泛型参数的方式
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

更多内容请关注公众号：不懂web的小v。