TypeScript泛型

最新推荐文章于 2024-05-09 00:00:45 发布

云边有个--小卖部

最新推荐文章于 2024-05-09 00:00:45 发布

阅读量325

点赞数 2

分类专栏： TypeScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_62115642/article/details/126783978

版权

TypeScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、泛型的基本使用

泛型可以理解为宽泛的类型，通常用于类和函数。使用的时候我们再指定类型

泛型不仅可以让我们的代码变得更加健壮,还能让我们的代码在变得健壮的同时保持灵活性和可重用性

通过用<T>来表示，放在参数的前面

export default {}

// const arr1: string[] = ["a", "b", "c", "d"];
// const arr2: Array<string> = ["熊大", "熊二", "光头强"]
// const arr3: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8,]

// fill:填充
// let res = new Array(3).fill("光头强");
// console.log(res);

// let getArray = (value: number, itmes: number): number[] => {
//     return new Array(itmes).fill(value);
// }
// let res1=getArray(12,34);
// console.log(res1);


// 使用any
// let getArray = (value: any, itmes: number): any[] => {
//     return new Array(itmes).fill(value);
// }
// let res1=getArray("熊大",10);
// console.log(res1);

// 使用泛型  <T>
let getArray =<T> (value: T, itmes: number): T[] => {
    return new Array(itmes).fill(value);
}
let res1=getArray("熊大",10);
let res2=getArray(10,10);
console.log(res1);
console.log(res2);

2、泛型约束

在TS中，我们需要严格的设置各种类型，我们使用泛型之后，将会变得更加灵活，

但同时也将会存在一些问题我们需要对泛型进行约束来解决这些问题

export default {}

// function getLength<T>(arr: T): T {
//     console.log(arr.length);//类型“T”上不存在属性“length”。
//     return arr;
// }

// function getLength<T>(arr:Array<T>):Array<T>{
//     console.log(arr.length);
//     return arr;
// }

getLength([1, 2, 3, 4]);
getLength(["熊大","熊二"]);
getLength(["熊大"]);

interface ILength{
    length: number;
}
// getLength继承ILength的length属性
function getLength<T extends ILength>(arr:T):number{
    return arr.length
}

3、泛型接口

将泛型与接口结合起来使用，可以大大简化我们的代码，增加我们的代码可读性

泛型也可以使用默认值

export default{}
 
interface IPerson <T1,T2>{
    name:T1
    sex:T2
}
let p0:IPerson<string,string>={
    name: "熊二",
    sex: "公"
}
console.log(p0);

interface IPerson <T1=string,T2=string>{
    name:T1
    sex:T2
}
let p1:IPerson={
    name: "翠花",
    sex: "母"
}
console.log(p1);

4、泛型类

泛型类看上去与泛型接口差不多。泛型类使用（<>）括起泛型类型，跟在类名后面。

export default {}
class Person<T1, T2>{
    name: T1;
    age: T2;
    sex: T1;
    constructor(name: T1, age: T2, sex: T1) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
}
let p0 = new Person("熊大", 18, "男");
console.log(p0);