泛型
泛型函数
泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持(类型校验)
ts
// 传入什么类型就返回什么类型
function a(val:string):string{
return val
}
function b(val:number):number{
return val
}
// 这样写会导致冗余,用 any 可以解决这个问题,但放弃了类型检查,传入返回导致不一致
function a(val:any):any{
return val
}
- 使用泛型表示
ts
// <T> 表示泛型,调用这个方法时来决定类型
function a<T>(val:T):T{
return val
}
a<string>('val') // ok
a<number>(123) // ok
a<string>(123) // 错误
- 返回泛型数组
ts
function getData<T>(x:T,y:T):T[]{
let arr : T[] = [x,y]
return arr
}
getData<string>('a','b')
getData<number>(1,2)
- 多个泛型
ts
function duble<K,V>(val1:K,val2:V):[K,V]{
return [val1,val2]
}
泛型类
ts
class Person<T>{
public arr:T[] = []
add(val:T):void{
this.arr.push(val)
}
getIndex(i:number):T{
return this.arr[i]
}
}
const p1: Person<string> = new Person()
p1.add('a')
p1.add('b')
p1.add('c')
// p1.add(2) // 错误
p1.getIndex(2) // c
const p2 = new Person<number>()
p2.add(1)
p2.add(2)
p2.add(3)
// p2.add('4') // 错误
p2.getIndex(2)
应用
ts
/* 用户数据 */
interface UserInfo<T> {
[prop: string]: T;
}
/* 存储信息的类 */
class Db<T> {
public list: UserInfo<T> = {};
/* 添加用户 */
add(params: T, id: string) {
this.list[id] = params;
}
/* 更新用户 */
updated(params: T, id: string) {
this.list[id] = {...this.list[id], ...params};
}
/* 删除用户 */
del(id: string) {
delete this.list[id];
}
}
/* 用户信息的类 */
class User {
public name: string | undefined;
public age: number | undefined;
public status: number | undefined;
constructor(params: { name: string; age: number; status?: number }) {
this.name = params.name;
this.age = params.age;
this.status = params.status;
}
}
const user = new User({name:'tom',age: 12});
const user1 = new User({name:'tom1',age: 22,status: 2});
/* 将用户信息的类作为泛型使用 */
const db = new Db<User>();
/* 操作 */
db.add(user,'1')
db.updated(user1,'1')
db.del('1')
/* 用户账号的类 */
class Accounts {
public name: string | undefined;
public password: string | undefined;
constructor(params: { name: string; password: string; }) {
this.name = params.name;
this.password = params.password;
}
}
/* 将用户账号的类作为泛型使用 */
const db1 = new Db<Accounts>();
/* 操作 */
db1.add(new Accounts({name: 'tom',password: '234'}),'123')
db1.updated(new Accounts({name: 'my',password: '222'}),'123')
db1.del('123')
泛型接口
ts
interface Config {
(str: string): string;
}
const myFn: Config = (str: string) => str;
将上面的代码改成泛型表示
- 使用时定义
ts
interface Config {
<T>(str: T): T;
}
const myFn: Config = <T>(str: T) => str;
// es5
// var myFn1: Config = function <T>(str: T) {
// return str;
// };
myFn<string>('abc')
myFn<string>(12) // 错误
- 声明时定义
ts
/* 声明接口时<T> */
interface Config<T> {
(str: T): T;
}
/* 声明函数式定义 */
const myFn: Config<string> = <T>(str: T) => str;
myFn('abc')
myFn(233) // 错误