TypeScript中泛型<T>详细讲解

1.泛型

在定义函数或者接口或者类的时候
不能预先确定要使用的数据类型
而是在使用函数、接口、或者类的时候才能够确定数据类型
这个时候我们就需要使用的是泛型

2.功能描述

我们需要实现一个方法，方法中有两个参数，
第一参数表示的是传入的内容值，第二个参数表示的长度或者个数
根据内容值产生对应个数，然后存放在数组中，最后返回来

3.分析上述功能

由于传入的内容值可能是字符串，也有可能是数字，也有可能是布尔类型的；
只有在传递的时候我们才知道数据的类型
这个时候我们就需要使用泛型<T>

4.实现上述功能

function getArr<T>(cont:T, len:number):T[]{
    // const arr:T[]=[] //这是一个泛型数组 或者这样写
    const arr: Array<T> = []; //泛型必须要有一个初始值
    for (let i = 0; i < len;i++) {
        arr.push(cont)
    }
    return arr
}
const arr1 = getArr<number>(11.1, 3);
console.log(arr1)

5.简单说明上述代码

function getArr<T> 表示该函数中的类型值是不确定的，
只有在传递的时候才知道，因此使用了泛型。

cont:T 内容值是泛型

function getArr<T>(cont:T, len:number) :T[]{ }
返回来的是一个数组泛型，数组中值类型不确定

const arr: Array<T> = []; 和 const arr:T[]=[]
声明一个数组泛型，必须给一个初始值。【重要】

const arr1 = getArr<number>(11.1, 3);
传递的类型值是数字

6.函数中有多个泛型的参数

// 多个泛型参数的函数:函数中有多个泛型的参数
function getMsg<K, T>(cont1:K, cont2:T):[K,T] {
    return [cont1,cont2]
}
const arr = getMsg<string, number>('哈哈', 2);

7.简单说明一下上述的代码

由于第一个类型的值和第二个类型的值都是不确定的，
所以有了泛型
function getMsg<K, T>(cont1:K, cont2:T):[K,T] { }
在使用的时候const arr = getMsg<string, number>('哈哈', 2);
我们的第一个值是字符串，第二个值是数字

接口中泛型设置默认值

// 接口中泛型设置默认值为对象
interface BackResult<T = {}> {
    code: number,
    back:T
}

let backData: BackResult = {
    code: 200,
    back: {
        data: [{name:'张三', age:100}]
    }
}

接口中泛型数据类型

// 接口中泛型设置数据类型
interface BackResult<T=number> {
    code: number,
    back:T
}

let backData: BackResult = {
    code: 200,
    back: 100
}

接口中泛型数据类型,如果用户传递了，以用户的类型为准

// 接口中泛型设置默认数据类型，如果你没有传递参数，默认类型就是数字
interface BackResult<T=number> {
    code: number,
    back:T
}

// 这里我声明了数据类型，泛型的类型是字符串
let backData: BackResult<string> = {
    code: 200,
    back:'操作成功'
}

泛型T使用extends做约束

// 泛型T的数据类型只接字符串类型和数字类型的
interface Person<T extends string | number, G > {
    name: T;
    other:G
}

// 这里的第一个参数是：字符串类型
let obj1: Person<string, number > = {
    name: '张三',
    other:168,
}
// // 这里的第一个参数是：数组类型
let obj2: Person<number, number> = {
    name: 12,
    other: 168,
}

使用 type 做别名优化 上面的代码

type strOrnum = string | number
// 泛型T的数据类型只接字符串类型和数字类型的
interface Person<T extends strOrnum, G > {
    name: T;
    other:G
}
// 这里的第一个参数是：字符串类型
let obj1: Person<string, number > = {
    name: '张三',
    other:168,
}
// // 这里的第一个参数是：数组类型
let obj2: Person<number, number> = {
    name: 12,
    other: 168,
}