Vue3+TypeScript从入门到精通系列之：泛型接口

一、TypeScript的泛型接口代码

//泛型接口：在定义接口时，为接口中的属性或方法定义泛型类型，在使用接口时，再指定具体宕泛型类型
(() => {

//定义一个泛型接口
interface IBaseCRUD<T>{
  data: Array<T>
  add: (t: T) => T
  getUserId: (id: number) => T
}

//定义一个类，用来存储用户的相关信息(id,名字,年龄)
class User{
  id?: number //用户id？代表属性可有可无
  name: string
  age: number

  constructor(name: string,age: number){
      this.name = name
      this.age = age
    }
}

class UserCRUD implements IBaseCRUD<User>{
  data: Array<User> = []

  add(user: User): User {
    user.id = Date.now() + Math.random()
    this.data.push(user)
    return user
  }

  getUserId(id: number): User{
    return this.data.find(user => user.id === id)
  }

}


//实例化添加用户信息对象的类UserCRUD
const userCRUD: UserCRUD = new UserCRUD()
//调用添加数据的方法
userCRUD.add(new User("犬夜叉",23))
userCRUD.add(new User("小南",15))



const { id } = userCRUD.add(new User("杀生丸",26))
userCRUD.add(new User("佐助",13))
console.log(userCRUD.data)

const user = userCRUD.getUserId(id)
console.log(user)


})()

二、TypeScript的泛型接口代码转化为js代码

 tsc ./泛型接口.ts -t es6

泛型接口.js的代码如下所示：

//泛型接口：在定义接口时，为接口中的属性或方法定义泛型类型，在使用接口时，再指定具体宕泛型类型
(() => {
    //定义一个类，用来存储用户的相关信息(id,名字,年龄)
    class User {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
    }
    class UserCRUD {
        constructor() {
            this.data = [];
        }
        add(user) {
            user.id = Date.now() + Math.random();
            this.data.push(user);
            return user;
        }
        getUserId(id) {
            return this.data.find(user => user.id === id);
        }
    }
    //实例化添加用户信息对象的类UserCRUD
    const userCRUD = new UserCRUD();
    //调用添加数据的方法
    userCRUD.add(new User("犬夜叉", 23));
    userCRUD.add(new User("小南", 15));
    const { id } = userCRUD.add(new User("杀生丸", 26));
    userCRUD.add(new User("佐助", 13));
    console.log(userCRUD.data);
    const user = userCRUD.getUserId(id);
    console.log(user);
})();

三、泛型接口.js输出如下所示

node ./泛型接口.js
[
  User { name: '犬夜叉', age: 23, id: 1644674548832.4097 },
  User { name: '小南', age: 15, id: 1644674548832.0474 },
  User { name: '杀生丸', age: 26, id: 1644674548832.2822 },
  User { name: '佐助', age: 13, id: 1644674548832.5369 }
]
User { name: '杀生丸', age: 26, id: 1644674548832.2822 }