泛型

5/26/2024 ts

# 1.泛型 -[掌握+重点+难点]

泛型: 泛指 一切类型

// 一个函数 传递进来什么数据类型就返回该数据类型
function fn(a){
    return a;
}
1
2
3
4
function fn(a:any):any{
    return a;
}
fn(100);
fn('啦啦啦')
1
2
3
4
5

# 1.1 泛型基础语法

泛型 针对函数的封装时 进行数据类型传递

//定义一个变量 等待 调用时传递过来的 数据类型进行确定
function fn<T>(a:T):T{
    return a;
}

fn(1000 )    // T===number
fn('1111')  // T===string
fn<boolean>(true);  //true   T==boolean
1
2
3
4
5
6
7
8

# 1.2 泛型的问题---泛型约束 extends

1.泛型 丢失 部分的原始类型的 特征

​ 丢失的原始的数据类型 本来的特征 通过 泛型的约束重新包含这个特征

function sum<T>(arr:T):number{
    return arr.length;   //报错 T 没有 length属性
}
console.log( sum([100,221,0,12,12,1]) );
console.log( sum(['xxx','ssss','ss']) );
1
2
3
4
5
  • 解决:泛型约束
// 泛型约束:丢失的原始的数据类型 本来的特征 通过 泛型的约束重新包含这个特征
interface L{
    length:number
}
function sum<T extends L>(arr:T):number{
    return arr.length;
}
console.log( sum([100,221,0,12,12,1]) );
console.log( sum(['xxx','ssss','ss']) );
1
2
3
4
5
6
7
8
9

2.泛型与 泛型之间 不能进行 运算符操作

 function sum<T>(a:T,b:T):T{
     return a+b;  //报错
 }
 sum(100,200)
1
2
3
4
  • 解决-函数重载
function add(a: string, b: string): string
function add(a: number, b: number): number
function add(a: any, b: any) {
    return a + b;
}
console.log(add(11,22));    //33
console.log(add('ssss','eeeee'));  //sssseeeee
1
2
3
4
5
6
7