TS笔记 - 05泛型 <T>

泛型

不仅规范API，也要考虑可重用性。同时也能支持未来的数据类型。 一种组件可以支持多种 数据类型。

解决 类 接口方法的复用性，以及对不特定的数据类型的支持

1
2
3
4
5
// 以往代码 复杂 不可复用 代码冗余
function getData1(value:string){return value}
function getData2(value:number){return value}
// 以往代码 比较粗暴 放弃了类型检查
function getData(value:any){return value}

泛型定义

1
2
3
4
5
6
7
8
// T表示泛型
function getData<T>(value:T):T{ // 最后这个T表示返回类型
  return value;
}

getData<number>(123); //success
getData<string>('zhangsan'); //success
getData<number>('123'); //error

泛型类

比如有个最小堆算法，需要同时支持返回数字和字符串两钟类型 通过类泛型来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MinClass<T>{
  list:T[]=[];
	add(num:T){
    this.list.push(num);
  }
	min():T{
    // return minNum;
  }
}
// 实例化类 并且制定了类T代表的类型
var m = new MinClass<number>(); 
m.add(3);
m.add(32);
// or
var m = new MinClass<string>();
m.add('222');
m.add('333');

m.min();

泛型接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 第一种 写法
interface Config{
  <T>(value:T):T;
}
var setData:Config = function<T>(value:T):T{
  return value;
}
setData<string>('zhangsan')

// 第二种 写法
interface Config<T>{
  (value:T):T;
}
function getData<T>(value:T):T{
  return value;
}
var myGetData:Config<string> = getData;
myGetData('zhangsan')
// or
var myGetData:Config<number> = getData;
myGetData(123)

把类作为参数类型的泛型类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
class User{
  username:string | undefined;
  password:string | undefined;
}
class MysqlDB{
  add(user:User):boolean{
    console.log(user);
  }
}
var U = new User();
U.username = 'zhangsan';
U.password = '123456';

var D = new MysqlDB()
D.add(U);

// 泛型类
// 1 去除重复代码 2 对于不特定类进行数据校检

class MysqlDB<T>{
  add(info:<T>):boolean{
    console.log(info);
  }
}
class User{
  username:string | undefined;
  password:string | undefined;
}
var U = new User();
U.username = 'zhangsan';
U.password = '123456';
var D = new MysqlDB<User>();
D.add(U);

class Article{
  title:string | undefined;
  desc:string | undefined;
  status:number | undefined;
	constructor(params:{
     title:string | undefined,
     desc:string | undefined,
     status?:number | undefined
  }){
    this.title = params.title
    this.desc = params.desc
    this.status = params.status
  }
}
var A = new Article({
  titile:'123',
  desc:'123'
});
var S = new MysqlDB<Article>();
S.add(A);

定义一个操作数据库的库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
indterface DBI<T>{
  add(info:T):boolean;
  update(info:T,id:number):boolean;
  delete(id:number):boolean;
  get(id:number):any[];
}
//定义一个操作mysql的类
class MysqlDB<T> implements DBI<T>{
  constructor(){
    // 可以在此写与数据库建立连接
  }
  add(info:T):boolean{
  	
	}
	update(info:T,id:number):boolean{
  
	}
  delete(id:number):boolean{
  
	}
  get(id:number):boolean{
  
	}
}
// 操作用户表 定义一个User类和数据库映射
class User{
  username:string | undefined;
  password:string | undefined;
}
var U = new User();
U.username = 'zhangsan';
U.password = '123456';
var oMysql = new MysqlDB<User>();
oMysql.add(U);