vue项目使用typescript创建抽象类及其使用

如题,可以在vue项目使用typescript创建抽象类,然后使用这个抽象类。

通过TypeScript,可以在前端应用抽象类了。抽象类的好处,可以同时满足继承和多态,好处多多。以vue3为例:

1、创建抽象类

据说js类中,“#”开头的变量或方法,就是私有变量或方法(见拙作《vue项目中的类》)。但是,现在TypeScript有private、protected、public等全套关键词。

export abstract class ListPage {#queryForm //查询框表单对象,例如:const queryForm = ref(),<el-form ref="queryForm">#myPageSetup //分页对象,例如:const myPageSetup = cloneDeep(pageSetup)constructor(queryForm, pageSetup) {this.#queryForm = queryFormthis.#myPageSetup = pageSetup}//列表数据请求。抽象方法,子类必须实现abstract doQuery(): void//查询onSearch = () => {this.#myPageSetup.pageIndex = 1this.doQuery()}//重置onReset = () => {this.#queryForm.value.resetFields()}//跳转至指定页码onPageChange = (pageIndex) => {this.#myPageSetup.pageIndex = pageIndexthis.doQuery()}//改变分页大小onPageSizeChange = (size) => {this.#myPageSetup.pageIndex = 1this.#myPageSetup.pageSize = sizethis.doQuery()}//排序onColumnSort = ({ prop, order }) => {this.#myPageSetup.order = orderthis.#myPageSetup.sort = propthis.doQuery()}
}

2、应用该抽象类

class MyListPage extends ListPage {constructor() {super(defaultQueryForm, myPageSetup) // 在派生类的构造函数中必须调用super()}//实现抽象方法。async代表异步,基类中的没有声明是否异步,既可以异步,也可以不异步。doQuery = async () => {//巴拉巴拉巴拉}
}
const myListPage = new MyListPage()
myListPage.onSearch()

3、小结:

现在前端跟后端越来越像了。再也不是以前那种相对简单的三剑客了。本来吧,js广受欢迎,一个原因是它非常灵活,没有什么类型的限制,怎么写都可以。现在引入了TypeScript,到处声明类型,神憎鬼厌。有什么好处呢?难道声明了强类型后,没有类型转换,程序执行效率就提高了?未必吧,浏览器好像不直接支持typescript,最终还是要转换成原生js才能执行吧。这么说的话,所谓TypeScript也者,也不过是一种语法糖,让我们写代码时可以写这写那,假装在面向对象编程而已。有没有跟我一样,觉得这样反而不方便的?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

监督学习 - XGBoost(eXtreme Gradient Boosting)

什么是机器学习 XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种梯度提升树算法&#xff0c;它在梯度提升框架的基础上引入了一些创新性的特性&#xff0c;以提高模型性能和训练速度。XGBoost在解决结构化数据的分类和回归问题上表现出色&#xff0c;成为许多…

Unity-游戏与帧

游戏的本质就是一个死循环 “游戏的本质就是一个死循环”这句话&#xff0c;其实是指游戏引擎的主循环。游戏引擎是游戏开发中最核心的部分&#xff0c;它负责处理玩家的输入、更新游戏状态、渲染画面等工作&#xff0c;而这些工作都是在一个不断重复的循环中完成的。 具体来…

【快刊录用】ABS一星,2区,仅2个月15天录用!

2023年12月30日-2024年1月5日 进展喜讯 经核实&#xff0c;由我处Unionpub学术推荐的论文中&#xff0c;新增2篇论文录用、3篇上线见刊、1篇数据库检索&#xff1a; 录用通知 FA20107 FA20181 — 见刊通知 FB20805 FA20269 FA20797 检索通知 FA20199 — — 计算机…

配网故障定位技术的发展与应用:保障电力供应安全稳定的重要支撑

在现代社会&#xff0c;电力供应安全稳定对于国家经济发展和民生福祉至关重要。然而&#xff0c;随着电网规模的不断扩大&#xff0c;配网故障问题也日益突出。为了确保电力供应的连续性和可靠性&#xff0c;人们不断探索和研发各种故障定位技术。本文将介绍一种基于行波测距技…

[Linux 进程(二)] Linux进程状态

文章目录 1、进程各状态的概念1.1 运行状态1.2 阻塞状态1.3 挂起状态 2、Linux进程状态2.1 运行状态 R2.2 睡眠状态 S2.3 深度睡眠 D2.4 停止状态 T2.5 僵尸状态 Z 与 死亡状态 X孤儿进程 Linux内核中&#xff0c;进程状态&#xff0c;就是PCB中的一个字段&#xff0c;是PCB中的…

2401d,ddip1027如何支持sql

原文 以下是DIP1036的SQL支持方式: 这里 auto execi(Args...)(Sqlite db, InterpolationHeader header, Args args, InterpolationFooter footer) {import arsd.sqlite;//SQLite允许你执行?1,?2等操作enum string query () {string sql;int number;import std.conv;foreach…

智慧食堂管理方式,究竟改变了什么?

随着科技的迅速发展&#xff0c;餐饮业也在不断地迎来新的挑战和机遇。为了提升食堂管理效率、改善用户体验以及提高收益&#xff0c;许多食堂纷纷引入智慧收银系统。 客户案例 企业食堂改革 石家庄某大型企业食堂由于员工数量庞大&#xff0c;传统的收银方式难以满足快速就餐…

大话 JavaScript(Speaking JavaScript):第二十一章到第二十五章

第二十一章&#xff1a;数学 原文&#xff1a;21. Math 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 Math对象用作多个数学函数的命名空间。本章提供了一个概述。 数学属性 Math的属性如下&#xff1a; Math.E 欧拉常数&#xff08;e&#xff09; Math.LN2 2 …

Verilog 和 System Verilog 的区别

当谈到VLSI设计和数字电路建模时&#xff0c;verilog和system verilog是两种常用的硬件描述语言。这些 HDL 在 VLSI 设计中用于描述电子电路的行为和结构。它们都广泛应用于半导体行业来设计和实现集成电路&#xff08;IC&#xff09;。 它们是设计和模拟复杂数字系统的强大工具…

解决:ModuleNotFoundError: No module named ‘dbutils’

解决&#xff1a;ModuleNotFoundError: No module named ‘dbutils’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named dbutils背景报错问题报错翻译报错位置代码报错原因解决方法方法一&#xff0c;直接安装方法二&#xff0c;手动下载安装方法三&#xff0c;…

盈利之道:下单前的必问之问

投资者在过去的交易经历中&#xff0c;通常都会面临所谓的“交易低谷”。交易低谷是指在交易过程中难以实现盈利或可能导致进一步亏损的阶段。这种面临损失或没有盈利的时期可能发生在任何人身上&#xff0c;无论是由于市场变化、投资者策略调整还是其他原因。为了应对这种情况…

C++力扣题目--94,144,145二叉树递归遍历

思路 这次我们要好好谈一谈递归&#xff0c;为什么很多同学看递归算法都是“一看就会&#xff0c;一写就废”。 主要是对递归不成体系&#xff0c;没有方法论&#xff0c;每次写递归算法 &#xff0c;都是靠玄学来写代码&#xff0c;代码能不能编过都靠运气。 本篇将介绍前后…

Hibernate实战之操作MySQL数据库(2024-1-8)

Hibernate实战之操作MySQL数据库 2024.1.8 前提环境&#xff08;JavaMySQLNavicatVS Code&#xff09;1、Hibernate简介1.1 了解HQL 2、MySQL数据库建表2.1 编写SQL脚本2.2 MySQL执行脚本 3、Java操作MySQL实例&#xff08;Hibernate&#xff09;3.1 准备依赖的第三方jar包3.2 …

Mybatis自动加解密

涉及隐私信息的字段需要加密存储数据库&#xff0c;返回给前端时又需要解密显示正确信息。故采用mybatis自动加解密的方案&#xff0c;该方案基于自定义注解拦截器进行实现。加密后的信息不支持模糊匹配&#xff08;可参考业界流行方案&#xff0c;基于业务需求做分词或采用其他…

与听力学相关的职业都有哪些?怎么选择?

随着年龄的增长&#xff0c;每个人都可能面临听觉障碍的困惑。听力学领域专注于患者的耳朵问题&#xff0c;包括听力损失和平衡障碍。听力学职业是为患者提供听觉健康管理服务的职业&#xff0c;专注于他们耳朵的听力和平衡甚至言语相关需求。为患者进行听功能检查、测试、诊疗…

1.5如何用命令得到自己的ip<本地>

专栏导航 第四章 具有通用性的花生壳ddns脚本 第五章 如何用命令得到自己的ip<本地> ⇐ 第六章 用命令得到ip和域名解析<网络>() 用折腾路由的兴趣,顺便入门shell编程。 第五章 如何用命令得到ip<本地> 文章目录 专栏导航第五章 如何用命令得到ip<本地…

代码随想录算法训练营Day17|110.平衡二叉树、257. 二叉树的所有路径、 404.左叶子之和

文章目录 一、110.平衡二叉树1.递归法 二、257. 二叉树的所有路径1. 递归法 三、 404.左叶子之和1.迭代法 一、110.平衡二叉树 题目描述&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a;一个二…

Python操作MongoDB快速入门教程

Docker安装MongoDB 拉取镜像&#xff1a; docker pull mongo:6.0.2创建容器&#xff1a; docker run --name mongo -d -p 27017:27017 mongo:6.0.2设置用户名和密码&#xff1a; # 创建mongo容器后&#xff0c;进入容器 docker exec -it mongo bash# 进入mongo shell mongo…

C++ Primer 6.2参数传递 知识点+练习题

C Primer 6.2参数传递 知识点练习题 指针形参使用引用拷贝Const 形参实参尽量使用常量引用数组形参数组引用形参传递多维数组向main函数传参数含有可变形参的函数练习题待更新 指针形参 void reset(int *p) {*p0;//p指向的整型对象变为0p0;//只是对形参改变p&#xff0c;使其为…

【Git】查看凭据管理器的账号信息,并删除账号,解决首次认证登录失败后无法重新登录的问题

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是是《代码管理工具》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的…