泛型
凯 5/26/2024 ts
# 1.泛型 -[掌握+重点+难点]
泛型: 泛指 一切类型
// 一个函数 传递进来什么数据类型就返回该数据类型
function fn(a){
return a;
}
1
2
3
4
2
3
4
function fn(a:any):any{
return a;
}
fn(100);
fn('啦啦啦')
1
2
3
4
5
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
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
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
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
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
2
3
4
5
6
7