泛型

泛型函数

泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持(类型校验)

// 传入什么类型就返回什么类型
function a(val:string):string{
  return val
}
function b(val:number):number{
  return val
}
// 这样写会导致冗余，用 any 可以解决这个问题，但放弃了类型检查，传入返回导致不一致
function a(val:any):any{
  return val
}

使用泛型表示

// <T> 表示泛型，调用这个方法时来决定类型
function a<T>(val:T):T{
  return val
}
a<string>('val') // ok
a<number>(123) // ok
a<string>(123) // 错误

返回泛型数组

function getData<T>(x:T,y:T):T[]{
  let arr : T[] = [x,y]
  return arr
}

getData<string>('a','b')
getData<number>(1,2)

多个泛型

function duble<K,V>(val1:K,val2:V):[K,V]{
  return [val1,val2]
}

泛型类

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)

应用

/* 用户数据 */
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')

泛型接口

interface Config {
  (str: string): string;
}
const myFn: Config = (str: string) => str;

将上面的代码改成泛型表示

使用时定义

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) // 错误

声明时定义

/* 声明接口时<T> */
interface Config<T> {
  (str: T): T;
}
/* 声明函数式定义 */
const myFn: Config<string> = <T>(str: T) => str;
myFn('abc')
myFn(233) // 错误

泛型 ​

泛型函数 ​

泛型类 ​

应用 ​

泛型接口 ​

评论 #

泛型

泛型函数

泛型类

应用

泛型接口

评论