TypeScript
文章平均质量分 90
阿宇的编程之旅
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、ActionScript、Pascal、spss、sas等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP等系统的开关机
展开
-
设计开发一个data-table
【代码】设计开发一个data-table。原创 2024-08-19 09:06:03 · 689 阅读 · 0 评论 -
TypeScript(十六)配置相关(tsconfig配置)
上篇文章,我们对TS配置中的命令行配置做了介绍,本文将对tsconfig.json配置做个解析tsconfig.json是TypeScript中用于配置编译器选项的配置文件。该文件通常位于TypeScript项目的根目录下,并告诉TypeScript编译器如何处理项目中的TypeScript文件。下面我将分享一些常用的配置,以及截止v5.3.3版本官方提供的配置参考常用配置全部配置原创 2024-05-08 16:06:28 · 1394 阅读 · 1 评论 -
控制台居然可以这么玩?五分钟带你上手ANSI指令,实现一个log工具包
或者直接使用setinterval实现一个向上滑动滚动条的效果,每500毫秒打印一次行数。光标移动与上述的光标指令相同,只不过在指令中传入了移动距离。原创 2024-04-23 16:00:51 · 1022 阅读 · 0 评论 -
TypeScript(十五)配置相关(命令行配置)
由于typescript配置涉及面相对复杂,所以放在较后的文章中,并不是它不重要,实际上配置项才是最重要的知识点,因为在开发中会遇到与逻辑无关的配置问题,如果熟悉配置或许用不了多久就可以解决。原创 2024-04-15 09:05:59 · 1200 阅读 · 0 评论 -
手摸手带你实现一个开箱即用的Node邮件推送服务
由于邮箱账号和手机号的唯一性,通常实现验证码的校验时比较常用的两种方式是手机短信推送和邮箱推送,此外,邮件推送服务还可以达到推送关键信息和消息通知的诉求。为了方便快捷的使用邮件推送api,我基于Node和相关库快速搭建了一个简易的开箱即用的邮件推送服务。本文与大家做个分享准备工作云函数,服务器或第三方内网穿透(提供api调用)Node环境及后续的依赖包个人邮箱邮箱配置原创 2023-08-21 10:25:57 · 665 阅读 · 36 评论 -
JS案例:在浏览器实现自定义菜单
分享一下之前公司实现自定义菜单的思路,禁用浏览器右键菜单,使用自定义的菜单将其代替,主要功能有:鼠标右键调出菜单,双击选中/取消选中标签,新建标签,删除标签,调整位置,调整大小,取消拖拽,关闭菜单原创 2023-07-24 10:50:41 · 1924 阅读 · 40 评论 -
作为前端开发,你了解MutationObserver吗?
MutationObserver在开发中或许不常使用,但是特殊情况下确实可以解决某些问题。和addEventListener有些类似,当用户触发了某些事件操作时会调用对应的回调我也是前些天在需求迭代中第一次使用MutationObserver,由于Antd早期版本的弹窗没有做响应功能,以及代码中的弹窗许多没有进行二次封装,导致无法得知弹窗何时出现及消失,于是我使用前端Hack的方式取个巧,监听元素变化解决了此类问题,这里也是做个知识点分享原创 2023-06-12 10:51:29 · 3486 阅读 · 18 评论 -
浅谈JS的映射和集合
Map(映射)和Set(集合)是ES6引入的数据结构,它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap和WeakSet这两种新的数据结构的概念及使用。原创 2023-05-22 09:50:11 · 1422 阅读 · 10 评论 -
JS案例:前端Iframe及Worker通信解决思路
在前端开发中,经常会使用iframe来实现一些特殊的需求,比如将第三方的页面嵌入到自己的页面中,或者在同一页面中显示多个不同的内容。然而,由于iframe具有独立的文档结构和执行环境,所以在多个iframe之间进行数据交互和通信变得十分困难。此时iframe之间的通信就非常重要,为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的,我用JS实现了一个插件包,这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数,使用postMessage给子页原创 2023-05-09 15:44:07 · 1866 阅读 · 4 评论 -
TypeScript(十四)变体(协变与逆变)
第一次接触到变体这个概念是在深入理解TypeScript中,类型之间的转换称为变体或者变型,在TS中,类型之间能否互相赋值,会不会报错,安不安全这些都与变体有关。本文将带大家了解ts中的变体在Java中,每一个类都是一个个体,比如,我们定义了一个Dog和Cat两个类,这二者的结构相同。在Java中,每一个类都是一个个体,比如,我们定义了一个Dog和Cat两个类,这二者的结构相同。原创 2023-05-15 18:08:38 · 868 阅读 · 4 评论 -
TypeScript(十三)声明合并
相信读过上篇文章TS模块后,大家对TS的模块机制有了一定的了解,那么本篇文章将给大家介绍重名模块或者类型的声明合并以及使用方式我们第一次接触到类似的概念是来源于函数这篇文章,其中函数的重载就是声明合并TS中的声明合并包含接口,类型别名,函数重载,命名空间,枚举,命名空间和类,类的合并。接下来我会深入介绍这几种合并方式原创 2023-05-01 08:11:24 · 2677 阅读 · 4 评论 -
使用TS+rollup打造一个npm工具库
说到Rollup,大家可能并不陌生,它是一款JS的模块打包器,适合对工具库和组件进行打包,将多个模块合并成单个文件,与Webpack,Browserify等不太一样,其对更小更快的库比较友好。此外,他可以生成ESM、CommonJS、AMD 和 UMD等输出格式,并且支持TS输入,可以检查TS类型及代码原创 2023-03-29 22:15:49 · 2231 阅读 · 2 评论 -
TypeScript(十二)模块
将体量大的程序拆分成多个小的,功能独立的模块是开发中不可或缺的一环,开发复杂程序的核心之一就是让其变得不复杂。模块化开发可以提高代码的可维护性、可重用性、可扩展性和可测试性,从而提高了开发效率和代码质量,TypeScript沿用了JS的模块概念,在之前文章中我介绍过Node环境下的两种类型兼容,顺带提了一下目前常用的模块导入导出方式:Commonjs和ES Module,这两种方式在TS中被称为是外部模块,除此之外TS还包含了内部模块和全局模块,本文将一一介绍参考文章命名空间和模块 - TypeScript原创 2023-04-18 16:54:42 · 10414 阅读 · 6 评论 -
TypeScript(十一)泛型工具类型
前面的文章我们对泛型的用法有了大概的认识,也通过泛型实现了一些常用的类型,那么这篇文章将深入了解一下泛型的工具类型的使用及实现,那么话不多说,我们直接开始。原创 2023-04-09 19:39:11 · 1251 阅读 · 8 评论 -
TypeScript(十)泛型进阶
前言上篇文章我们领略了泛型的灵活及强大;了解了泛型的基本使用以及常见用法。本文将针对泛型的其他用法做一些进阶拓展,其中有许多知识点可以防在前面的文章介绍,但是与泛型放在一起可能更好理解,那么话不多说,直接开始原创 2023-04-03 13:18:02 · 1034 阅读 · 9 评论 -
TypeScript(九)泛型基础
代码复用是开发人员老生常谈的问题了,我们通过定义变量,使用函数或类减少代码重复编写。在TS中我们可以把编写一个类型看成是新建一个函数,参数便是今天的主角:泛型;通过传入不同的参数(类型)控制类型的走向,达到类型复用的目的原创 2023-03-30 19:33:33 · 663 阅读 · 2 评论 -
TypeScript(八)装饰器
在TS中,装饰器是一种特殊类型的声明。可以附加到类、方法、属性或参数上用于修改类的行为或属性。在面向对象编程中,有时需要对类的行为和功能做出修改,直接修改类的内部可能会使成本升高,或出现其他问题;此时可以使用装饰器来修改类,在保证类内部结构与功能不变的前提下对数据或行为进行迭代TS中装饰器可以分为类装饰器、方法装饰器、属性装饰器和参数装饰器。原创 2023-03-27 16:25:30 · 1959 阅读 · 8 评论 -
TypeScript(七)类
在早期的JavaScript中,我们使用函数来模拟类,使用原型链实现继承行为。在ES6以后JS也引入类的概念,虽然其本质还是使用原型继承和构造函数的语法糖实现的,但是类的写法依旧使得开发人员得心应手;相比JS的类,TS的类可以说是有过之无不及。在TypeScript中,类可以包含属性和方法,支持继承和接口实现,也可以使用修饰符来控制访问权限。类的定义使用class关键字,并可以在其中声明构造函数、属性、方法等。原创 2023-03-21 22:55:52 · 2032 阅读 · 2 评论 -
TypeScript(六)函数
在前面的文章中,我使用对象类型以及接口分别定义了函数类型,浅谈了函数的定义及基本使用。本文将分享函数的进阶用法原创 2023-03-18 16:11:28 · 1233 阅读 · 0 评论 -
TypeScript(五)类型别名及类型符号
在编写JS代码时,我们通常使用const、var、let来定义一个变量,进行变量的运算或者逻辑编写等。在TS中也有一种类似变量的写法那就是类型别名,与运算逻辑相对应的便是类型符号在前面的文章中,我们介绍了TypeScript中常用的类型,然而在实际项目开发中,不可避免的会遇到各种复杂类型,有些可以使用接口或对象类型来描述,但是有些数据类型更灵活、复杂,那么此时,类型别名是一种非常有用的工具,它可以帮助我们简化代码,提高代码的可读性和可维护性;基本语法应用场景如果说类型别名是一个人,那么类型符号就是它的灵魂。原创 2023-03-13 10:26:28 · 2654 阅读 · 5 评论 -
TypeScript(四)接口
在介绍TS对象类型中,为了让数组每一项更具体,我们使用 string [ ] 表示字符串类型的数组,为了知道函数的参数与返回值,使用 let fn: (a: number, b: number) => number 来表示一个函数类型,那么作为复杂类型,仅仅使用Object表示一个普通对象类型是远远不能满足类型检查以及代码可读性的,有没有一种类型可以用来描述对象的结构呢?原创 2023-03-09 16:58:06 · 1610 阅读 · 6 评论 -
TypeScript(三)对象类型
在TS中除了之前的基本类型外,还包含Array(数组),Object(对象),Function(函数)等等继承于对象的其他对象,以及Tuple(元组),Enum(枚举)等高级类型,以及泛型,never,unknown类型。这些类型是TS强类型检查的基础Array(数组)Object(对象)Function(函数)Tuple(元组)Enum(枚举)泛型neverunknownTypeScript 入门教程TypeScript: Documentation - 基础原创 2023-03-05 14:44:35 · 4847 阅读 · 3 评论 -
TypeScript(二)基本类型和特殊类型
距离上篇博客已有两年了,对TS也有了一定的认识,于是计划继续更新系列文章基本数据类型在TS中,基本数据类型有:Boolan(布尔),Number(数字),String(字符串),Null(空值),Undefined(未定义),Symbol(标识符,ES6新增),Bigint(任意位整数,精度在53位以内,ES10新增)。除了上面的基本类型外,还有Void(缺少值)通常表示函数无返回值,any(任意值)这些特殊类型变量定义在JavaScript中,我们通常使用var定义变量,在es6中新增原创 2023-02-17 14:42:56 · 993 阅读 · 0 评论 -
TypeScript(一)TS介绍,环境安装与运行
TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript(JS的拓展),终于JavaScript(编译成JS)TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性,难以胜任和维护大型项目开发。因此微软开发了TypeScript ,使得其能够胜任开发大型项目。原创 2021-02-25 15:33:51 · 3313 阅读 · 30 评论 -
精读JavaScript中的代理(Proxy)与反射(Reflect)
JavaScript中的Proxy与Reflect是ES6中引入的新特性,它们可以帮助我们更高效地操作对象。代理(Proxy)是一种设计模式,它允许我们在访问对象的同时,添加一些额外的操作。代理对象与被代理对象实现相同的接口,代理对象会接受并处理所有对被代理对象的访问请求。反射(Reflection)是指程序可以在运行时获取、操作、修改它本身的状态或行为。反射是一种动态获取类型信息和操作类型的能力,可以在运行时动态调用类中的方法或属性。原创 2023-02-01 09:43:09 · 1453 阅读 · 6 评论 -
JS如何实现书签导入导出?我是这么做的
使用Node做过爬虫的人应该都知道Cheerio.js模块,其快速灵活的机制,使我们只需要了解JQ就可以轻松上手,是在使用node抓取网页数据的过程中不可或缺的一员。了解了cheerio后,我突发奇想:干脆拿cheerio实现个书签的导入吧,正好可以熟悉一下它的用法,于是早些时候我使用cheerio+node实现了初版的书签导入功能,将浏览器导出的书签通过前端页面上传到服务端,服务端使用cheerio将html解析成JSON文件,通过接口将数据传递到前端。然而原创 2022-12-06 15:18:05 · 1131 阅读 · 0 评论 -
基于Vite+Vue3+Electron整了一个桌面应用模板
随着前端的更新迭代,基于js/ts开发的桌面应用框架也越来越多,从heX,electron,nwjs到tauri,Qt,以及Rn和flutter也有桌面应用业务。而今天的主角正是electron,作为一款2013年推出的桌面应用开发框架,其运行于Chromium内核以及node平台,使得开发者可以使用html+css+js进行开发,然而它的缺点也比较明显,构建时可是带上了整个Chromium。但是作为一款经典的JS桌面应用框架,咱还是得了解一二的。下面给大家分享一下近期的项目搭建心得。原创 2022-10-24 14:37:52 · 3730 阅读 · 12 评论 -
JS案例:实现一个简易版axios
axios是一个的前端请求工具,其优秀的场景复用性使它可以运行在node环境和浏览器环境,在浏览器环境中使用的是xhr,在node中则是使用http模块,最近在封装一些工具函数,恰好接触到了这一块,于是想分享一下心得,希望对大家有帮助。文章中有一些类型和函数未给出可以在这个工具包中找到功能特性:浏览器环境下,我使用的是fetch而摒弃了xhr的封装,这会使低版本浏览器兼容上有一定缺陷,后续有时间的话可能会加上,node环境下依旧使用的http模块。原创 2022-09-09 17:09:51 · 885 阅读 · 10 评论 -
JS案例:基于发布订阅实现的事件消息中心-MessageCenter
参考node中的 events事件触发器 我总结归类出了以下函数on :注册事件emit:触发事件un:事件销毁once:注册事件,执行后即销毁clear:重置事件列表(消息中心)has:判断事件是否被订阅handlerLength:返回某个事件的监听函数数量watch:与on一样,不同点是可以将结果返回至发布者invoke:与emit一样,配合watch使用,当watch中存在异步操作时接收其结果原创 2022-04-27 21:24:43 · 1344 阅读 · 24 评论