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

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

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

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

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

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

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

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

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

reverse 用途: 用于数组反转

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

毋庸置疑:善用在线资源和工具可以加速开发,提高质量、让生活更 Chill 😎~ 本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源,收藏⭐等于学会 (๑•̀ㅂ•́)و✧ 1. Undraw 如果你的网站需要免费的 SVG 插图,一定不要错过 Undraw 这个网站! SVG 插图资源是海量的,本瓜下拉了十几、二十次都拉不完(当然,搜索功能也是有的);并且,你还可以自定义插图的配色,简直不要太 NICE~ 海量资源,支持搜索🔍 随意更改配色🌈   2. Error 404 不知道你一般会去哪找 404 页面素材~ 现在你又多了一个选项:Error 404 酷酷酷~ 把本瓜一个切图仔的审美都拉上来了👆 3. Squoosh 压缩图片!! 对比 tinypng 有【更好的】压缩效果: tinypng 压缩 Squoosh 压缩   压缩效果:前者是 80%,后者是 95%;最终效果也不错~👍 Why not try ?   4. DevDocs DevDocs 见名思意,是 Web 开发技术文档,是非常不错的学习手册! 别的不说,就这 UI 本瓜就挺喜欢!还支持添加常用技术文档、更换主题等~   5. iHateRegex 如果你讨厌正则,那么一定不要错过这个网站?(ˉ▽ˉ;)… 不仅如此,还有细节图示!可恶,做的真好啊 ╮(╯▽╰)╭   6. Carbon 经常有人问,“这种好看的代码片段如何生成”,答案就在 Carbon! 你可以生成各种主题、各种语言的代码片段,并导出为图片或复制到其它平台,真滴好用👌 舒服了~~   7. Dribbble 寻找网页设计灵感,认准 Dribbble!!!     看到人家的管理后台设计,就想马上回去把自家的管理后台“撕”了🐶 8. Animista Css 动画,复制代码就能用!免安装,它不香嘛?   9. Shape Divider 你可以生成各式各样的分割线,并导出 SVG 格式; 花里胡哨的,我喜欢(❤ ω ❤)   10. Notion 如果你需要一个记笔记的平台,推荐一个选项:Notion 快速笔记、TaskList、日记、读书清单,各种类型,应有尽有,推荐~   作者:掘金安东尼 链接:https://juejin.cn/post/7003114103094902792 来源:掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

fetch与xhr的对比

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

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

    ⑵es6写法:

    ⑶处理text/html响应:

    ⑷获取头信息:

    ⑸设置头信息

    ⑹提交表单

    ⑺提交json数据

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

    这样之后我们会得到一个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和浏览器两种环境运行。

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

移动端手写签名插件 vue

第一步

  第二步 main.js

  vue

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

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

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

  这个问题隔一段时间都会遇到一次,每次自己都忘了这个点…. ———————————————— 版权声明:本文为CSDN博主「__朝朝」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_37514029/article/details/85052064

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文件中添加如下一行代码即可。

添加位置为如下图:   然后重新执行 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

  2.验证 TypeScript

  3.编译 TypeScript 文件

  当然,对刚入门 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 文件,并输入以下内容:

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

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

  2.2 Number 类型

  2.3 String 类型

  2.4 Symbol 类型

  2.5 Array 类型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  此时,TypeScript 编译器会提示以下错误信息:

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

  此时,TypeScript 编译器会提示以下错误信息:

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

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

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

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

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

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

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

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

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

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

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

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

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