荷包蛋_-CSDN博客

原创 TS + Vue：搭建开发环境

前言本篇重点介绍在 TS 的开发环境下使用 Vue，所以不赘述 TS 的环境搭建，直接基于 ➡️【hello TS】（搭建流程自取）项目进行开发。另外，vue-cli 也提供一键式集成 typescript，但本篇的手动配置相信可以带给你更深入的理解。安装NPM$ npm i vue因为 Vue 自带声明文件，所以不需要额外安装。创建实例/* ** src/index.ts */// let hello: string = "hello typescript";// docume

2021-05-18 17:20:58 771

原创 TS + Nodejs：处理 excel 文件下载

客户端为【导出按钮】添加下载事件/* ** src/components/employee/index.tsx */class Employee extends Component<Props, State> { ... handleDownload = () => { // DOWNLOAD_EMPLOYEE_URL: "/api/employee/downloadEmployee" window.open(DOWNLOAD_EMPLOYEE_URL).

2021-05-17 16:47:56 544

原创 MySQL踩坑：ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/tmp/mysql.sock‘ (2)

$ mysql -u root -pEnter password: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)这个错误是因为MySQL服务还没启动，启动MySQL服务（mysql.server start ）就可以了。$ mysql -u root -pEnter password: ERROR 2002 (HY000): Can't connect t

2021-05-17 16:32:59 2175

原创 TS + Nodejs：连接/操作数据库

数据请求发生了什么：客户端向 API Server 发送数据请求Server 接收到请求后查询数据库信息Server 返回数据给客户端。客户端和服务端，连起！实用小物件：body-parser是非常常用的一个 express 中间件，作用是对 post 请求的请求体进行解析。以下两行代码可以覆盖大部分的使用场景。app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));实操为了.

2021-05-17 14:46:38 2185

原创快速搭建一个 TypeScript + Node 服务端开发环境

在 ts + react 系列中，数据都是本地的 mock，那么如何搭建一个真实的 API server 呢？按照惯例，先搭建一个基于 ts + express 的服务端开发环境：初始化express-generatorexpress-generator：快速创建 Express 应用程序框架。可以使用 npx 命令（在 Node.js 8.2.0 中可用）运行应用程序生成器。$ npx express-generator ts-express对于早期的 Node 版本，可将应用程序生

2021-05-13 14:05:26 1502

原创 TypeScript + React: 状态管理 Redux

我们来为应用加入状态管理，使其更利于维护。安装redux-thunk：Redux 的异步解决方案react-redux 的两个最主要功能：Provider：提供包含 store 的 contextconnect：连接容器组件和展示组件；yarn add redux react-redux redux-thunk入口文件在入口文件中，我们引入了 react-redux 提供的 Provider 组件。将 Provider 作为应用的外层容器并传入 store，容器内的所有组件

2021-05-08 18:31:28 227

原创 TypeScript + React：列表渲染 & 路由配置

在上一篇中，我们为表单元素绑定了事件、封装了 Axios、向后端发送了 get 请求以及搭建了 mock server – 将请求转发到了本地，并返回了一个 json。接下来我们就用这个 response 渲染表单以及项目路由的配置。列表渲染兄弟组件间的通讯/* ** src/components/employee/index.tsx */class Employee extends Component { render() { return ( <>

2021-05-08 18:30:24 725

原创 TypeScript + React：事件处理 & 数据请求

如何用 ts 来编写 react 中的事件处理和数据请求？功能在 employee/QueryForm 组件中，升级 Input、Select 为受控组件，Button 添加数据请求事件，以渲染员工信息列表。实现抽离接口文件我们在 src/interface 下，存放所有与后端交互的数据请求类型。比如， employee/QueryForm 中的状态（state）就是向后端发送的数据请求的格式，可以单独抽离成接口。/* ** src/interface/employee.ts */exp

2021-05-04 14:26:57 2144

原创 TypeScript + React：添加 Layout & 组件

highlight: atom-one-light这一篇，我们来堆砌组件（不包含事件处理和数据请求）。知识点在此 --> React & Typescript：组件的入门实例项目需求一个简单的员工管理系统，分为两部分功能：员工管理和系统设置。在员工管理部分，可以通过员工的姓名和部门进行查询员工的信息；在系统设置部分，进行简单的系统配置。目录|--src |--components |--employee |--QueryFor.

2021-04-30 16:35:10 817 1

原创 React & Typescript：组件的入门实例

React 组件的演化组件复用方式优势劣势状态类组件（Class）发展时间长，接受度广泛只能继承父类作为一种传统开发模式，会长期存在Mixin可以复制任意对象的任意多个方法，实现组件间的复用组件间相互依赖、耦合，可能产生冲突，不利于维护被官方抛弃高阶组件（HOC）利用装饰器模式，在不改变组件的基础上，动态地为其添加新的能力嵌套过多调试困难，需要遵循某些约定（不改变原始组件，透传 props 等）能力强大，广泛引用Hooks替代类组件，多个 Ho

2021-04-30 09:59:32 327

原创创建 TypeScript & React 项目

项目需求一个简单的员工管理系统，分为两部分功能：员工管理和系统设置。在员工管理部分，可以通过员工的姓名和部门进行查询员工的信息；在系统设置部分，进行简单的系统配置。有两种初始化方案我们可以通过两种方式创建项目：手动配置和使用脚手架；手动配置为了对项目的配置有一个基本了解，之后的开发还是基于脚手架开展。手动配置创建基本的 ts 环境安装 react 及其声明文件npm i react react-domnpm i -D @types/react @types/react-dom.

2021-04-28 15:54:47 1091

原创 TS 单测工具！ts-jest 和 babel/jest

什么是 Jest ？Jest 是 Facebook 的一套开源的 JavaScript 测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。TypeScript 的工具体系基本分为：Babel系和非Babel系。测试工具也不例外，分为 ts-jest 和 babel-jest。ts-jest & babel-jest安装依赖ts-jestnpm i jest ts-jest @types/jest -Dts-babel.

2021-04-26 17:21:46 1871

原创代码检查工具！从 TSLint 到 ESLint

2019 年 1 月，TypeScript 官方决定全面采用 ESLint，之后也发布 typescript-eslint 项目，以集中解决 TypeScript 和 ESLint 兼容性问题。而之前的两个 lint 解决方案都将弃用：typescript-eslint-parser 已停止维护在完成 ESLint 功能后，将弃用 TSLint 并帮助用户迁移到 ESLintTS 官方转向 ESLint 的原因:TSLint 执行规则的方式存在一些框架问题，从而影响性能，而修复这些问题会破坏.

2021-04-25 17:34:19 1869

原创 TS 编译工具！从 ts-loader 到 Babel

ts-loader这是用于 webpack 的 TypeScript 加载器，将 TypeScript 编译成 JavaScript。ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。安装yarn add ts-loader --devornpm install ts-loader --save-dev如果还没有安装 TypeScript，你需要先安装一下：yarn add typ

2021-04-23 18:54:06 7261 2

原创快速摸一个 Ant design vue 项目

初始化项目用 vue-cli 快速构建项目vue create ant-design-vue-procd ant-design-vue-pro/安装必要依赖npm i ant-design-vue moment删除/初始化不需要的文件// clear└──src/ ├───router/ │ └───index.js ├───views/ │ └───Home.vue └───App.vue引入 ant-desig

2021-04-23 11:25:37 436

原创要不要学一下更高效地 TS 构建方式（工程引入）

工程引入是 TypeScript 3.0 的新特性，它支持将 TypeScript 程序的结构分割成更小的组成部分。这样可以改善构建时间，强制在逻辑上对组件进行分离，更好地组织你的代码。TypeScript 3.0 还引入了 tsc 的一种新模式，即 --build 标记，它与工程引入协同工作可以加速 TypeScript 的构建。背景有时候，我们会把多个需要单独构建的工程放在一个代码仓库中。比如现在有一个全栈项目：--src |--client |--index.ts |--

2021-04-22 15:44:43 408

原创配置 tsconfig（编译选项）

{ "compilerOptions": { "incremental": true, // 增量编译 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置 "diagnostics": true, // 打印编译信息 "target": "es5", // 目标语言的版本 "module": "commonjs", // 生成代码的模块标准 "outFile": "./app.js", // 将多个相互依赖的

2021-04-21 18:24:31 5482

原创配置 tsconfig （文件选项）

如果一个目录下存在一个 tsconfig.json 文件，那么它意味着这个目录是 TypeScript 项目的根目录。一个项目可以通过以下方式之一来编译：不带任何输入文件的情况下调用 tsc，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。不带任何输入文件的情况下调用 tsc，且使用命令行参数 --project（或 -p ）指定一个包含 tsconfig.json 文件的目录。当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。如果 ts

2021-04-21 18:23:38 2236

原创如何在 TypeScript 中引入外部类库？

识别库的类型目前大致分为三种类型的类库：全局类库、模块类库、UMD 类库。全局类库全局库是指能在全局命名空间下访问的（例如：不需要使用任何形式的 import）。许多库都是简单的暴露出一个或多个全局变量。在全局库的指南文档上经常会看到如何在 HTML 里用脚本标签引用库：<script src="http://a.great.cdn.for/someLib.js"></script>目前，大多数流行的全局访问型库实际上都以 UMD 库的形式进行书写。在书写全局声明

2021-04-19 19:01:08 4745

原创 TypeScript 的声明合并

声名合并“声名合并” 是指编译器将对程序中多处出现的同一名字的两个及以上独立声名合并为单一声名，合并后的声名将具有原先所有独立声名的特性。TypeScript 中的声明会创建以下三种实体之一：命名空间，类型或值。创建命名空间的声明会创建一个新的命名空间。创建类型的声明：用声明的模型创建一个类型，再绑定到给出的名字上。创建值的声明，会创建 js 在输出时看到的值。合并接口这是 ts 中最常见的声明合并。根本的合并机制是把双方的成员放在同一命名的接口中。interface Person

2021-04-18 21:29:19 1151

原创 TypeScript 的命名空间

命名空间关于术语的一点说明: TypeScript 1.5 里， “内部模块”现在称做“命名空间”，“外部模块”现在则简称为“模块”。在 JavaScript 中，我们需要一种手段来组织代码，以防止对象之间产生命名冲突。因此，我们把代码包裹到一个个命名空间内，而不是把它们放在全局命名空间下，可以有效避免全局污染。虽然在 ES6 中引入了模块系统后，不需要再考虑全局污染问题，但当我们使用全局类库时，命名空间依然是个比较好的解决方案。使用a.tsnamespace Shape { co

2021-04-16 16:51:24 233

原创 TypeScript 在模块系统中的表现（ES6、CommonJS）

前端模块化随着前端系统越来越复杂，多人协作开发成为了常态，模块化开发方式得到了广泛的认可。关于模块化开发方式也出现过很多尝试，目前流行的 js 模块化规范有 CommonJS、AMD、CMD 以及 ES6 的模块系统。回顾基本操作ES6目录-- a.ts;-- b.ts;-- c.ts;c 依赖 b , b 依赖 a.a.tsexport const src = "hello";b.ts（导入情况）// 单独导出export const a = "i am a."

2021-04-15 19:02:24 1278

原创 Hello Typescript（10）-- 交叉类型、联合类型、索引类型、映射类型、条件类型

高级类型所谓高级类型，就是 ts 为了保障语言的灵活性所引入的语言特性。这些特性有助于我们应对复杂多变的开发场景。交叉类型交叉类型是将多个类型合并为一个类型。它包含了所需的所有类型的特性。（合集）我们大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。interface DogInterface { run(): void;}interface CatInterface { jump(): void;}let pet: DogInterfac

2021-04-14 17:35:47 467

原创 Hello Typescript（09）-- 类型推断、类型兼容性、类型保护

类型检查机制TypeScript 编译器在做类型检查时，所秉承的一些原则，以及表现出的一些行为。作用：辅助开发，提高开发效率。分类：类型推断类型兼容性类型保护类型推断不需要指定变量的类型（函数返回值的类型），TypeScript 可以根据某些规则自动推断出一个类型。基础类型推断从右向左推断，根据表达式右侧的值，推断表达式左侧的类型。变量类型let a = 1; // let a: numberlet b = "string"; // let b: st

2021-04-12 11:50:16 186

原创 Hello Typescript（08）-- 泛型

背景：实现一个打印函数function log(value: string): string { console.log(value); return value;}需求+1：函数也要可以接受字符串数组这里我们可能想到了用函数重载。function log(value: string): string;function log(value: string[]): string[];function log(value: any): any { console.log(valu

2021-04-06 23:27:17 143

原创 Hello Typescript（07）-- 类与接口的关系

类实现接口（implements）TypeScript 也能够用接口来明确的强制一个类去符合某种契约。即接口可以约束类有哪些成员及其属性。类实现接口时，必须实现接口中声明的所有成员。// 类实现接口interface Human { name: string; eat(): void;}class Man implements Human { constructor(name: string) { this.name = name; } name: st

2021-04-02 18:20:28 128

原创 Hello Typescript（06）-- 类

类class Dog { constructor(name: string) { this.name = name; } name: string; // 类的属性 run() { return this.name + " running!"; }}let dog = new Dog("littlered");console.log(Dog.prototype); // 原型方法：{run: ƒ, constructor: ƒ}console.log(dog)

2021-04-01 19:07:32 108

转载关于 super 关键字

super 这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。作为函数调用super 作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super 函数。class A {}class B extends A { constructor() { super(); }}上面代码中，子类B的构造函数之中的 super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。注意，super.

2021-04-01 16:51:47 319

原创 Hello Typescript（05）-- 函数

定义函数// functionfunction Add(a: number, b: number) { return a + b;}// 用变量定义函数类型let Add = (a: number, b: number) => number;// 接口interface Add { (a: number, b: number): number;}// 类型别名type Add = (a: number, b: number) => number;链接：接口

2021-03-30 18:46:22 125

原创 Hello Typescript（04）-- 函数类型接口、混合类型接口、类接口

函数类型接口// 接口interface Add { (a: number, b: string): number;}// 实现具体的函数let add: Add = (a, b) => a + b;混合类型接口因为 JavaScript 其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。interface Lib { (): void; // 函数 version: string; // 属性 dosomething(): void; //

2021-03-30 18:45:13 484

原创 Hello Typescript（03）-- 对象类型接口

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。即可以约束对象、函数以及类的结构和类型。接口初探interface List { id: number; name: string;}interface Result { data: List[];}function render(result: Result) { result.data.forEach((item) => { .

2021-03-30 11:37:27 117

原创 Hello Typescript（02）-- 枚举类型

问题：一个判断角色的例子function initByRole(role) { if (role === 1 || role === 2) { // do sth } else if (role === 3 || role === 4) { // do sth } else if (role === 5 || role === 6) { // do sth } else { // do sth }}可读性差：很难记住数字的含义可维护性差：硬

2021-03-29 16:14:58 120

原创 Hello TypeScript（01）-- 环境搭建

2021-03-29 16:13:57 119

原创 lodash的按需引入 ( Vue CLI 3.0 )

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。完整引入import _ from 'lodash'// 这个方式 webpack 依然会将整个库打包。import { random, debounce, findLast } from 'lodash'按需引入单独引入```jsimport debounce from "lodash/debounce";```当引用的方法过多时，弊端自现。配合插件：lodash-webpack-plugin.

2021-03-22 14:10:53 2278 1

原创 antd踩坑：Antd is not defined

背景在使用 ant-design-vue 时，一开始按需导入，然后想切换为全局引入时，出现了Antd is not defined错误。解决方案一babel-plugin-import 与全局引入的冲突，移除插件module.exports = { presets: ["@vue/cli-plugin-babel/preset", "@vue/babel-preset-jsx"], plugins: [ // 移除 babel-plugin-import // 只需从

2021-03-17 16:14:41 2055

iamxuqianqian的博客