基于Vant4+Vue3+TypeScript的H5移动前端
本H5移动前端项目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技术开发，结合我们《SqlSguar开发框架》后端的功能接口，实现了相关的框架基础功能和一些业务案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs`、`qrcode`、`dayjs` 等等一些优秀的第三方 ...
TypeScript中的keyof
在 TypeScript 中， keyof 操作符用于获取某种类型的所有键。它返回一个字符串或数字的联合类型，包含对象类型的所有可用键。keyof 主要用于在编译时进行类型检查，以确保你访问的属性是对象实际拥有的键。
一、基本使用
type Person = {
name: string;
age: number;
address: string;
};
type PersonKeys = k ...
深度掌握TypeScript中的重载【函数重载、方法重载】
深度掌握TypeScript中的重载【函数重载、方法重载】
1. 函数重载，方法重载的重要性
著名前端流行框架底层都用到函数重载，例如：Vue3 底层源码就多处使用到带泛型的函数重载。很多前端面试更是拿函数重载作为考核求职者 TS 技能是否扎实的标准之一，如果你不掌握函数重载，等于你的 TS 技能有缺失，技能不过关。
函数重载 ...
一文弄懂TypeScript中的混合（Mixin）
1.前言
由于TypeScrip中的类不支持多继承，所以引入了混合（Mixin）的特性，可以间接实现多继承的效果。
2.正文
// 声明一个汽车类Vehicle，它有drive方法
class Vehicle {
drive(): void {
console.log('驾驶')
}
}
// 声明轿车类Car，它有work方法
class Car extends Vehicle{
work(): void {
console.lo ...
在基于vue-next-admin的Vue3+TypeScript前端项目中，为了使用方便全局挂载对象接口
在基于vue-next-admin 的 Vue3+TypeScript 前端项目中，可以整合自己的 .NET 后端，前端操作一些功能的时候，为了使用方便全局挂载的对象接口，以便能够快速处理一些特殊的操作，如消息提示、辅助函数、正则测试等等。本篇随笔介绍在Vue3+TypeScript 前端项目中全局挂载对象$u，获得相关 $u_interface 的统 ...
typescript 报错：Cannot find name 'Map'
问题
error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.
typescript 默认使用 ES5，不支持 ES6.
尝试
根据以下链接，tsc -init 生成 tsconfig.json，修改其中的 target 、lib，结果无效。
Cannot find name ‘XX‘. Do y ...
如何发布一个 TypeScript 编写的 npm 包
前言
在这篇文章中，我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。
我们将初始化一个项目，设置TypeScript，用Jest编写测试，并将其发布到NPM。
项目
我们的库称为digx。它允许从嵌套对象中根据路径找出值，类似于lodash中的get函数。
比如说：
const source = { my: { nested: [1, 2, 3] } }
digx(source, "my ...
@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 提供 ...
TypeScript（5）类、继承、多态
前言
对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript， ...
TypeScript（3）基础类型
基础类型
TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。
布尔值
最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）
let isDone: boolean = false;
console.log(isDone)
isDone = true; // ok
// isDone = 2 // e ...
VS Code开发TypeScript
TypeScript是JaveScript的超集，为JavaScript增加了很多特性，它可以编译成纯JavaScript在浏览器上运行。TypeScript已经成为各种流行框架和前端应用开发的首选。本文概要介绍使用VS Code开发TypeScript的过程。
第一个程序
在VS Code中开发TypeScript，首先要安装TypeScript，这里使用npm安装：
npm install typescript -g
...
使用typescript封装axios
使用typescript封装axios
这个axios封装，因为是用在vue3的demo里面的，为了方便，在vue3的配置里面按需加载element-plus
封装axios
http.ts
import axios, { InternalAxiosRequestConfig, AxiosRequestHeaders, AxiosResponse， AxiosError } from 'axios'
import { IResponseData } from '@/types'
import { ElMessage, ...
Vite+Vue3+TypeScript学习笔记
1、学习背景
随着前端web应用的需求不断发展和变化，vue生态圈也紧跟开发者步伐，不断演化。尽管vue2.0已经很完善了，很多人掌握的vue2.0，感觉实在学不动了，意料之外的是尤先生继续更新vue到3.0版本，以补充vue2.0的不足之处。随着vue3.0问世，vite2.5.1也油然而生，vue始终没有放弃对项目响应速度和编译速度的追求，vite ...
TypeScript 在开发应用中的实践总结
背景
以前 hybrid app 的移动端开发模式下，H5 和客户端通信的 js sdk 代码使用 js 编写，sdk 方法的说明使用文档输出。对于开发的使用来说，在 IDE 中不能得到友好的参数类型提示。于是我们维护一个类型定义包进行 sdk 方法的类型定义。但这样对于维护 sdk 的同学来说，维护源码的同时需要同步更新类型定义，更新如果不及 ...
TypeScript 如何使用 import 语法
export class Header {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
...
使用 typescript 快速开发一个 cli
cli 的全称 command-line interface（命令行界面），也就是前端同学常用的脚手架，比如 yo、vue cli、react cli 等。
cli 可以方便我们快速创建项目，下图是引用 vue cli 的介绍：
创建项目
运行下面的命令，创建一个项目：
npm init
执行命令完成后，可以看到项目根目录只有一个 package.json 文件。
在 package.json ...
vue-cli3 js项目中引入ts混用（typeScript）
一、安装typescript及loader
npm install typescript ts-loader --save-dev
二、安装vue-property-decorator
npm install vue-property-decorator --save-dev
三、配置vue.config.js
module.exports = {
configureWebpack: {
resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
module: { ...
Vue3.x 从零开始（五）—— Router + Vuex + TypeScript 实战演练（上）
前面的几篇文章已经大致介绍了 Vue 3 的常用 API，现在综合起来做一个实战演练
配合完整代码食用更香哦，项目地址：https://github.com/wisewrong/bolg-demo-app/tree/main/test-vue3-demo
一、初始化
首先通过 Vue-CLI 创建一个 Vue 3 项目，详细流程可以参考《Vue3.x 从零开始（一）》
vue create test-vue3-demo ...
TypeScript typeof 操作符
一、typeof 简介
在 TypeScript 中， typeof 操作符可以用来获取一个变量或对象的类型。
interface Person {
name: string;
age: number;
}
const sem: Person = { name: "semlinker", age: 30 };
type Sem = typeof sem; // type Sem = Person
在上面代码中，我们通过 typeof 操作符获取 se ...
Vue3.x 从零开始（一）—— Vue-cli or Vite 构建 TypeScript 项目
千呼万唤始出来，2020 年 9 月 19 日凌晨，Vuejs 3.0 终于发布了，代号：One Piece
作为一名从 Vue 1.x 就开始接触 Vue 的老玩家，心里只有一句话想说：学不动了...
但学不动也得学...
原本打算写一写 2.x 和 3.x 的差异，但仔细捋了一下发现内容还不少，干脆抛弃原本的思维，从零开始学 Vue
所以《Vue 3.x 从零开始 ...
