如何发布一个 TypeScript 编写的 npm 包
前言
在这篇文章中,我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。
我们将初始化一个项目,设置TypeScript,用Jest编写测试,并将其发布到NPM。
项目
我们的库称为digx。它允许从嵌套对象中根据路径找出值,类似于lodash中的get函数。
比如说:
const source = { my: { nested: [1, 2, 3] } }
digx(source, "my ...
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+ElementPus的前端工作流模块中实现统一的表单编辑和表单详情查看处理。
1、查看申请单的模块设计处理
在工作流处理表中,首先我 ...
SpringBoot学习笔记(八)——JWT、(Vue3、Axios、Vue-Router、TypeScript实现授权与验证示例)
一、JWT概要
1.0、认证方式
1.0.1、基于Session的认证
基于session认证所显露的问题:
Session: 每个用户经过我们的应用认证之后,我们的应用都要在服务端做一次记录,以方便用户下次请求的鉴别,通常而言session都是保存在内存中,而随着认证用户的增多,服务端的开销会明显增大。
扩展性: 用户认证之后 ...
《Vue3.x+TypeScript实践指南》已出版
转眼回长沙快2年了,图书本在去年就已经完稿,因为疫情,一直耽搁了,直到这个月才出版!疫情之下,众生皆苦!感觉每天都是吃饭、睡觉、上班、做核酸!
图书介绍
为了紧跟技术潮流,该书聚焦于当下火的Vue3和TypeScript及其相关技术,这些知识是面试Vue方向前端岗位时必须掌握的内容。该书站在初学者的视角, ...
Vue3 从入门到入土(TypeScript入门)
前言
公司需要写一些简单的前端代码, 说起前端, 那可就大了去了, 我不是专业的, 也没打算干这个, 只能说挑一个简单能用的框架来学了.
在很早之前, 写过一些前端, 那时候还是 Bootstrap 一把梭, 印象比较深的就是自适应栅格, 现在的话, 用的比较多的应该是 Vue 了, 希望一切顺利.
本次 Vue 的学习过程, 主要是参考了视频 尚 ...
TypeScript学习笔记(四)—— TypeScript提高
一、类型type
1.1、定义
Type又叫类型别名(type alias),作用是给一个类型起一个新名字,不仅支持interface定义的对象结构,还支持基本类型、联合类型、交叉类型、元组等任何你需要手写的类型。
type Num = number; // 基本类型
type StringOrNum = string | number; // 联合类型
type Person = {name: string}; // 对象 ...
基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用
刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用。我们知道在Vue2中全局注入一个全局变量使用protoType的方式,很方便的就注入了,而Vue3则不能通过这种方式直接使用,而是显得 ...
TypeScript学习笔记(三)—— 编译选项、声明文件、WebPack打包、Babel转换
一、编译选项与配置文件
自动编译文件
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
示例:
tsc xxx.ts -w
自动编译整个项目
如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时,要先 ...
TypeScript学习笔记(二)—— TypeScript基础
一、原始数据类型基本使用
TypeScript中拥有更多的类型,如下表所示:
类型例子描述
number
1, -33, 2.5
任意数字
string
'hi', "hi", hi
任意字符串
boolean
true、false
布尔值true或false
字面量
其本身
限制变量的值就是该字面量的值
any
*
任意类型
unknown
*
类型安全的any
void
空值(undefin ...
vue3+vite+typescript
1.创建项目
npm init vite@latest <project-name> # ornpm init vite-app hello-vue3 # or yarn create vite-app hello-vue3
2. 配置端口号 以及配置别名,解决vue中 引入ref..的插件
配置端口号+配置代理:
打开 vite.config.ts 文件:
添加server就可以了
server: {
& ...
TypeScript学习笔记(一)—— TypeScript入门
一、TypeScript概要
TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,工作于TypeScript的开发。
官网:http://www.typescriptlang.org/
github:https://gi ...
TypeScript 解构
⒈解构数组
最简单的解构莫过于数组的解构赋值了:
let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2
这创建了2个命名变量 first 和 second。 等价于下面使用了索引的代码,但更为方便:
first = input[0];
second = inp ...
TypeScript
第一章 快速入门
0、TypeScript简介
TypeScript是JavaScript的超集。
它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的 ...
jsx/tsx使用cssModule和typescript-plugin-css-modules
目录1,前言2,效果图3,如何使用3.1,安装3.2,配置4,示例5,插件错误处理5.1,错误触发原因5.2,解决办法
1,前言
在vite/webpack搭建的项目中,不管是vue还是react,都可以写jsx/tsx,为了避免样式污染,常用的方式有两种。一种是每个组件都用一个唯一类名class包裹,使用less/scss嵌套样式。另一种是使用cssModule模块 ...
@vue/cli typescript插件使用指南
步骤
使用 yarn add 安装 @vue/cli-service 对应版本的 @vue/cli-plugin-typescript
例如:"@vue/cli-service": "~4.5.0" 使用yarn add -D @vue/cli-plugin-typescript@^4安装
使用 vue invoke typescript 运行插件
插件提供的配置项
Use class-style component syntax? 是否使用类组件
类组件是通过 typescript 提供 ...
基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS语法编写Vue代码的人不少冲击,不过随着大量的学习和代码编写,经历过一段难熬的时间后,逐步适应了这种和之前差别不小的写法和冲击。本篇随笔介绍总 ...
typescript+webpack+api-extractor构建一个js库
依赖说明
入口文件
tsconfig配置
webpack配置文件
webpack入口文件配置
webpack为typescript和less文件配置各自的loader
webpack的output配置
运行webpack进行打包
测试验证
输出esm模块
已经输出了umd格式的js了, 为什么还要输出esm模块? ----TreeShaking
用tsc输出esm和类型声明文件
完善package.json文件
packag ...
用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。
Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。
基础使用方法
Vue3对于表单的绑定提供了一种简单的方式:v-model。对于使用者来说非常方便,v-model="name" 就可以了。
自己做组件
但是当我们要自己做一个组件的时候,就有 ...
TypeScript(6)函数
函数
函数是 JavaScript 应用程序的基础,它帮助你实现抽象层,模拟类,信息隐藏和模块。在 TypeScript 里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能,让我们可以更容易地使用。
基本示例
和 JavaScript 一样,TypeScript 函数可以创建有 ...
TypeScript(5)类、继承、多态
前言
对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015,也就是 ES6 开始, JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript, ...