vue中引用vant，附带样式

1、首先 npm install babel-plugin-import 和 npm install vant 2、样式在项目中的 .babelrc 文件下 ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}, "vant"]] //vant样式引用 3、在main.js中 import { Button } from 'vant' //引用vant组件库中可用组件 Vue.use(Button ) 注册组件即可。 from:https://www.cnblogs.com/1rookie/p/12660684.html

还在傻傻分不清ES5、Es6数组方法？各大姿势来袭

前言初衷：在面试中，面试官经常问到说一下Es5和Es6的数组方法有哪些，有很多同学老是分不清楚，今天笔者就来分享一下。适合人群：前端初级开发 Es5系列 indexOf 用途：用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1

let list = [1, 2, 3];

console.log(list.indexOf(2)) // 1

console.log(list.indexOf("蛙人")) // -1

map 用途： map是一个数组函数方法，接收三个参数，value，index，self，返回值是处理完的结果。

let list = [1, 2, 3];

const res = list.map((value, key, self) => {

console.log(value) // 1 2 3

console.log(key) // 0 1 2

console.log(self) // [1, 2, 3]

return value * 2

})

console.log(res)

forEach 用途：用于遍历一个数组，接收三个参数，value，index，self，返回值为undefined

let list = [1, 2, 3];

const res = list.forEach((value, key, self) => {

console.log(value) // 1 2 3

console.log(key) // 0 1 2

console.log(self) // [1, 2, 3]

return 123

})

console.log(res) // undefined

splice 用途：用于数组删除或替换内容，接收三个参数：第一个参数是，删除或添加的位置第二个参数是，要删除的几位，如果为0则不删除第三个参数是，向数组添加内容

let list = [1, 2, 3];

list.splice(0, 1) // 把第0个位置，给删除一位

console.log(list) // [2, 3]

list.splice(0, 1, "蛙人") // 把第0个位置，给删除一位，添加上一个字符串

console.log(list) // ["蛙人", 2, 3]

list.splice(0, 2, "蛙人") // 把第0个位置，给删除2位，添加上一个字符串

console.log(list) // ["蛙人", 3]

slice 用途：用于截取数组值，接收两个参数，第一个参数是要获取哪个值的下标，第二个参数是截取到哪个下标的前一位。

let list = [1, 2, 3];

let res = list.slice(1, 3) // 从第一位下标开始截取，到第三位下标的前一位，所以截取出来就是 [2, 3]

console.log(res) // [2, 3]

filter 用途：用于过滤数组内的符合条件的值，返回值为满足条件的数组对象

let list = [1, 2, 3];

let res = list.filter(item => item > 1);

console.log(res) // [2, 3]

every **用途：**用于检测数组所有元素是否都符合指定条件，返回值为Boolean , 该方法是数组中必须全部值元素满足条件返回true，否则false

let list = [1, 2, 3];

let res = list.every(item => item > 0)

console.log(res) // true

let res1 = list.every(item => item > 1)

console.log(res1) // false

some 用途：用于检测数组中的元素是否满足指定条件，返回值为Boolean , 该方法是只要数组中有一项满足条件就返回true，否则false

let list = [1, 2, 3];

let res = list.some(item => item > 0)

console.log(res) // true

reduce 用途：该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。该方法回调函数接收四个参数第一个参数：初始值, 或者计算结束后的返回值第二个参数：当前元素第二个参数：当前元素的索引第四个参数：当前元素所属的数组对象，本身我们一般只用前两个就行，reduce第一个参数回调函数，第二个参数是初始值

let list = [1, 2, 3];

let res = list.reduce(( prev, cur ) => prev += cur, 0)

console.log(res) // 6

reverse 用途：用于数组反转

let list = [1, 2, 3];

let res = list.reverse();

console.log(res) // [3, 2, 1]

join 用途：用于数据以什么形式拼接

let list = [1, 2, 3];

let res = list.join("-");

console.log(res) // 1-2-3

let sum = eval(list.join("+"))

console.log(sum) // 6

sort 用途：用于将数组排序，排序规则看返回值返回值为正数,后面的数在前面返回值为负数,前面的数不变,还在前面返回值为0,都不动

let list = [1, 2, 3];

let sort = list.sort((a, b) => b - a)

console.log(sort) // [3, 2, 1]

concat 用途：用于合并数组原始

let list = [1, 2, 3];

let res = list.concat([1, 2, 3])

console.log(res) // [1, 2, 3, 1, 2, 3]

push 用途：向数组后面添加元素，返回值为数组的length

let list = [1, 2, 3];

let res = list.push(1)

console.log(res) // 4

pop 用途：用于删除数组尾部的元素，返回值为删除的元素

let list = [1, 2, 3];

let res = list.pop()

console.log(res) // 3

shift 用途：用于删除数组的头部，返回值为删除的元素

let list = [1, 2, 3];

let res = list.shift()

console.log(res) // 1

unshift 用途：向数组的头部添加元素，返回值为数组的length

let list = [1, 2, 3];

let res = list.unshift(1)

console.log(res) // 4

toString 用途：用于将数组内容转换为字符串

let list = [1, 2, 3];

let res = list.toString()

console.log(res) // 1,2,3

Es6 + includes 用途：检测数组中是否存在该元素，返回Boolean值

let list = [1, 2, 3];

let res = list.includes("蛙人")

let res1 = list.includes(1)

console.log(res, res1) // false true

find 用途：查找数组的元素，满足条件的返回单个值，按照就近原则返回

let list = [1, 2, 3];

let res = list.find((item) => item > 1)

console.log(res) // 2, 按照就近原则返回

findIndex 用途：查找数组中元素，满足条件的返回数组下标

let list = [1, 2, 3];

let res = list.findIndex((item) => item > 1)

console.log(res) // 1, 按照就近原则返回下标

flat 用途：用于拉平嵌套数组对象

let list = [1, 2, 3, [4, [5]]];

let res = list.flat(Infinity)

console.log(res) // [1, 2, 3, 4, 5]

fill 用途：用于填充数组对象

let list = [1, 2, 3];

let res = list.fill(1)

console.log(res) // [1, 1, 1]

Array.isArray 用途：检测对象是不是一个数组

let list = [1, 2, 3];

let res = Array.isArray(list)

console.log(res) // true

Array.from 用途：将伪数组转换为真数组

let res = Array.from(document.getElementsByTagName("div"))

console.log(res) // 转换为真数组就可以调用数组原型的方法

Array.of 用途：用于生成一个数组对象，主要是用来弥补Array()的不足

let res = Array.of(1, 2, 3)

console.log(res) // [1, 2, 3]

改变原始数组值的有哪些 splice、reverse、sort、push、pop、shift、unshift、fill 结语这里keys、values、entries就不写啦，它们使用数组方式的话，返回的是Iterator遍历器对象。欢迎大家查漏补缺常用数组方法哦 from:https://zhuanlan.zhihu.com/p/361204051

fetch与xhr的对比

㈠fetch的简单介绍 fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。 fetch不是ajax的进一步封装，而是原生js。 Fetch函数就是原生js，没有使用XMLHttpRequest对象。㈡XMLHttpRequest API 的缺点 ⑴ 不符合关注分离（Separation of Concerns）的原则 ⑵ 配置和调用方式非常混乱 ⑶ 基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。 ⑷具体示例：

var xhr = new XMLHttpRequest();

xhr.open('GET',url);

xhr.responseType = 'json';

xhr.onload = function(){

console.log(xhr.response);

}

xhr.onerror = function(){

console.log('xhr error');

}

xhr.send();

㈢Fetch 的出现就是为了解决 XHR 的问题 ⑴使用fetch做请求后：

fetch(url).then(function(response){

return response.json();

}).then(function(data){

console.log(data);

}).catch(function(e){

console.log('error' + e);

});

⑵es6写法：

fetch(url).then(response=>response.json())

.then(data=>console.log(data))

.catch(e=>console.log('error' + e));

⑶处理text/html响应：

fetch(url).then(response=>response.text())

.then(data=>console.log(data))

.catch(e=>console.log('error' + e));

⑷获取头信息：

fetch(url).then((response)=>{

console.log(response.status);

console.log(response.statusText);

console.log(response.headers.get('Content-Type'));

console.log(response.headers.get('Date'));

return response.json();

}).then(data=>console.log(data))

.catch(e=>console.log('error' + e);

⑸设置头信息

fetch(url,{

headers:{

'Accept': 'application/json',

'Content-Type': 'application/json'

}

}).then(response=>response.json())

.then(data=>console.log(data))

.catch(e=>console.log('error' + e);

⑹提交表单

fetch(url,{

method: 'post',

body: new FormData(document.getElementById('form'))

}).then(response=>response.json())

.then(data=>console.log(data))

.catch(e=>console.log('error' + e);

⑺提交json数据

fetch(url,{

method: 'post',

body: JSON.stringify({

username: document.getElementById('username').value,

password: document.getElementById('password').value

})

}).then(response=>response.json())

.then(data=>console.log(data))

.catch(e=>console.log('error' + e);

⑻fetch跨域的处理 fetch中可以设置mode为"no-cors"（不跨域）

fetch('/users.json', {

method: 'post',

mode: 'no-cors',

data: {}

}).then(function() { /* handle response */ });

这样之后我们会得到一个type为“opaque”的返回。需要指出的是，这个请求是真正抵达过后台的，所以我们可以使用这种方法来进行信息上报，在我们之前的image.src方法中多出了一种选择，另外，我们在network中可以看到这个请求后台设置跨域头之后的实际返回，有助于我们提前调试接口（当然，通过chrome插件我们也可以做的到）。㈣Fetch 优点 ⑴语法简洁，更加语义化 ⑵基于标准 Promise 实现，支持 async/await ⑶同构方便，使用 isomorphic-fetch ㈤Fetch 的兼容问题： ⒈fetch原生支持性不高，引入下面这些 polyfill 后可以完美支持 IE8+ ： ⑴由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham ⑵引入 Promise[z1] 的 polyfill: es6-promise ⑶引入 fetch 探测库：fetch-detector ⑷引入 fetch 的 polyfill: fetch-ie8 ⑸可选：如果你还使用了 jsonp，引入 fetch-jsonp ⑹可选：开启 Babel 的 runtime 模式，现在就使用 async/await ⒉示例：使用isomorphic-fetch，兼容Node.js和浏览器两种环境运行。

npm install --save isomorphic-fetch es6-promise

require('es6-promise').polyfill();

require('isomorphic-fetch');

参考：https://blog.csdn.net/kezanxie3494/article/details/102956869

npm 报错：npm ERR! Maximum call stack size exceeded 超过最大栈问题解决方案

错误的原因，npm版本问题；解决办法： 1》更新到最新版本：npm install npm -g 要记住全局更新 2》回退版本：npm install -g npm@5.4.0 用cnpm 会快一些 from:https://www.cnblogs.com/hou-yuan-zhen/p/11703722.html

Module build failed: error:couldn’t find preset "env" relative to directory

解决办法参考：https://github.com/babel/babel-preset-env/issues/186 即在命令行输入命令安装模块：npm install babel-preset-env from:https://blog.csdn.net/acoolgiser/article/details/88814071

移动端手写签名插件 vue

第一步

1	npm install vue-signature

第二步 main.js

1 2	import vueSignature from "vue-signature" Vue.use(vueSignature)

vue

<vueSignature

ref="signature"

:sigOption="option"

:w="'800px'"

:h="'400px'"

:disabled="disabled"

:defaultUrl="dataUrl"

></vueSignature>

<button @click="clear">Clear</button>

<button @click="addWaterMark">addWaterMark</button>

<button @click="handleDisabled">disabled</button>

</div>

</template>

export default {

name: "app",

data() {

return {

option: {

penColor: "rgb(0, 0, 0)",

backgroundColor: "rgb(255,255,255)",

disabled: false,

dataUrl:

"https://avatars2.githubusercontent.com/u/17644818?s=460&v=4",

};

methods: {

save() {

var _this = this;

var png = _this.$refs.signature.save();

var jpeg = _this.$refs.signature.save("image/jpeg");

var svg = _this.$refs.signature.save("image/svg+xml");

console.log(png);

console.log(jpeg);

console.log(svg);

clear() {

var _this = this;

_this.$refs.signature.clear();

undo() {

var _this = this;

_this.$refs.signature.undo();

addWaterMark() {

var _this = this;

_this.$refs.signature.addWaterMark({

text: "mark text", // watermark text, > default ''

font: "20px Arial", // mark font, > default '20px sans-serif'

style: "all", // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill

fillStyle: "red", // fillcolor, > default '#333'

strokeStyle: "blue", // strokecolor, > default '#333'

x: 100, // fill positionX, > default 20

y: 200, // fill positionY, > default 20

sx: 100, // stroke positionX, > default 40

sy: 200, // stroke positionY, > default 40

});

fromDataURL(url) {

var _this = this;

_this.$refs.signature.fromDataURL(

"data:image/png;base64,iVBORw0K..."

);

handleDisabled() {

var _this = this;

_this.disabled = !_this.disabled;

};

</script>

from:https://blog.csdn.net/XLL20001022/article/details/101548655

请求资源报错 blocked:mixed-content

原因是https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方法：页面中的http换成https from:https://www.cnblogs.com/nonsec/p/13177387.html

Date.parse()获取时间戳IOS不兼容

最近写小程序，new Date(‘2018-12-17 13:12’)在电脑上显示正常,用开发者工具进行真机调试的时候也正常,放到手机上就报错,开始还以为是时分秒都必须有. 过了一会才想起来ios的时间格式必须为 2018/12/17 ios不支持2018-12-17的写法,所以-必须都替换为/

var date = '2018-12-17 13:33'

Date.parse(new Date(date.replace(/-/g, '/')));

vue项目打包后css背景图路径不对的问题

问题描述：自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图：当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比图一：使用npm run dev命令访问图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图解决办法：解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

1	publicPath:'../../'

添加位置为如下图：然后重新执行 npm run build 命令，即可成功显示图片 from:https://www.cnblogs.com/libo0125ok/p/9361038.html

这些开源项目，让你轻松应对十大工作场景

俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优秀的开源项目，利用这些开源项目，你将能能轻松应对以下十个工作场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5 页面设计器、文档管理和 API 管理。阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）： 77.9K Star 的 Axios 项目有哪些值得借鉴的地方（1018+ 个👍）使用这些思路与技巧，我读懂了多个优秀的开源项目（724+ 个👍）这些高阶的函数技术，你掌握了么（629+ 个👍）文件上传 uppy The next open source file uploader for web browsers 🐶 github.com/transloadit… uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，可以无缝地与任何应用程序集成。它速度快，使用方便，可以让你专注比构建文件上传器更重要的问题。该库拥有以下特性：支持 I18n 及可访问性；轻量，基于模块化的插件架构，可按需加载；通过开放的 tus 标准，可恢复文件上传，可以解决上传过程中网络故障的问题。 filepond 🌊 A flexible and fun JavaScript file upload library github.com/pqina/filep… filepond 是一个 JavaScript 库，可以上传你扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的用户体验。该库拥有以下特性：接受目录，文件，Blobs，本地 URL，远程 URL 和 Data URIs；图像优化，自动调整图像大小，支持裁剪，过滤和修复 EXIF 方向；支持拖拽文件，从文件系统选择文件，复制和粘贴文件或使用 API 添加文件；使用 AJAX 进行异步上传，支持分块上传，可以将文件编码为 base64 数据，并可以通过表单提交。 ✨ 扩展阅读 ✨ 玩转前端文件上传大规格文件的上传优化关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 50 几篇 “重学TS” 教程。图片处理 tui.image-editor 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters. github.com/nhn/tui.ima… tui.image-editor 是使用 HTML5 Canvas 的全功能图像编辑器。它易于使用，并提供强大的过滤器。同时它支持对图像进行裁剪、翻转、旋转、绘图、形状、文本、遮罩和图片过滤等操作。该库的浏览器兼容情况如下： Chrome Edge Safari Firefox IE 10+ cropperjs JavaScript image cropper. github.com/fengyuanche… Cropper.js 是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括 IE9 以上的现代浏览器。它可以用于满足诸如裁剪头像上传、商品图片编辑之类的需求。该库拥有以下特性：支持 39 个配置选项；支持 27 个方法；支持 6 种事件；支持 touch（移动端）；支持缩放、旋转和翻转；支持在画布上裁剪；支持在浏览器端通过画布裁剪图像；支持处理 Exif 方向信息；跨浏览器支持。 ✨ 扩展阅读 ✨ 你不知道的 Blob 玩转前端二进制一文读懂Base64编码图片处理不用愁，给你十个小帮手文档处理 kkFileView 使用 Spring Boot 打造文件文档在线预览项目解决方案，支持 doc、docx、ppt、pptx、xls 等文件在线预览。 github.com/kekingcn/kk… kkFileView 为文件文档在线预览解决方案，该项目使用流行的 Spring Boot 搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc，docx，xls，xlsx，ppt，pptx，pdf，txt，zip，rar，图片，视频，音频等等。该库拥有以下特性：一键部署，快速接入：支持 Windows、Linux 平台一键部署，两行 JS 代码就可以接入预览；支持常见文件格式，兼容新版 Office 文档：支持文本、图片、Office 文档、WPS 文档、PDF、视频、音频、压缩包等常见文件类型预览；支持多种预览模式灵活切换：支持 PDF、懒加载分页图、轮播图片等预览模式动态配置、灵活切换；独立部署，提供 Restful 接口，适用于微服务场景：独立于业务系统外，提供 Restful Http 接口，开发语言无关，微服务场景下直接提供在线预览服务。 Luckysheet Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. github.com/mengshukeji… Luckysheet ，一款纯前端类似 excel 的在线表格，功能强大、配置简单、完全开源。该库拥有以下特性：格式设置：样式、条件格式、文本对齐及旋转、支持文本的截断、溢出、自动换行和单元格多样式；单元格：拖拽选取来修改单元格、选取下拉填充、自动填充选项、多选区操作、查找与替换和合并单元格；操作体验：撤销/重做、复制/粘贴/剪切操作、快捷键支持和格式刷；公式和函数：内置公式、公式支持数组、远程公式和自定义公式；数据透视图：字段拖拽、聚合方式、筛选数据和数据透视表下钻。 ✨ 扩展阅读 ✨ 在前端如何玩转 Word 文档网络请求 Axios Promise based HTTP client for the browser and node.js github.com/axios/axios Axios 是一个基于 Promise 的 HTTP 客户端，该库拥有以下特性：支持 Promise API；能够拦截请求和响应；能够转换请求和响应数据；客户端支持防御 CSRF 攻击；同时支持浏览器和 Node.js 环境；能够取消请求及自动转换 JSON 数据。 react-query ⚛️ Hooks for fetching, caching and updating asynchronous data in React github.com/tannerlinsl… react-query 是一个用在 React 项目中，用于获取、缓存和更新异步数据的钩子。该库拥有以下特性：多层缓存 + 自动垃圾回收；支持分页和基于游标的查询；支持加载更多、无限滚动查询和滚动恢复；自动缓存 + 重新获取（重新验证时有效，窗口重新聚焦，轮询/实时）。 ✨ 扩展阅读 ✨ 77.9K 的 Axios 项目有哪些值得借鉴的地方数据存储 PouchDB 🐨 – PouchDB is a pocket-sized database. github.com/pouchdb/pou… PouchDB 是一个浏览器内数据库，允许应用程序在本地保存数据，以便用户即使在离线时也可以享受应用程序的所有功能。另外，数据在客户端之间是同步的，因此用户可以随时随地保持最新状态。 PouchDB 也在 Node.js 中运行，可以用作与 CouchDB 兼容的服务器的直接接口。该 API 在每个环境中工作都是相同的，因此你可以花更少的时间来担心浏览器的差异，而花更多的时间来编写干净、一致的代码。 PouchDB 支持所有现代浏览器： Firefox 29+ (Including Firefox OS and Firefox for Android) Chrome 30+ Safari 5+ Internet Explorer 10+ Opera 21+ Android 4.0+ iOS 7.1+ Windows Phone 8+ PouchDB 在幕后使用 IndexedDB，若当前环境不支持 IndexedDB 则回退到 Web SQL。 Rxdb 💻 🔄 📱 A realtime Database for JavaScript Applications. github.com/pubkey/rxdb RxDB（Reactive Database 的缩写）是 NoSQL 数据库，用于 JavaScript 应用程序，如网站，混合应用程序，Electron Apps，Progressive Web Apps 和 Node.js。响应式意味着你不仅可以查询当前状态，还可以订阅所有状态更改，比如查询的结果或文档的单个字段。 RxDB 支持以下特性： Mango-Query：支持 mquery API 从集合中获取数据，支持链式的 mongoDB 查询风格。 Replication：因为 RxDB 依赖于 PouchDB，因此很容易实现终端设备与服务器之间的数据同步。 Reactive：RxDB 使得同步 DOM 的状态变得很简单。 MultiWindow/Tab：当 RxDB 的两个实例使用相同的存储引擎，它们的状态和操作流将会被广播。这意味着对于两个浏览器窗口，窗口 #1 的数据变化也会自动影响窗口 #2 的数据状态。 Schema：通过 jsonschema 来定义 Schemas，它们用来描述数据格式。 Encryption：通过将模式字段设置为encrypted，该字段的值将以加密模式存储，没有密码就无法读取。 ✨ 扩展阅读 ✨ 前端存储除了 localStorage 还有啥微前端 qiankun 📦 🚀 Blazing fast, simple and completed solution for micro frontends. github.com/umijs/qiank… qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。该库拥有以下特性： 📦 基于 single-spa 封装，提供了更加开箱即用的 API； 📱 技术栈无关，任意技术栈的应用均可使用/接入，不论是 React/Vue/Angular/JQuery 还是其他等框架； 💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单； 🛡 样式隔离，确保微应用之间样式互相不干扰； 🧳 JS 沙箱，确保微应用之间全局变量/事件不冲突； ⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度； 🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。 single-spa The router for easy microfrontends github.com/single-spa/… Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。使用 single-spa 进行前端架构设计可以带来很多好处，例如：独立部署每一个单页面应用；改善初始加载时间，迟加载代码；新功能使用新框架，旧的单页应用不用重写可以共存；在同一页面上使用多个前端框架而不用刷新页面 (React，AngularJS，Angular，Ember 等)。 ✨ 扩展阅读 ✨ 最全微前端集合表单设计器 form-generator ✨Element UI 表单设计及代码生成器 github.com/JakHuang/fo… form-render 🚴‍♀️ 易用的跨组件体系的表单渲染引擎 – 通过 JSON Schema 快速生成自定义表单配置界面 github.com/alibaba/for… H5 页面设计器 gods-pen 基于 vue 的高扩展在线网页制作平台，可自定义组件，可添加脚本，可数据统计。 github.com/ymm-tech/go… luban-h5 类似易企秀的 H5 制作、建站工具、可视化搭建系统. github.com/ly525/luban… 文档管理 storybook […]

一份不可多得的 TS 学习指南（1.8W字）

阿宝哥第一次使用 TypeScript 是在 Angular 2.x 项目中，那时候 TypeScript 还没有进入大众的视野。然而现在学习 TypeScript 的小伙伴越来越多了，本文阿宝哥将从 16 个方面入手，带你一步步学习 TypeScript，感兴趣的小伙伴不要错过。一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。下图显示了 TypeScript 与 ES5、ES2015 和 ES2016 之间的关系： 1.1 TypeScript 与 JavaScript 的区别 TypeScript JavaScript JavaScript 的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页可以在编译期间发现并纠正错误作为一种解释型语言，只能在运行时发现错误强类型，支持静态和动态类型弱类型，没有静态类型选项最终被编译成 JavaScript 代码，使浏览器可以理解可以直接在浏览器中使用支持模块、泛型和接口不支持模块，泛型或接口社区的支持仍在增长，而且还不是很大大量的社区支持以及大量文档和解决问题的支持 1.2 获取 TypeScript 命令行的 TypeScript 编译器可以使用 npm 包管理器来安装。 1.安装 TypeScript

1	$ npm install -g typescript

2.验证 TypeScript

1 2	$ tsc -v # Version 4.0.2

3.编译 TypeScript 文件

1 2	$ tsc helloworld.ts # helloworld.ts => helloworld.js

当然，对刚入门 TypeScript 的小伙伴来说，也可以不用安装 typescript，而是直接使用线上的 TypeScript Playground 来学习新的语法或新特性。通过配置 TS Config 的 Target，可以设置不同的编译目标，从而编译生成不同的目标代码。下图示例中所设置的编译目标是 ES5：（图片来源：www.typescriptlang.org/play） 1.3 典型 TypeScript 工作流程如你所见，在上图中包含 3 个 ts 文件：a.ts、b.ts 和 c.ts。这些文件将被 TypeScript 编译器，根据配置的编译选项编译成 3 个 js 文件，即 a.js、b.js 和 c.js。对于大多数使用 TypeScript 开发的 Web 项目，我们还会对编译生成的 js 文件进行打包处理，然后在进行部署。 1.4 TypeScript 初体验新建一个 hello.ts 文件，并输入以下内容：

function greet(person: string) {

return 'Hello, ' + person;

}

console.log(greet("TypeScript"));

然后执行 tsc hello.ts 命令，之后会生成一个编译好的文件 hello.js：

"use strict";

function greet(person) {

return 'Hello, ' + person;

}

console.log(greet("TypeScript"));

观察以上编译后的输出结果，我们发现 person 参数的类型信息在编译后被擦除了。TypeScript 只会在编译阶段对类型进行静态检查，如果发现有错误，编译时就会报错。而在运行时，编译生成的 JS 与普通的 JavaScript 文件一样，并不会进行类型检查。二、TypeScript 基础类型 2.1 Boolean 类型

1 2	let isDone: boolean = false; // ES5：var isDone = false;

2.2 Number 类型

1 2	let count: number = 10; // ES5：var count = 10;

2.3 String 类型

1 2	let name: string = "semliker"; // ES5：var name = 'semlinker';

2.4 Symbol 类型

const sym = Symbol();

let obj = {

[sym]: "semlinker",

};

console.log(obj[sym]); // semlinker

2.5 Array 类型

let list: number[] = [1, 2, 3];

// ES5：var list = [1,2,3];

let list: Array<number> = [1, 2, 3]; // Array<number>泛型语法

// ES5：var list = [1,2,3];

2.6 Enum 类型使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript 支持数字的和基于字符串的枚举。 1.数字枚举

enum Direction {

NORTH,

SOUTH,

EAST,

WEST,

}

let dir: Direction = Direction.NORTH;

默认情况下，NORTH 的初始值为 0，其余的成员会从 1 开始自动增长。换句话说，Direction.SOUTH 的值为 1，Direction.EAST 的值为 2，Direction.WEST 的值为 3。以上的枚举示例经编译后，对应的 ES5 代码如下：

"use strict";

var Direction;

(function (Direction) {

Direction[(Direction["NORTH"] = 0)] = "NORTH";

Direction[(Direction["SOUTH"] = 1)] = "SOUTH";

Direction[(Direction["EAST"] = 2)] = "EAST";

Direction[(Direction["WEST"] = 3)] = "WEST";

})(Direction || (Direction = {}));

var dir = Direction.NORTH;

当然我们也可以设置 NORTH 的初始值，比如：

enum Direction {

NORTH = 3,

SOUTH,

EAST,

WEST,

}

2.字符串枚举在 TypeScript 2.4 版本，允许我们使用字符串枚举。在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。

enum Direction {

NORTH = "NORTH",

SOUTH = "SOUTH",

EAST = "EAST",

WEST = "WEST",

}

以上代码对应的 ES5 代码如下：

"use strict";

var Direction;

(function (Direction) {

Direction["NORTH"] = "NORTH";

Direction["SOUTH"] = "SOUTH";

Direction["EAST"] = "EAST";

Direction["WEST"] = "WEST";

})(Direction || (Direction = {}));

通过观察数字枚举和字符串枚举的编译结果，我们可以知道数字枚举除了支持从成员名称到成员值的普通映射之外，它还支持从成员值到成员名称的反向映射：

enum Direction {

NORTH,

SOUTH,

EAST,

WEST,

}

let dirName = Direction[0]; // NORTH

let dirVal = Direction["NORTH"]; // 0

另外，对于纯字符串枚举，我们不能省略任何初始化程序。而数字枚举如果没有显式设置值时，则会使用默认规则进行初始化。 3.常量枚举除了数字枚举和字符串枚举之外，还有一种特殊的枚举 —— 常量枚举。它是使用 const 关键字修饰的枚举，常量枚举会使用内联语法，不会为枚举类型编译生成任何 JavaScript。为了更好地理解这句话，我们来看一个具体的例子：

const enum Direction {

NORTH,

SOUTH,

EAST,

WEST,

}

let dir: Direction = Direction.NORTH;

以上代码对应的 ES5 代码如下：

1 2	"use strict"; var dir = 0 /* NORTH */;

4.异构枚举异构枚举的成员值是数字和字符串的混合：

enum Enum {

C = "C",

D = "D",

E = 8,

}

以上代码对于的 ES5 代码如下：

"use strict";

var Enum;

(function (Enum) {

Enum[Enum["A"] = 0] = "A";

Enum[Enum["B"] = 1] = "B";

Enum["C"] = "C";

Enum["D"] = "D";

Enum[Enum["E"] = 8] = "E";

Enum[Enum["F"] = 9] = "F";

})(Enum || (Enum = {}));

通过观察上述生成的 ES5 代码，我们可以发现数字枚举相对字符串枚举多了 “反向映射”：

1 2	console.log(Enum.A) //输出：0 console.log(Enum[0]) // 输出：A

2.7 Any 类型在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。

let notSure: any = 666;

notSure = "semlinker";

notSure = false;

any 类型本质上是类型系统的一个逃逸舱。作为开发者，这给了我们很大的自由：TypeScript 允许我们对 any 类型的值执行任何操作，而无需事先执行任何形式的检查。比如：

let value: any;

value.foo.bar; // OK

value.trim(); // OK

value(); // OK

new value(); // OK

value[0][1]; // OK

在许多场景下，这太宽松了。使用 any 类型，可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型，就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题，TypeScript 3.0 引入了 unknown 类型。 2.8 Unknown 类型就像所有类型都可以赋值给 any，所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScript 类型系统的另一种顶级类型（另一种是 any）。下面我们来看一下 unknown 类型的使用示例：

let value: unknown;

value = true; // OK

value = 42; // OK

value = "Hello World"; // OK

value = []; // OK

value = {}; // OK

value = Math.random; // OK

value = null; // OK

value = undefined; // OK

value = new TypeError(); // OK

value = Symbol("type"); // OK

对 value 变量的所有赋值都被认为是类型正确的。但是，当我们尝试将类型为 unknown 的值赋值给其他类型的变量时会发生什么？

let value: unknown;

let value1: unknown = value; // OK

let value2: any = value; // OK

let value3: boolean = value; // Error

let value4: number = value; // Error

let value5: string = value; // Error

let value6: object = value; // Error

let value7: any[] = value; // Error

let value8: Function = value; // Error

unknown 类型只能被赋值给 any 类型和 unknown 类型本身。直观地说，这是有道理的：只有能够保存任意类型值的容器才能保存 unknown 类型的值。毕竟我们不知道变量 value 中存储了什么类型的值。现在让我们看看当我们尝试对类型为 unknown 的值执行操作时会发生什么。以下是我们在之前 any 章节看过的相同操作：

let value: unknown;

value.foo.bar; // Error

value.trim(); // Error

value(); // Error

new value(); // Error

value[0][1]; // Error

将 value 变量类型设置为 unknown 后，这些操作都不再被认为是类型正确的。通过将 any 类型改变为 unknown 类型，我们已将允许所有更改的默认设置，更改为禁止任何更改。 2.9 Tuple 类型众所周知，数组一般由同种类型的值组成，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组。在 JavaScript 中是没有元组的，元组是 TypeScript 中特有的类型，其工作方式类似于数组。元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。使用元组时，必须提供每个属性的值。为了更直观地理解元组的概念，我们来看一个具体的例子：

1 2	let tupleType: [string, boolean]; tupleType = ["semlinker", true];

在上面代码中，我们定义了一个名为 tupleType 的变量，它的类型是一个类型数组 [string, boolean]，然后我们按照正确的类型依次初始化 tupleType 变量。与数组一样，我们可以通过下标来访问元组中的元素：

1 2	console.log(tupleType[0]); // semlinker console.log(tupleType[1]); // true

在元组初始化的时候，如果出现类型不匹配的话，比如：

1	tupleType = [true, "semlinker"];

此时，TypeScript 编译器会提示以下错误信息：

1 2	[0]: Type 'true' is not assignable to type 'string'. [1]: Type 'string' is not assignable to type 'boolean'.

很明显是因为类型不匹配导致的。在元组初始化的时候，我们还必须提供每个属性的值，不然也会出现错误，比如：

1	tupleType = ["semlinker"];

此时，TypeScript 编译器会提示以下错误信息：

1	Property '1' is missing in type '[string]' but required in type '[string, boolean]'.

2.10 Void 类型某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void：

// 声明函数返回值为void

function warnUser(): void {

console.log("This is my warning message");

}

以上代码编译生成的 ES5 代码如下：

"use strict";

function warnUser() {

console.log("This is my warning message");

}

需要注意的是，声明一个 void 类型的变量没有什么作用，因为在严格模式下，它的值只能为 undefined：

1	let unusable: void = undefined;

2.11 Null 和 Undefined 类型 TypeScript 里，undefined 和 null 两者有各自的类型分别为 undefined 和 null。

1 2	let u: undefined = undefined; let n: null = null;

2.12 object, Object 和 {} 类型 1.object 类型 object 类型是：TypeScript 2.2 引入的新类型，它用于表示非原始类型。

// node_modules/typescript/lib/lib.es5.d.ts

interface ObjectConstructor {

create(o: object | null): any;

// ...

}

const proto = {};

Object.create(proto); // OK

Object.create(null); // OK

Object.create(undefined); // Error

Object.create(1337); // Error

Object.create(true); // Error

Object.create("oops"); // Error

2.Object 类型 Object 类型：它是所有 Object 类的实例的类型，它由以下两个接口来定义： Object 接口定义了 Object.prototype 原型对象上的属性；

// node_modules/typescript/lib/lib.es5.d.ts

interface Object {

constructor: Function;

toString(): string;

toLocaleString(): string;

valueOf(): Object;

hasOwnProperty(v: PropertyKey): boolean;

isPrototypeOf(v: Object): boolean;

propertyIsEnumerable(v: PropertyKey): boolean;

}

ObjectConstructor 接口定义了 Object 类的属性。

// node_modules/typescript/lib/lib.es5.d.ts

interface ObjectConstructor {

/** Invocation via `new` */

new(value?: any): Object;

/** Invocation via function calls */

(value?: any): any;

readonly prototype: Object;

getPrototypeOf(o: any): any;

// ···

}

declare var Object: ObjectConstructor;

Object 类的所有实例都继承了 Object 接口中的所有属性。 3.{} 类型 {} 类型描述了一个没有成员的对象。当你试图访问这样一个对象的任意属性时，TypeScript 会产生一个编译时错误。

// Type {}

const obj = {};

// Error: Property 'prop' does not exist on type '{}'.

obj.prop = "semlinker";

但是，你仍然可以使用在 Object 类型上定义的所有属性和方法，这些属性和方法可通过 JavaScript 的原型链隐式地使用：

// Type {}

const obj = {};

// "[object Object]"

obj.toString();

2.13 Never 类型 never 类型表示的是那些永不存在的值的类型。例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

// 返回never的函数必须存在无法达到的终点

function error(message: string): never {

throw new Error(message);

}

function infiniteLoop(): never {

while (true) {}

}

在 TypeScript 中，可以利用 never 类型的特性来实现全面性检查，具体示例如下：

type Foo = string | number;

function controlFlowAnalysisWithNever(foo: Foo) {

if (typeof foo === "string") {

// 这里 foo 被收窄为 string 类型

} else if (typeof foo === "number") {

// 这里 foo 被收窄为 number 类型

} else {

// foo 在这里是 never

const check: never = foo;

}

注意在 else 分支里面，我们把收窄为 never 的 foo 赋值给一个显示声明的 never 变量。如果一切逻辑正确，那么这里应该能够编译通过。但是假如后来有一天你的同事修改了 Foo 的类型：

1	type Foo = string \| number \| boolean;

然而他忘记同时修改 controlFlowAnalysisWithNever 方法中的控制流程，这时候 else 分支的 foo 类型会被收窄为 boolean 类型，导致无法赋值给 never 类型，这时就会产生一个编译错误。通过这个方式，我们可以确保 controlFlowAnalysisWithNever 方法总是穷尽了 Foo 的所有可能类型。通过这个示例，我们可以得出一个结论：使用 never 避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。三、TypeScript 断言 3.1 类型断言有时候你会遇到这样的情况，你会比 TypeScript […]

JAVASCRIPT

vue中引用vant，附带样式

还在傻傻分不清ES5、Es6数组方法？各大姿势来袭

推荐 10 个很“哇塞”的Web“资源”给前端工友，收藏等于学会~

fetch与xhr的对比

npm 报错：npm ERR! Maximum call stack size exceeded 超过最大栈问题解决方案

Module build failed: error:couldn’t find preset "env" relative to directory

移动端手写签名插件 vue

请求资源报错 blocked:mixed-content

Date.parse()获取时间戳IOS不兼容

vue项目打包后css背景图路径不对的问题

这些开源项目，让你轻松应对十大工作场景

一份不可多得的 TS 学习指南（1.8W字）