前言 Hello 大家好 我是鲨鱼哥 这次给大家带来的是我曾经非常嫌弃 如今却爱不释手的 TS 技术 哈哈 大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的 然后因为 Vue2 和 TS 的结合总感觉不是很丝滑 所以我果断就在技术选型的时候去掉了 TS（其实我是觉得用起来很烦 和我之前最讨厌的 eslint 一样 各种报错让人不爽）但是 鲨鱼哥今年换了新公司 开启了全新的 react hook+ts 这一套组合拳 然后在重新认真学习并在项目里用上了 ts 之后 确实真香 哈哈 最直观的感受就是可以帮我们规避很多类型错误 更友好的提示 甚至有些方法我们根据定义的类型大概就知道作用是什么了（去掉了写注释的麻烦）况且如今大火的 Vue3 也是 TS 重构的 然后 react 和 ts 的结合就更不必说了 所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！ 1 ts 安装和编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node
|
1 2 |
cnpm i typescript -g //全局安装ts cnpm i -g ts-node //全局安装ts-node |
第三步 生成 tsconfig.js 配置文件
|
1 |
tsc --init |
我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管他 后续熟练了再去配置 第四步 在项目下新建一个index.ts 直接写入
|
1 2 |
const a: string = "hello"; console.log(a); |
[…]
View Details功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址：https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查，简直不能再嗨
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; import { State } from "vuex-class"; @Component export default class Shops extends Vue { @State shops: StoreState.shop[]; @State searchVal: string; get shopList(): StoreState.shop[] { const shops = this.shops; const searchVal = this.searchVal; return shops.filter( (el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1 ); } } </script> |
为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。 比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新，提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕，这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader，这是TypeScript为Webpack提供的编译器，类似于babel-loader
|
1 |
npm i ts-loader -D |
接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.tsx?$/, exclude: /node_modules/, use: [ "babel-loader", { loader: "ts-loader", options: { appendTsxSuffixTo: [/\.vue$/] } } ] } |
2. tsconfig.json 创建tsconfig.json文件，放在根目录下，和package.json同级 配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意： 在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。 这里列出我的配置，功能在注释中给出
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
{ "include": [ "src/*", "src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { // types option has been previously configured "types": [ // add node as an option "node" ], // typeRoots option has been previously configured "typeRoots": [ // add path to @types "node_modules/@types" ], // 以严格模式解析 "strict": true, // 在.tsx文件里支持JSX "jsx": "preserve", // 使用的JSX工厂函数 "jsxFactory": "h", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 启用装饰器 "experimentalDecorators": true, "strictFunctionTypes": false, // 允许编译javascript文件 "allowJs": true, // 采用的模块系统 "module": "esnext", // 编译输出目标 ES 版本 "target": "es5", // 如何处理模块 "moduleResolution": "node", // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": true, "lib": [ "dom", "es5", "es6", "es7", "es2015.promise" ], "sourceMap": true, "pretty": true } } |
3. 修改main.js 把项目主文件main.js修改成main.ts，里面的写法基本不变，但是有一点需要注意： 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个typings文件夹，把这个声明文件放进去，如：src/typings/vue-shims.d.ts，文件内容： *.d.ts类型文件不需要手动引入，TypeScript会自动加载
|
1 2 3 4 |
declare module '*.vue' { import Vue from 'vue' export default Vue } |
到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的vue-cli，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过 ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import Vue from "vue"; import Component from "vue-class-component"; @Component export default class App extends Vue { name:string = 'Simon Zhang' // computed get MyName():string { return `My name is ${this.name}` } // methods sayHello():void { alert(`Hello ${this.name}`) } mounted() { this.sayHello(); } } |
[…]
View Details代码如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
server { listen 80; server_name example.com; location / { root /home/example/dist; try_files $uri $uri/ @router; # 配置使用路由 index index.html index.htm; } # 路由配置信息 location @router { rewrite ^.*$ /index.html last; } } |
from:https://blog.csdn.net/peng2hui1314/article/details/106690852
View Details1、复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板。
|
1 2 |
const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World"); |
2、检查日期是否有效 使用以下代码段检查给定日期是否有效。
|
1 2 3 |
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00"); // Result: true |
3、找出一年中的哪一天 查找给定日期的哪一天。
|
1 2 3 |
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // Result: 272 |
4、将首字符串大写 Javascript 没有内置的大写函数，因此我们可以使用以下代码。
|
1 |
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)capitalize("follow for more")// Result: Follow for more |
5、找出两日期之间的天数 使用以下代码段查找给定 2 个日期之间的天数。
|
1 |
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date("2020-10-21"), new Date("2021-10-22"))// Result: 366 |
6、清除所有 Cookie 你可以通过使用 document.cookie 访问 cookie 并清除它来轻松清除存储在网页中的所有 cookie。
|
1 2 3 |
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '') .replace(/=.*/, `=;expires=${new Date(0).toUTCString()}; path=/`)); |
7、生成随机十六进制 你可以使用 Math.random 和 padEnd 属性生成随机十六进制颜色。
|
1 2 3 |
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}` console.log(randomHex()); //Result: #92b008 |
8、从数组中删除重复项 你可以使用 JavaScript 中的 Set 轻松删除重复项。
|
1 2 3 |
const removeDuplicates = (arr) => [...new Set(arr)]; console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] |
9、从 URL 获取查询参数 你可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 从 url 轻松检索查询参数
|
1 2 3 4 5 6 |
const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\"').replace(/&/g, '","').replace( /=/g, '":"') + '"}'); return JSON.stringify(URL); }; getParameters(window.location) // Result: { search : "easy", page : 3 } |
10、从日期记录时间 我们可以从给定日期以小时::分钟::秒的格式记录时间。
|
1 2 3 |
const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: "17:30:00" |
11、检查数字是偶数还是奇数
|
1 2 |
const isEven = num => num % 2 === 0;console.log(isEven(2)); // Result: True |
12、求数字的平均值 使用 reduce 方法找到多个数字之间的平均值。
|
1 2 3 |
const average = (...args) => args.reduce((a, b) => a + b) / args.length; average(1, 2, 3, 4); // Result: 2.5 |
13、反转字符串 你可以使用 split、reverse 和 join 方法轻松反转字符串。
|
1 2 |
const reverse = str => str.split('').reverse().join('');reverse('hello world'); // Result: 'dlrow olleh' |
14、检查数组是否为空 检查数组是否为空的简单单行程序将返回 true […]
View Details前言 初衷： 在面试中，面试官经常问到说一下Es5和Es6的数组方法有哪些，有很多同学老是分不清楚，今天笔者就来分享一下。 适合人群： 前端初级开发 Es5系列 indexOf 用途： 用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1
|
1 2 3 4 |
let list = [1, 2, 3]; console.log(list.indexOf(2)) // 1 console.log(list.indexOf("蛙人")) // -1 |
map 用途： map是一个数组函数方法，接收三个参数，value，index，self，返回值是处理完的结果。
|
1 2 3 4 5 6 7 8 9 |
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
|
1 2 3 4 5 6 7 8 9 |
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则不删除 第三个参数是，向数组添加内容
|
1 2 3 4 5 6 7 8 9 10 |
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 用途： 用于截取数组值，接收两个参数，第一个参数是要获取哪个值的下标，第二个参数是截取到哪个下标的前一位。
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.slice(1, 3) // 从第一位下标开始截取，到第三位下标的前一位，所以截取出来就是 [2, 3] console.log(res) // [2, 3] |
filter 用途： 用于过滤数组内的符合条件的值，返回值为满足条件的数组对象
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.filter(item => item > 1); console.log(res) // [2, 3] |
every **用途：**用于检测数组所有元素是否都符合指定条件，返回值为Boolean , 该方法是数组中必须全部值元素满足条件返回true，否则false
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.some(item => item > 0) console.log(res) // true |
reduce 用途： 该方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。该方法回调函数接收四个参数 第一个参数：初始值, 或者计算结束后的返回值 第二个参数：当前元素 第二个参数：当前元素的索引 第四个参数：当前元素所属的数组对象，本身 我们一般只用前两个就行，reduce第一个参数回调函数，第二个参数是初始值
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.reduce(( prev, cur ) => prev += cur, 0) console.log(res) // 6 |
reverse 用途： 用于数组反转
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.reverse(); console.log(res) // [3, 2, 1] |
join 用途： 用于数据以什么形式拼接
|
1 2 3 4 5 6 7 |
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,都不动
|
1 2 3 4 |
let list = [1, 2, 3]; let sort = list.sort((a, b) => b - a) console.log(sort) // [3, 2, 1] |
concat 用途： 用于合并数组原始
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.concat([1, 2, 3]) console.log(res) // [1, 2, 3, 1, 2, 3] |
push 用途： 向数组后面添加元素，返回值为数组的length
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.push(1) console.log(res) // 4 |
pop 用途： 用于删除数组尾部的元素，返回值为删除的元素
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.pop() console.log(res) // 3 |
shift 用途： 用于删除数组的头部，返回值为删除的元素
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.shift() console.log(res) // 1 |
unshift 用途： 向数组的头部添加元素，返回值为数组的length
|
1 2 3 4 |
let list = [1, 2, 3]; let res = list.unshift(1) console.log(res) // 4 |
toString 用途： 用于将数组内容转换为字符串 […]
View Details毋庸置疑：善用在线资源和工具可以加速开发，提高质量、让生活更 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 […]
View Details㈠fetch的简单介绍 fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。 fetch不是ajax的进一步封装，而是原生js。 Fetch函数就是原生js，没有使用XMLHttpRequest对象。 ㈡XMLHttpRequest API 的缺点 ⑴ 不符合关注分离（Separation of Concerns）的原则 ⑵ 配置和调用方式非常混乱 ⑶ 基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。 ⑷具体示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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做请求后：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); }); |
⑵es6写法：
|
1 2 3 4 5 |
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑶处理text/html响应：
|
1 2 3 4 5 |
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e)); |
⑷获取头信息：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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); |
⑸设置头信息
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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); |
⑹提交表单
|
1 2 3 4 5 6 7 8 9 10 11 |
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数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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"（不跨域）
|
1 2 3 4 5 |
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 […]
View Details错误的原因，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
View Details原因是https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方法：页面中的http换成https from:https://www.cnblogs.com/nonsec/p/13177387.html
View Details