随着 Typescript 的普及，越来越多的前端项目开始使用 Typescript，做了几个项目后发现自己对 Typescript 内置类型非常不熟悉，今天梳理下知识点介绍下 Typescript 内置工具类型和常用操作符

Partial<Type>
Required<Type>
Readonly<Type>
Record<Keys, Type>
Pick<Type, Keys>
Omit<Type, Keys>
Exclude<UnionType, ExcludedMembers>
Extract<Type, Union>
NonNullable<Type>
Parameters<Type>
ConstructorParameters<Type>
ReturnType<Type>
InstanceType<Type>
Uppercase<StringType>
Lowercase<StringType>
Capitalize<StringType>
Uncapitalize<StringType>

Typescript 项目

编译上下文

项目中快速生成 tsconfig.json,先全局安装 typescript

tsc --init

近在做大屏数据可视化项目时要求用图表实时展示最新数据变化，考虑到有大量的图表需要展示，因此轮询请求不予以考虑了，然后想到了支持全双工通信的 websocket。为了实时展示这些图表专门建立一个 websocket 连接也是可以的，然而总觉得杀鸡用牛刀了。知道查询到 Server-sent Event，顿时觉得这才是完美的解决方案。

vite 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

1. 快速的冷启动
2. 即时的模块热更新
3. 真正的按需编译

至于为什么选择 vite，官网上介绍的很详细，可点击查看为什么选择 vite，这里主要介绍一下如何用 vite 搭建一个包含前端开发常用配置的前端项目

发现问题

最近在项目中使用husky@7.0.1给 git 添加执行钩子时发现在 window 系统上可以正常触发配置的 pre-commit 但是在 mac 上就是不行并且在控制台输出一下提示：

栈

一个后进先出的数据结构
javascript 中没有栈 可以用 Array 实践栈的所有功能

const stack = [];
stack.push(1);
stack.push(2);
const item1 = stack.pop();
const item2 = stack.pop();

使用场景： 所有后进先出的场景 函数调用堆栈
leetcode 练习题：20

算法是作用于具体数据结构之上的，深度优先搜索算法和广度优先搜索算法都是基于“图”这种数据结构的。这是因为，图这种数据结构的表达能力很强，大部分涉及搜索的场景都可以抽象成“图”。

堆这种数据结构的应用场景非常多，最经典的莫过于堆排序了。
堆排序是一种原地的、时间复杂度为 O(nlogn) 的排序算法。前面我们学过快速排序，平均情况下，它的时间复杂度为 O(nlogn)。尽管这两种排序算法的时间复杂度都是 O(nlogn)，甚至堆排序比快速排序的时间复杂度还要稳定，但是，在实际的软件开发中，快速排序的性能要比堆排序好，这是为什么呢？

前面我们讲的都是线性表结构，栈、队列等等。今天我们讲一种非线性表结构，树。树这种数据结构比线性表的数据结构要复杂得多

将任意长度的二进制值串映射为固定长度的二进制值串，这个映射的规则就是哈希算法，而通过原始数据映射之后得到的二进制值串就是哈希值

要想设计一个优秀的哈希算法并不容易，根据我的经验，我总结了需要满足的几点要求：

1. 从哈希值不能反向推导出原始数据（所以哈希算法也叫单向哈希算法）；
2. 对输入数据非常敏感，哪怕原始数据只修改了一个 Bit，最后得到的哈希值也大不相同；
3. 散列冲突的概率要很小，对于不同的原始数据，哈希值相同的概率非常小；
4. 哈希算法的执行效率要尽量高效，针对较长的文本，也能快速地计算出哈希值。

散列表的英文叫“Hash Table”，我们平时也叫它“哈希表”或者“Hash 表”
散列表用的是数组支持按照下标随机访问数据的特性，所以散列表其实就是数组的一种扩展，由数组演化而来。可以说，如果没有数组，就没有散列表。

散列表用的就是数组支持按照下标随机访问的时候，时间复杂度是 O(1) 的特性。我们通过散列函数把元素的键值映射为下标，然后将数据存储在数组中对应下标的位置。当我们按照键值查询元素时，我们用同样的散列函数，将键值转化数组下标，从对应的数组下标的位置取数据。

跳表这种数据结构对你来说，可能会比较陌生，因为一般的数据结构和算法书籍里都不怎么会讲。但是它确实是一种各方面性能都比较优秀的动态数据结构，可以支持快速地插入、删除、查找操作，写起来也不复杂，甚至可以替代红黑树（Red-black tree）。

二分查找针对的是一个有序的数据集合，查找思想有点类似分治思想。每次都通过跟区间的中间元素对比，将待查找的区间缩小为之前的一半，直到找到要查找的元素，或者区间被缩小为 0。

最经典的、最常用的：冒泡排序、插入排序、选择排序、归并排序、快速排序、计数排序、基数排序、桶排序。

如何理解“递归”？

递归是一种应用非常广泛的算法（或者编程技巧）。之后我们要讲的很多数据结构和算法的编码实现都要用到递归，比如 DFS 深度优先搜索、前中后序二叉树遍历等等

所有的递归问题都可以用递推公式来表示

f(n)=f(n-1)+1 其中，f(1)=1

上一篇我们熟悉了 Vue Router 的基本用法，并且开始探究它的实现原理，今天我们继续未完的原理，一起来看路径是如何和路由组件映射的。

相信对有一定基础的前端开发工程师来说，路由并不陌生，它最初源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。而在 Web 前端单页应用 SPA 中，路由描述的是 URL 与视图之间的映射关系，这种映射是单向的，即 URL 变化会引起视图的更新。

上一篇，我们已经知道了，Vue.js 提供了内置的 Transition 组件帮我们实现动画过渡效果。在之前的分析中我把 Transition 组件的实现分成了三个部分：组件的渲染、钩子函数的执行、模式的应用。本篇我们从钩子函数的执行继续探究 Transition 组件的实现原理。

作为一名前端开发工程师，平时开发页面少不了要写一些过渡动画，通常可以用 CSS 脚本来实现，当然一些时候也会使用 JavaScript 操作 DOM 来实现动画。那么，如果我们使用 Vue.js 技术栈，有没有好的实现动画的方式呢？

通过前面内容的学习，我们了解到多个平行组件条件渲染，当满足条件的时候会触发某个组件的挂载，而已渲染的组件当条件不满足的时候会触发组件的卸载，举个例子