一、TypeScript的泛型接口代码


//泛型接口：在定义接口时，为接口中的属性或方法定义泛型类型，在使用接口时，再指定具体宕泛型类型
(() => {//定义一个泛型接口
interface IBaseCRUD<T>{data: Array<T>add: (t: T) => TgetUserId: (id: number) => T
}//定义一个类，用来存储用户的相关信息(id,名字,年龄)
class User{id?: number //用户id？代表属性可有可无name: stringage: numberconstructor(name: string,age: number){this.name = namethis.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);}}//实例化添加用户信息对象的类UserCRUDconst 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 }

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

Vue3+TypeScript从入门到精通系列之：Try changing the lib compiler option to es2015 or later
Vue3+TypeScript从入门到精通系列之:Try changing the lib compiler option to es2015 or later tsc ./泛型接口.ts tsc编译 ...
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...
【ArcGIS遇上Python】从入门到精通系列之第一章：ArcGIS Python简介
文章目录 1. Python简介 2. Python的特点 3. ArcGIS的脚本语言 4. ArcGIS中的Python脚本编辑器 1. Python简介 Python是一种跨平台的计算机程序设计 ...
Linux从入门到精通系列之PPTP
Linux从入门到精通系列之PPTP 今天我们来说下怎么在linux环境下如何搭建PPTP-×××,PPTP(Point to Point Tunneling Protocol),即点对点隧道协议.该 ...
Jenkins pipeline 入门到精通系列文章
Jenkins2 入门到精通系列文章. Jenkins2 下载与启动 jenkins2 插件安装 jenkins2 hellopipeline jenkins2 pipeline介绍 jenkins2 ...
html5从基础到入门,Html5从入门到精通系列2：Html5基础
Html5从入门到精通系列2:Html5基础 (2015-04-04 11:36:53) 标签: html5 html5教程 html5视频教程 html5从入门到精通 2-1.1.HTML5简介.M ...
ArcGIS10从入门到精通系列实验图文教程（附配套实验数据持续更新）
文章目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介本教程<ArcGIS从入门到精通系列实验教程>内容包括:ArcGIS平台简介.ArcGIS应用基础.空间数据的采集 ...
OpenShift从入门到精通系列之一：通过OpenShift实现数字化转型
OpenShift从入门到精通系列之一:通过OpenShift实现数字化转型一.企业数字化转型之PaaS 二.企业数字化转型之DevOps 三.企业数字化转型之微服务四.微服务架构的主要类型五. ...
网沙(爱玩啥)韩顺平.循序渐进学.java.从入门到精通系列视频分享
网沙(爱玩啥)韩顺平.循序渐进学.java.从入门到精通系列视频分享韩顺平.循序渐进学.java.从入门到精通.第0讲-开山篇韩顺平.循序渐进学.java.从入门到精通.第1讲-内容介绍.项 ...

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

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

一、TypeScript的泛型接口代码

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

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

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

最新文章

热门文章