㈠ 整理涵盖很全很广的前端知识点
HTML、CSS相关
html5新特性、语义化
浏览器渲染机制、重绘、重排
网页生成过程：
重排(也称回流): 当 DOM 的变化影响了元素的几何信息( DOM 对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 触发：
重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 触发：
重排优化建议：
transform 不重绘，不回流 是因为 transform 属于合成属性，对合成属性进行 transition/animate 动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。
css盒子模型
所有 HTML 元素可以看作盒子，在CSS中， "box model" 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
css样式优先级
!important>style>id>class
什么是BFC？BFC的布局规则是什么？如何创建BFC？BFC应用？
BFC 是 Block Formatting Context 的缩写，即块格式化上下文。 BFC 是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。 布局规则：Box是CSS布局的对象和基本单位，页面是由若干个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的 Formatting Context 。 创建：浮动元素 display：inline-block position:absolute 应用: 1.分属于不同的 BFC 时,可以防止 margin 重叠 2.清除内部浮动 3.自适应多栏布局
DOM、BOM对象
BOM（Browser Object Model） 是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 DOM （Document Object Model） 是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。 DOM 是 W3C （万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。" W3C DOM 标准被分为 3 个不同的部分：
什么是 XML DOM ？ XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 什么是 HTML DOM？ HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
JS相关
js数据类型、typeof、instanceof、类型转换
闭包(高频)
闭包是指有权访问另一个函数作用域中的变量的函数 ——《JavaScript高级程序设计》
当函数可以记住并访问所在的词法作用域时，就产生了闭包，
即使函数是在当前词法作用域之外执行 ——《你不知道的JavaScript》
原型、原型链(高频)
原型: 对象中固有的 __proto__ 属性，该属性指向对象的 prototype 原型属性。
原型链: 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。
特点: JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
this指向、new关键字
this 对象是是执行上下文中的一个属性，它指向最后一次调用这个方法的对象，在全局函数中， this 等于 window ，而当函数被作为某个对象调用时，this等于那个对象。 在实际开发中， this 的指向可以通过四种调用模式来判断。
new
作用域、作用域链、变量提升
继承(含es6)、多种继承方式
（1）第一种是以 原型链的方式来实现继承 ，但是这种实现方式存在的缺点是，在包含有引用类型的数据时，会被所有的实例对象所共享，容易造成修改的混乱。还有就是在创建子类型的时候不能向超类型传递参数。
（2）第二种方式是使用 借用构造函数 的方式，这种方式是通过在子类型的函数中调用超类型的构造函数来实现的，这一种方法解决了不能向超类型传递参数的缺点，但是它存在的一个问题就是无法实现函数方法的复用，并且超类型原型定义的方法子类型也没有办法访问到。
（3）第三种方式是 组合继承 ，组合继承是将原型链和借用构造函数组合起来使用的一种方式。通过借用构造函数的方式来实现类型的属性的继承，通过将子类型的原型设置为超类型的实例来实现方法的继承。这种方式解决了上面的两种模式单独使用时的问题，但是由于我们是以超类型的实例来作为子类型的原型，所以调用了两次超类的构造函数，造成了子类型的原型中多了很多不必要的属性。
（4）第四种方式是 原型式继承 ，原型式继承的主要思路就是基于已有的对象来创建新的对象，实现的原理是，向函数中传入一个对象，然后返回一个以这个对象为原型的对象。这种继承的思路主要不是为了实现创造一种新的类型，只是对某个对象实现一种简单继承，ES5 中定义的 Object.create() 方法就是原型式继承的实现。缺点与原型链方式相同。
（5）第五种方式是 寄生式继承 ，寄生式继承的思路是创建一个用于封装继承过程的函数，通过传入一个对象，然后复制一个对象的副本，然后对象进行扩展，最后返回这个对象。这个扩展的过程就可以理解是一种继承。这种继承的优点就是对一个简单对象实现继承，如果这个对象不是我们的自定义类型时。缺点是没有办法实现函数的复用。
（6）第六种方式是 寄生式组合继承 ，组合继承的缺点就是使用超类型的实例做为子类型的原型，导致添加了不必要的原型属性。寄生式组合继承的方式是使用超类型的原型的副本来作为子类型的原型，这样就避免了创建不必要的属性。
EventLoop
JS 是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是， Promise.then ， MutationObserver ，宏任务的话就是 setImmediate setTimeout setInterval
原生ajax
ajax 是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。 过程：
事件冒泡、捕获(委托)
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
ES6
Vue
简述MVVM
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型， View 代表UI组件， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。
谈谈对vue生命周期的理解？
每个 Vue 实例在创建时都会经过一系列的初始化过程， vue 的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件
computed与watch
watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用
computed 计算属性 属性的结果会被缓存，当 computed 中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed 中的函数必须用 return 返回最终的结果 computed 更高效，优先使用
使用场景 computed ：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch ：当一条数据影响多条数据的时候使用，例：搜索数据
v-for中key的作用
vue组件的通信方式
父子组件通信
父->子 props ，子->父 $on、$emit` 获取父子组件实例 parent、 parent 、children Ref 获取实例的方式调用组件的属性或者方法 Provide、inject` 官方不推荐使用，但是写组件库时很常用
兄弟组件通信
Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() Vuex
跨级组件通信
$attrs、$listeners Provide、inject
常用指令
双向绑定实现原理
当一个 Vue 实例创建时，Vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher重新计算，从而致使它关联的组件得以更新。
v-model的实现以及它的实现原理吗？
nextTick的实现
vnode的理解，compiler和patch的过程
new Vue后整个的流程
思考：为什么先注入再提供呢？？
答：1、首先来自祖辈的数据要和当前实例的data,等判重，相结合，所以注入数据的initInjections一定要在 InitState 的上面。2. 从上面注入进来的东西在当前组件中转了一下又提供给后代了，所以注入数据也一定要在上面。
vm.[Math Processing Error]mount(vm.mount(vm.options.el) ：挂载实例。
keep-alive的实现
作用：实现组件缓存
钩子函数：
原理： Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点， keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件 （pruneCache与pruneCache） 的组件在 cache 对象中缓存起来，在需要重新渲染的时候再将 vnode 节点从 cache 对象中取出并渲染。
配置属性：
include 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max 数字、最多可以缓存多少组件实例
vuex、vue-router实现原理
vuex 是一个专门为vue.js应用程序开发的状态管理库。 核心概念：
你怎么理解Vue中的diff算法?
在js中,渲染真实 DOM 的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实 DOM , 会引起整个 dom 树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个 dom 呢？此时我们就需要先根据真实 dom 生成虚拟 dom ， 当虚拟 dom 某个节点的数据改变后会生成有一个新的 Vnode , 然后新的 Vnode 和旧的 Vnode 作比较，发现有不一样的地方就直接修改在真实DOM上，然后使旧的 Vnode 的值为新的 Vnode 。
diff 的过程就是调用 patch 函数，比较新旧节点，一边比较一边给真实的 DOM 打补丁。在采取 diff 算法比较新旧节点的时候，比较只会在同层级进行。 在 patch 方法中，首先进行树级别的比较 new Vnode 不存在就删除 old Vnode old Vnode 不存在就增加新的 Vnode 都存在就执行diff更新 当确定需要执行diff算法时，比较两个 Vnode ，包括三种类型操作：属性更新，文本更新，子节点更新 新老节点均有子节点，则对子节点进行 diff 操作，调用 updatechidren 如果老节点没有子节点而新节点有子节点，先清空老节点的文本内容，然后为其新增子节点 如果新节点没有子节点，而老节点有子节点的时候，则移除该节点的所有子节点 老新老节点都没有子节点的时候，进行文本的替换
updateChildren 将 Vnode 的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh 各有两个头尾的变量 StartIdx和EndIdx ，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了 key ，就会用 key 进行比较，在比较的过程中，变量会往中间靠，一旦 StartIdx>EndIdx 表明 oldCh和vCh 至少有一个已经遍历完了，就会结束比较。
你都做过哪些Vue的性能优化？
你知道Vue3有哪些新特性吗？它们会带来什么影响？
更小巧、更快速 支持自定义渲染器 支持摇树优化：一种在打包时去除无用代码的优化手段 支持Fragments和跨组件渲染
模板语法99%保持不变 原生支持基于class的组件，并且无需借助任何编译及各种stage阶段的特性 在设计时也考虑TypeScript的类型推断特性 重写虚拟DOM 可以期待更多的编译时提示来减少运行时的开销 优化插槽生成 可以单独渲染父组件和子组件 静态树提升 降低渲染成本 基于Proxy的观察者机制 节省内存开销
检测机制 更加全面、精准、高效,更具可调试式的响应跟踪
实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何?
React
1、react中key的作用，有key没key有什么区别，比较同一层级节点什么意思？
2、你对虚拟dom和diff算法的理解，实现render函数
虚拟DOM 本质上是 JavaScript 对象,是对 真实DOM 的抽象表现。 状态变更时，记录新树和旧树的差异 最后把差异更新到真正的 dom 中 render函数:
3、React组件之间通信方式？
Context 提供了一个无需为每层组件手动添加 props ，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（ component composition ）有时候是一个比 context 更好的解决方案。 5. 组件组合缺点：会使高层组件变得复杂
4、如何解析jsx
5、生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？
componentWillMount、componentWillReceiveProps、componentWillUpdate在16版本被废弃，在17版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。
6、关于react的优化方法
使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。
不要使用数组下标作为key 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function ; render 里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。 尽量将 props 和 state 扁平化，只传递 component 需要的 props （传得太多，或者层次传得太深，都会加重 shouldComponentUpdate 里面的数据比较负担），慎将 component 当作 props 传入
使用 babel-plugin-import 优化业务组件的引入，实现按需加载 使用 SplitChunksPlugin 拆分公共代码 使用动态 import ，懒加载 React 组件
7、绑定this的几种方式
8、对fiber的理解
9、setState是同步还是异步的
10、Rex、React-Rex
Rex的实现流程
用户页面行为触发一个 Action ，然后 Store 调用 Recer ，并且传入两个参数：当前 State 和收到的 Action 。 Recer 会返回新的 State 。每当 state 更新之后， view 会根据 state 触发重新渲染。
React-Rex:
Provider ：从最外部封装了整个应用，并向 connect 模块传递 store 。 Connect ：
11、对高阶组件的理解
高阶组件是参数为组件，返回值为新组件的函数。 HOC 是纯函数，没有副作用。 HOC 在 React 的第三方库中很常见，例如 Rex 的 connect 组件。
高阶组件的作用：
12、可以用哪些方式创建 React 组件？
React.createClass()、ES6 class 和无状态函数
13、 React 元素与组件的区别？
组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。
Vue与React对比？
数据流：
react 主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，
vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。
监听数据变化实现原理 ：
组件通信的区别：jsx和.vue模板。
性能优化
vuex 和 rex 之间的区别？
从实现原理上来说，最大的区别是两点：
Rex 使用的是不可变数据，而 Vuex 的数据是可变的。 Rex 每次都是用新的 state 替换旧的 state ，而 Vuex 是直接修改
Rex 在检测数据变化的时候，是通过 diff 的方式比较差异的，而 Vuex 其实和Vue的原理一样，是通过 getter/setter 来比较的(如果看 Vuex 源码会知道，其实他内部直接创建一个 Vue 实例用来跟踪数据变化)
浏览器从输入url到渲染页面，发生了什么？
网络安全、HTTP协议
TCP UDP 区别
Http和Https区别（高频）
GET和POST区别（高频）
理解xss，csrf，ddos攻击原理以及避免方式
XSS ( Cross-Site Scripting ， 跨站脚本攻击 )是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens ，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。
CSRF （ Cross-site request forgery ） 跨站请求伪造 ：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
XSS避免方式：
CSRF 避免方式：
DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service ，其原理就是利用大量的请求造成资源过载，导致服务不可用。
㈡ LowDB 轻量级 JSON 本地数据库
作为轻量级的本地存储方式，对于构建不依赖服务器的小型项目，用LowDB存储和管理数据是十分理想的选择。在Nodejs, Electron and browser等一些小型项目中经常能看到LowDB的身影。
https://github.com/typicode/lowdb
npm install lowdb
或者：
yarn add lowdb
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync'); // 有多种适配器可选择
const adapter = new FileSync('db.json'); // 申明一个适配器
const db = low(adapter);
db.defaults({posts: [], user: {}, count: 0})
.write();
db.get('posts')
.push({id: 1, title: 'lowdb is awesome'})
.write()
db.set('user.name', 'typicode')
.write()
db.update('count', n => n + 1)
.write()
运行程序会在项目中添加db.json文件，里面存储了添加的数据：
{
"posts": [
{
"id": 1,
"title": "lowdb is awesome"
}
],
"user": {
"name": "typicode"
},
"count": 1
}
lowdb是基于lodash构建的，所以可以使用任何lodash强大的函数，比如: _.get() 和 _.find()，并且可以串联地使用：
db.get('users')
.find({sex: 'male'})
.value()
函数 功能
low(adapter) 返回一个具有特定属性和功能的 lodash chain
db.[...].write() / .value() 写 / 读数据
db.getState() / .setState() 获取 / 设置数据库的状态
db._ 数据库lodash的实例，可以利用这个添加自己的函数或者第三方的mixins,比如lodash-id
db._.mixin({
second: function(array) {
return array[1]
}
})
db.get('posts')
.second()
.value()
针对lowdb自带的适配器：FileSync、FileAsync 和 LocalBrowser，有以下可选参数：
defaultValue: 文件不存在时的默认值；
serialize/deserialize: 写之前和读之后的操作。
const adapter = new FilSync('db.json',{
serialize: (data) => encrypt(JSON.stringify(data)),
deserialize: (data) => JSON.parse(decrypt(data))
})
可以直接使用lodash的函数进行查询。需要注意的是有些操作可能会导致原数据被修改，为了避免这种误操作，需要使用 .cloneDeep()，操作都是惰性的，只有调用 .value()或 .write()后才会正式执行。
检查users是是否存在
db.has('users')
.value()
设置users
db.set('users', [])
.write()
排序、选择
db.get('users')
.filter({sex: 'male'})
.sortBy('age')
.take(5)
.value()
获取特定字段
db.get('users')
.map('name')
.value()
获取数量
db.get('users')
.size()
.value()
获取特定信息
db.get('users[0].name')
.value()
更新信息
db.get('users')
.find({name: 'Tom'})
.assign({name: 'Tim'})
.write()
删除信息
db.get('users')
.remove({name: 'Time'})
.write()
移除属性
db.unset('users.name)
.write()
深拷贝
db.get('users')
.cloneDeep()
.value()
可以使用 shortid 和 lodash-id 为数据库中的每一条记录创建唯一的id索引，然后通过id检索操作记录：
const shortid = require('shortid')
const postId = db
.get('posts')
.push({ id: shortid.generate(), title: 'low!' })
.write()
.id
const post = db
.get('posts')
.find({ id: postId })
.value()
const lodashId = require('lodash-id')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json')
const db = low(adapter)
db._.mixin(lodashId)
// We need to set some default values, if the collection does not exist yet
// We also can store our collection
const collection = db
.defaults({ posts: [] })
.get('posts')
// Insert a new post...
const newPost = collection
.insert({ title: 'low!' })
.write()
// ...and retrieve it using its id
const post = collection
.getById(newPost.id)
.value()
low( ) 函数接受自定义的Adapter
class MyStorage {
constructor() {
// ...
}
read() {
// Should return data (object or array) or a Promise
}
write(data) {
// Should return nothing or a Promise
}
}
const adapter = new MyStorage(args)
const db = low(adapter);
==============================================
英文官网介绍，更加简洁
Lowdb 3 is a pure ESM package. If you're having trouble importing it in your project, please read this.
You can use TypeScript to type check your data.
You can also add lodash or other utility libraries to improve lowdb.
For CLI, server and browser usage, see examples/ directory.
Lowdb has two classes (for asynchronous and synchronous adapters).
Calls adapter.read() and sets db.data .
Note: JSONFile and JSONFileSync adapters will set db.data to null if file doesn't exist.
Calls adapter.write(db.data) .
Holds your db content. If you're using the adapters coming with lowdb, it can be any type supported by JSON.stringify .
For example:
Adapters for reading and writing JSON files.
In-memory adapters. Useful for speeding up unit tests.
Synchronous adapter for window.localStorage .
Adapters for reading and writing text. Useful for creating custom adapters.
If you've published an adapter for lowdb, feel free to create a PR to add it here.
You may want to create an adapter to write db.data to YAML, XML, encrypt data, a remote storage, ...
An adapter is a simple class that just needs to expose two methods:
For example, let's say you have some async storage and want to create an adapter for it:
See src/adapters/ for more examples.
To create an adapter for another format than JSON, you can use TextFile or TextFileSync .
For example:
Lowdb doesn't support Node's cluster mole.
If you have large JavaScript objects ( ~10-100MB ) you may hit some performance issues. This is because whenever you call db.write , the whole db.data is serialized using JSON.stringify and written to storage.
Depending on your use case, this can be fine or not. It can be mitigated by doing batch operations and calling db.write only when you need it.
If you plan to scale, it's highly recommended to use databases like PostgreSQL or MongoDB instead.
㈢ 还在发愁写API文档推荐一款阿里腾讯都在用的API管理神器
作为一个前后端分离模式开发的团队，我们经常会看到这样的场景：前端开发和后端开发在一起热烈的讨论“你这接口参数怎么又变了？”，“接口怎么又不通了？”，“稍等，我调试下”，“你再试试..."。
那能不能写好接口文档，大家都按文档来开发？很难，因为写文档、维护文档比较麻烦，而且费时，还会经常出现 API 更新了，但文档还是旧的，各种同步不一致的情况，从而耽搁彼此的时间。
之前我们团队也遇到了同样的问题，那么作为研发团队的负责人，我是如何带领团队解决这个问题的呢？
方法其实很简单，如果能做到让写文档/维护文档这件事情的短期收益就能远高于付出的成本，那么所有问题都能迎刃而解，开发人员就会非常乐意去写接口文档。
要做到写文档和及时维护文档的短期收益就能远高于付出的成本，无非两个方向：
鉴于此，我们设想如果有一款工具做到以下这些是不是就非常爽了？
总结下来，我们需要的就是这么一款工具：
为此，我们几乎尝遍了市面上所有相关的工具，但是很遗憾，没有找到合适的。
于是，我们自己实现了一个Postman + Swagger + RAP + JMeter
这个工具就是 Apifox，经常很长一段时间不断更新迭代后，我们基本上完全实现了最初的设想，几乎完美解决了最开始遇到的所有问题，在公司内部大受欢迎。并且也形成了我们自己的最佳实践。
没错，现在我们已经将Apifox产品化对外服务了，你们团队也可以直接使用Apifox了。
官网：www.apifox.cn
Apifox = Postman + Swagger + Mock + JMeter
Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台。
通过一套系统、一份数据，解决多个系统之间的数据同步问题。只要定义好接口文档，接口调试、数据 Mock、接口测试就可以直接使用，无需再次定义；接口文档和接口开发调试使用同一个工具，接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确！
节省研发团队的每一分钟！
如果你认为 Apifox 只做了数据打通，来提升研发团队的效率，那就错了。Apifox 还做了非常多的创新，来提升开发人员的效率。
通常一个接口会有多种情况用例，比如 正确用例 参数错误用例 数据为空用例 不同数据状态用例。定义接口的时候定义好这些不同状态的用例，接口调试的时候直接运行，非常高效。
可以独立定义数据模型，接口定义时可以直接引用数据模型，数据模型之间也可以相互引用。同样的数据结构，只需要定义一次即可多处使用；修改的时候只需要修改一处，多处实时更新，避免不一致。
使用 Apifox 调试接口的时候，系统会根据接口文档里的定义，自动校验返回的数据结构是否正确，无需通过肉眼识别，也无需手动写断言脚本检测，非常高效！
Apifox 自动校验数据结构
设置断言：
Apifox 设置断言
运行后，查看断言结果：
先放一张图对比下 Apifox 和其他同类工具 零配置 mock 出来的数据效果：
Apifox Mock 数据结果对比同类工具
可以看出 Apifox 零配置 Mock 出来的数据和真实情况是非常接近的，前端开发可以直接使用，而无需再手动写 mock 规则。
“Apifox 如何做到高效率、零配置生成非常人性化的 mock 数据”
Apifox 项目可“在线分享” API 文档，分享出去的 API 文档可设置为公开或需要密码访问，非常方便与外部团队协作。
体验地址：https://www.apipark.cn/s/ce387612-cfdb-478a-b604-b96d1dbc511b/http/5041285
根据接口模型定义，自动生成各种语言/框架（如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等）的业务代码（如 Model、Controller、单元测试代码等）和接口请求代码。目前 Apifox 支持 130 种语言及框架的代码自动生成。
更重要的是：你可以通过自定义代码模板来生成符合自己团队的架构规范的代码，满足各种个性化的需求。
接口调试
Apifox 多种主题色可选
㈣ TypeScript 入门指南
新系列 深入浅出TypeScript 来了，本系列至少20+篇。本文为第一篇，来介绍一下TypeScript 以及常见的类型。
TypeScript是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript的超集，扩展了 JavaScript 的语法，最终会被编译为JavaScript代码。
TypeScript的主要特性：
TypeScript 主要是为了实现以下两个目标：
下面就来看看这两个目标是如何实现的。
为什么要给JavaScript加上类型呢？
我们知道，JavaScript是一种轻量级的解释性脚本语言。也是弱类型、动态类型语言，允许隐式转换，只有运行时才能确定变量的类型。正是因为在运行时才能确定变量的类型，JavaScript代码很多错误在运行时才能发现。TypeScript在JavaScript的基础上，包装了类型机制，使其变身成为 静态类型 语言。在 TypeScript 中，不仅可以轻易复用 JavaScript 的代码、最新特性，还能使用可选的静态类型进行检查报错，使得编写的代码更健壮、更易于维护。
下面是 JavaScript 项目中最常见的十大错误，如果使用 TypeScript，那么在 编写阶段 就可以发现并解决很多 JavaScript 错误了：
类型系统能够提高代码的质量和可维护性，经过不断的实践，以下两点尤其需要注意：
可以认为，在所有操作符之前，TypeScript 都能检测到接收的类型（在代码运行时，操作符接收的是实际数据；在静态检测时，操作符接收的则是类型）是否被当前操作符所支持。当 TypeScript 类型检测能力覆盖到所有代码后，任意破坏约定的改动都能被自动检测出来，并提出类型错误。因此，可以放心地修改、重构业务逻辑，而不用担忧因为考虑不周而犯下低级错误。
在一些语言中，类型总是有一些不必要的复杂的存在方式，而 TypeScript 尽可能地降低了使用门槛，它是通过如下方式来实现的。
TypeScript 与 JavaScript 本质并无区别，我们可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript，为JavaScript代码提供了编译时的类型安全。
实际上，TypeScript 是一门“ 中间语言 ”，因为它最终会转化为JavaScript，再交给浏览器解释、执行。不过 TypeScript 并不会破坏 JavaScript 原有的体系，只是在 JavaScript 的基础上进行了扩展。
准确的说，TypeScript 只是将JavaScript中的方法进行了标准化处理：
这段代码在TypeScript中就会报错，因为TS会知道a是一个数字类型，不能将其他类型的值赋值给a，这种类型的推断是很有必要的。
上面说了，TypeScript会尽可能安全的推断类型。我们也可以使用类型注释，以实现以下两件事：
在一些语言中，类型总是有一些不必要的复杂的存在方式，而 TypeScript 的类型是结构化的。比如下面的例子中，函数会接受它所期望的参数：
为了便于把 JavaScript 代码迁移至 TypeScript，即使存在编译错误，在默认的情况下，TypeScript 也会尽可能的被编译为 JavaScript 代码。因此，我们可以将JavaScript代码逐步迁移至 TypeScript。
虽然 TypeScript 是 JavaScript 的超集，但它始终紧跟ECMAScript标准，所以是支持ES6/7/8/9 等新语法标准的。并且，在语法层面上对一些语法进行了扩展。TypeScript 团队也正在积极的添加新功能的支持，这些功能会随着时间的推移而越来越多，越来越全面。
虽然 TypeScript 比较严谨，但是它并没有让 JavaScript 失去其灵活性。TypeScript 由于兼容 JavaScript 所以灵活度可以媲美 JavaScript，比如可以在任何地方将类型定义为 any（当然，并不推荐这样使用），毕竟 TypeScript 对类型的检查严格程度是可以通过 tsconfig.json 来配置的。
在搭建TypeScript环境之前，先来看看适合TypeScript的IDE，这里主要介绍Visual Studio Code，笔者就一直使用这款编辑器。
VS Code可以说是微软的亲儿子了，其具有以下优势：
因为 VS Code 中内置了特定版本的 TypeScript 语言服务，所以它天然支持 TypeScript 语法解析和类型检测，且这个内置的服务与手动安装的 TypeScript 完全隔离。因此， VS Code 支持在内置和手动安装版本之间动态切换语言服务，从而实现对不同版本的 TypeScript 的支持。
如果当前应用目录中安装了与内置服务不同版本的 TypeScript，我们就可以点击 VS Code 底部工具栏的版本号信息，从而实现 “use VS Code's Version” 和 “use Workspace's Version” 两者之间的随意切换。
除此之外，VS Code 也基于 TypeScript 语言服务提供了准确的代码自动补全功能，并显示详细的类型定义信息，大大的提升了我们的开发效率。
1）全局安装TypeScript：
2）初始化配置文件：
执行之后，项目根目录会出现一个 tsconfig.json 文件，里面包含ts的配置项（可能因为版本不同而配置略有不同）。
可以在 package.json 中加入script命令：
3）编译ts代码：
TSLint 是一个通过 tslint.json 进行配置的插件，在编写TypeScript代码时，可以对代码风格进行检查和提示。如果对代码风格有要求，就需要用到TSLint了。其使用步骤如下： （1）在全局安装TSLint：
（2）使用TSLint初始化配置文件：
执行之后，项目根目录下多了一个 tslint.json 文件，这就是TSLint的配置文件了，它会根据这个文件对代码进行检查，生成的 tslint.json 文件有下面几个字段：
这些字段的含义如下；
在说TypeScript数据类型之前，先来看看在TypeScript中定义数据类型的基本语法。
在语法层面，缺省类型注解的 TypeScript 与 JavaScript 完全一致。因此，可以把 TypeScript 代码的编写看作是为 JavaScript 代码添加类型注解。
在 TypeScript 语法中，类型的标注主要通过类型后置语法来实现：“ 变量: 类型 ”
在 JavaScript 中，原始类型指的是 非对象且没有方法 的数据类型，包括：number、boolean、string、null、undefined、symbol、bigInt。
它们对应的 TypeScript 类型如下：
JavaScript原始基础类型TypeScript类型 numbernumber booleanboolean stringstring nullnull undefinendefined symbolsymbol bigIntbigInt
需要注意 number 和 Number 的区别：TypeScript中指定类型的时候要用 number ，这是TypeScript的类型关键字。而 Number 是 JavaScript 的原生构造函数，用它来创建数值类型的值，这两个是不一样的。包括 string 、 boolean 等都是TypeScript的类型关键字，而不是JavaScript语法。
TypeScript 和 JavaScript 一样，所有数字都是 浮点数 ，所以只有一个 number 类型。
TypeScript 还支持 ES6 中新增的二进制和八进制字面量，所以 TypeScript 中共支持 2、8、10和16 这四种进制的数值：
字符串类型可以使用单引号和双引号来包裹内容，但是如果使用 Tslint 规则，会对引号进行检测，使用单引号还是双引号可以在 Tslint 规则中进行配置。除此之外，还可以使用 ES6 中的模板字符串来拼接变量和字符串会更为方便。
类型为布尔值类型的变量的值只能是true或者false。除此之外，赋值给布尔值的值也可以是一个计算之后结果为布尔值的表达式：
在 JavaScript 中，undefined和 null 是两个基本数据类型。在 TypeScript 中，这两者都有各自的类型，即 undefined 和 null，也就是说它们既是实际的值，也是类型。这两种类型的实际用处不是很大。
注意，第一行代码可能会报一个tslint的错误： Unnecessary initialization to 'undefined' ，就是不能给一个变量赋值为undefined。但实际上给变量赋值为undefined是完全可以的，所以如果想让代码合理化，可以配置tslint，将" no-unnecessary-initializer "设置为 false 即可。
默认情况下，undefined 和 null 是所有类型的子类型，可以赋值给任意类型的值，也就是说可以把 undefined 赋值给 void 类型，也可以赋值给 number 类型。当在 tsconfig.json 的"compilerOptions"里设置为 "strictNullChecks": true 时，就必须严格对待了。这时 undefined 和 null 将只能赋值给它们自身或者 void 类型。这样也可以规避一些错误。
BigInt是ES6中新引入的数据类型，它是一种内置对象，它提供了一种方法来表示大于 2- 1 的整数，BigInt可以表示任意大的整数。
使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。
我们知道，在 JavaScript 中采用双精度浮点数，这导致精度有限，比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数，即 2- 1 ，来看一个例子:
可以看到，最终返回了true，这就是超过精读范围造成的问题，而 BigInt 正是解决这类问题而生的:
这里需要用 BigInt(number) 把 Number 转化为 BigInt ，同时如果类型是 BigInt ，那么数字后面需要加 n 。
在TypeScript中， number 类型虽然和 BigInt 都表示数字，但是实际上两者类型是完全不同的:
symbol我们平时用的比较少，所以可能了解也不是很多，这里就详细来说说symbol。
symbol 是 ES6 新增的一种基本数据类型，它用来表示独一无二的值，可以通过 Symbol 构造函数生成。
注意：Symbol 前面不能加 new关键字，直接调用即可创建一个独一无二的 symbol 类型的值。
可以在使用 Symbol 方法创建 symbol 类型值的时候传入一个参数，这个参数需要是一个字符串。如果传入的参数不是字符串，会先自动调用传入参数的 toString 方法转为字符串：
上面代码的第三行可能会报一个错误：This condition will always return 'false' since the types 'unique symbol' and 'unique symbol' have no overlap. 这是因为编译器检测到这里的 s1 === s2 始终是false，所以编译器提醒这代码写的多余，建议进行优化。
上面使用Symbol创建了两个symbol对象，方法中都传入了相同的字符串，但是两个symbol值仍然是false，这就说明了 Symbol 方法会返回一个独一无二的值。Symbol 方法传入的这个字符串，就是方便我们区分 symbol 值的。可以调用 symbol 值的 toString 方法将它转为字符串：
在TypeScript中使用symbol就是指定一个值的类型为symbol类型：
在ES6中，对象的属性是支持表达式的，可以使用于一个变量来作为属性名，这对于代码的简化有很多用处，表达式必须放在大括号内：
symbol 也可以作为属性名，因为symbol的值是独一无二的，所以当它作为属性名时，不会与其他任何属性名重复。当需要访问这个属性时，只能使用这个symbol值来访问（必须使用方括号形式来访问）：
在使用obj.name访问时，实际上是字符串name，这和访问普通字符串类型的属性名是一样的，要想访问属性名为symbol类型的属性时，必须使用方括号。方括号中的name才是我们定义的symbol类型的变量name。
使用 Symbol 类型值作为属性名，这个属性是不会被 for…in遍历到的，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 、 JSON.stringify() 等方法获取到：
虽然这些方法都不能访问到Symbol类型的属性名，但是Symbol类型的属性并不是私有属性，可以使用 Object.getOwnPropertySymbols 方法获取对象的所有symbol类型的属性名：
除了这个方法，还可以使用ES6提供的 Reflect 对象的静态方法 Reflect.ownKeys ，它可以返回所有类型的属性名，Symbol 类型的也会返回：
Symbol 包含两个静态方法， for 和 keyFor 。 1）Symbol.for()
用Symbol创建的symbol类型的值都是独一无二的。使用 Symbol.for 方法传入字符串，会先检查有没有使用该字符串调用 Symbol.for 方法创建的 symbol 值。如果有，返回该值；如果没有，则使用该字符串新创建一个。使用该方法创建 symbol 值后会在全局范围进行注册。
上面代码中，创建了一个iframe节点并把它放在body中，通过这个 iframe 对象的 contentWindow 拿到这个 iframe 的 window 对象，在 iframe.contentWindow上添加一个值就相当于在当前页面定义一个全局变量一样。可以看到，在 iframe 中定义的键为 TypeScript 的 symbol 值在和在当前页面定义的键为'TypeScript'的symbol 值相等，说明它们是同一个值。
2）Symbol.keyFor() 该方法传入一个 symbol 值，返回该值在全局注册的键名：
看完简单的数据类型，下面就来看看比较复杂的数据类型，包括JavaScript中的数组和对象，以及TypeScript中新增的元组、枚举、Any、void、never、unknown。
在 TypeScript 中有两种定义数组的方式：
以上两种定义数组类型的方式虽然本质上没有任何区别，但是更推荐使用第一种形式来定义。一方面可以避免与 JSX 语法冲突，另一方面可以减少代码量。
注意，这两种写法中的 number 指定的是数组元素的类型，也可以在这里将数组的元素指定为其他任意类型。如果要指定一个数组里的元素既可以是数值也可以是字符串，那么可以使用这种方式： number|string[] 。
在JavaScript中，object是引用类型，它存储的是值的引用。在TypeScript中，当想让一个变量或者函数的参数的类型是一个对象的形式时，可以使用这个类型：
可以看到，当给一个对象类型的变量赋值一个对象时，就会报错。对象类型更适合以下场景:
在 JavaScript 中并没有元组的概念，作为一门动态类型语言，它的优势是支持多类型元素数组。但是出于较好的扩展性、可读性和稳定性考虑，我们通常会把不同类型的值通过键值对的形式塞到一个对象中，再返回这个对象，而不是使用没有任何限制的数组。TypeScript 的元组类型正好弥补了这个不足，使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。
元组可以看做是数组的扩展，它表示已知元素数量和类型的数组，它特别适合用来实现多值返回。确切的说，就是已知数组中每一个位置上的元素的类型，可以通过元组的索引为元素赋值：：
可以看到，定义的arr元组中，元素个数和元素类型都是确定的，当为arr赋值时，各个位置上的元素类型都要对应，元素个数也要一致。
当访问元组元素时，TypeScript也会对元素做类型检查，如果元素是一个字符串，那么它只能使用字符串方法，如果使用别的类型的方法，就会报错。
在TypeScript 新的版本中，TypeScript会对元组做越界判断。超出规定个数的元素称作越界元素，元素赋值必须类型和个数都对应，不能超出定义的元素个数。
这里定义了接口 Tuple ，它继承数组类型，并且数组元素的类型是 number 和 string 构成的联合类型，这样接口 Tuple 就拥有了数组类型所有的特性。并且指定索引为0的值为 string 类型，索引为1的值为 number 类型，同时指定 length 属性的类型字面量为 2，这样在指定一个类型为这个接口 Tuple 时，这个值必须是数组，而且如果元素个数超过2个时，它的length就不是2是大于2的数了，就不满足这个接口定义了，所以就会报错；当然，如果元素个数不够2个也会报错，因为索引为0或1的值缺失。
TypeScript 在 ES 原有类型基础上加入枚举类型，使得在 TypeScript 中也可以给一组数值赋予名字，这样对开发者比较友好。枚举类型使用enum来定义：
上面定义的枚举类型的Roles，它有三个值，TypeScript会为它们每个值分配编号，默认从0开始，在使用时，就可以使用名字而不需要记数字和名称的对应关系了：
除此之外，还可以修改这个数值，让SUPER_ADMIN = 1，这样后面的值就分别是2和3。当然还可以给每个值赋予不同的、不按顺序排列的值：
我们可以将一个值定义为any类型，也可以在定义数组类型时使用any来指定数组中的元素类型为任意类型：
any 类型会在对象的调用链中进行传导，即any 类型对象的任意属性的类型都是 any，如下代码所示：
需要注意：不要滥用any类型，如果代码中充满了any，那TypeScript和JavaScript就毫无区别了，所以除非有充足的理由，否则应该尽量避免使用 any ，并且开启禁用隐式 any 的设置。
void 和 any 相反，any 是表示任意类型，而 void 是表示没有类型，就是什么类型都不是。这在 定义函数，并且函数没有返回值时会用到 ：
需要注意： void 类型的变量只能赋值为 undefined 和 null ，其他类型不能赋值给 void 类型的变量。
never 类型指永远不存在值的类型，它是那些 总会抛出异常 或 根本不会有返回值的函数表达式的返回值 类型，当变量被永不为真的类型保护所约束时，该变量也是 never 类型。
下面的函数，总是会抛出异常，所以它的返回值类型是never，用来表明它的返回值是不存在的：
never 类型是任何类型的子类型，所以它可以赋值给任何类型；而没有类型是 never 的子类型，所以除了它自身以外，其他类型（包括 any 类型）都不能为 never 类型赋值。
上面代码定义了一个立即执行函数，函数体是一个死循环，这个函数调用后的返回值类型为 never，所以赋值之后 neverVariable 的类型是 never 类型，当给neverVariable 赋值 123 时，就会报错，因为除它自身外任何类型都不能赋值给 never 类型。
基于 never 的特性，我们可以把 never 作为接口类型下的属性类型，用来禁止操作接口下特定的属性：
可以看到，无论给 props.name 赋什么类型的值，它都会提示类型错误，这就相当于将 name 属性设置为了只读 。
unknown 是TypeScript在3.0版本新增的类型，主要用来描述类型并不确定的变量。它看起来和any很像，但是还是有区别的，unknown相对于any更安全。
对于any，来看一个例子：
上面这些语句都不会报错，因为value是any类型，所以后面三个操作都有合法的情况，当value是一个对象时，访问name属性是没问题的；当value是数值类型的时候，调用它的toFixed方法没问题；当value是字符串或数组时获取它的length属性是没问题的。
当指定值为unknown类型的时候，如果没有 缩小类型范围 的话，是不能对它进行任何操作的。总之，unknown类型的值不能随便操作。那什么是类型范围缩小呢？下面来看一个例子：
这里由于把value的类型缩小为Date实例的范围内，所以进行了value.toISOString()，也就是使用ISO标准将 Date 对象转换为字符串。
使用以下方式也可以缩小类型范围：
关于 unknown 类型，在使用时需要注意以下几点：
在实际使用中，如果有类型无法确定的情况，要尽量避免使用 any，因为 any 会丢失类型信息，一旦一个类型被指定为 any，那么在它上面进行任何操作都是合法的，所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况，要先考虑使用 unknown。
㈤ TypeScript 系统入门到项目实战
### 课程介绍
TS在构建大型应用上的优势，以及与JS的完美互通，让TS未来一片光明，从0到1系统学习，把TS真正应用到框架和项目中。
在迷你“全栈”项目中学习TypeScript，以TypeScript完整串联前后端
基础与实战“融合”，将知识讲解融于项目开发中，让你更快的掌握TS工程开发所必须的知识点
### 目录
第1章 课程导学
本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获。
1-1 都2020了，还不抓紧学TypeScript?
第2章 TypeScript 基础语法入门
本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，帮助大家理解 TS 中的各种静态类型，包括：函数，数组，元组，类，抽象类接口等，迅速帮助大家理解 TS 的基础使用方式和语法。
2-1 安装 VsCode 编辑器
2-2 TypeScript的定义
2-3 TypeScript带来了什么优势
2-4 TypeScript基础环境搭建
2-5 静态类型的深度理解
2-6 基础类型和对象类型
2-7 类型注解和类型推断
2-8 函数相关类型
2-9 基础语法复习
2-10 数组和元组
2-11 Interface接口
2-12 类的定义与继承
2-13 类中的访问类型和构造器
2-14 静态属性，Setter和Getter
2-15 抽象类
2-16 作业节
第3章 使用 TypeScript 编写爬虫工具
本章将带大家使用 TypeScript 编写一个获取网站课程销量的爬虫工具，过程中对上一章节学习的 TypeScript 基础知识进行实践巩固，同时借助 TypeScript 中的 OOP 编程方式，给大家讲解部分面向对象开发中的设计模式。
3-1 爬虫概述及正版密钥获取 (04:48)
3-2 使用SuperAgent和类型定义文件获取页面内容 (18:43)
3-3 使用cheerio进行数据提取 (12:32)
3-4 爬取数据的结构设计和存储 (18:00)
3-5 使用组合设计模式优化代码 (21:21)
3-6 单例模式实战复习 (07:24)
3-7 TypeScript的编译运转过程的进一步理解 (21:04)
3-8 作业节
第4章 TypeScript 语法进阶
本章将给大家讲解更多的 TypeScript 进阶语法以及原理性知识。包括如何进行 TypeScript 编译过程的配置，联合类型，类型保护，枚举类型，泛型等知识点。同时也给大家扩展讲解了类型定义文件的使用及编写方式等内容。通过本章的学习，大家基本可以掌握 TypeScript 中绝大部分的语法知识点。
4-1 TypeScript中的配置文件（上）
4-2 TypeScript中的配置文件（下）
4-3 作业节
4-4 联合类型和类型保护
4-5 Enum 枚举类型
4-6 函数泛型
4-7 类中的泛型以及泛型类型
4-8 命名空间-namespace（上）
4-9 命名空间-namespace（下）
4-10 import对应的模块化-缺代码
4-11 使用 Parcel 打包 TS 代码
4-12 描述文件中的全局类型（上）
4-13 描述文件中的全局类型（下）
4-14 模块代码的类型描述文件
4-15 作业节
4-16 泛型中keyof语法的使用
第5章 使用 Express 框架开发数据爬取及展示接口
本章将在 Express 框架中使用 TypeScript 的语法进行登陆，数据爬取和展示接口的开发，过程中对之前的基础语法进行实践巩固，同时讲解以 JavaScript 作为开发语言的框架中使用 TypeScript 会遇到的问题以及解决方案。
5-1 Express 基础项目结构搭建
5-2 使用TS编写常规express代码遇到的问题
5-3 扩展解决 Express 的类型定义文件问题
5-4 登陆功能的开发
5-5 统一接口数据结构，优化代码
第6章 TypeScript 高级语法
本章主要讲解 TypeScript 中，装饰器和元数据的语法知识，包括类装饰器，方法装饰器，属性装饰器和参数装饰器在本章中都会详细讲解，通过本章的学习，大家基本上完成了对 TypeScript 所有重点语法的学习。
6-1 类的装饰器（1）
6-2 类的装饰器（2）
6-3 方法装饰器
6-4 访问器的装饰器
6-5 属性的装饰器
6-6 参数装饰器
6-7 装饰器实际使用的小例子
6-8 reflect-metadata
6-9 装饰器的执行顺序
6-10 作业节
第7章 Express 项目代码改良
结合上一章学习的装饰器和元数据的语法知识，本章将通过面向对象的方式，对之前的接口代码进行全面重构，最终帮大家编写出和当前主流 Node 框架风格一致的后端应用代码，对上一章的知识点进行实战巩固，同时帮助大家理解 Node 框架设计背后的原理性知识。
7-1 创建控制器和装饰器
7-2 通过装饰器实现项目路由功能
7-3 多种请求方法装饰器的生成
7-4 .中间件装饰器的编写
7-5 .代码结构优化
7-6 .练习题：如何在一个方法上使用多个装饰器
第8章 使用 React 编写爬取数据的展示页面
本章将带大家使用TS的语法进行前端 React 代码的开发，过程中会给大家讲解在 React 和 Rex 等前端核心框架上如何正确巧妙的使用TypeScript。本章的最后，我们将产出一个完整的爬虫项目，并通过可视化的方式，对爬取到的数据进行展示。
8-1 初始化 React 项目
8-2 编写登陆表单
8-3 类型及路由的使用
8-4 前后端代码联调及登陆跳转逻辑开发
8-5 登陆退出功能完整优化
8-6 数据爬取功能打通及 Echarts 的使用
8-7 折线图数据处理及展示
8-8 接口数据类型的冗余定义问题
8-9 通过 Typescript 简化前后端协作模式
第9章 课程总结
本章将对整个项目所学习到的知识点进行总结，并给出大家进一步深入学习 TS 的方法和技巧。
9-1 课程总结及后续学习方法推荐
### 获取方式：TypeScript 系统入门到项目实战
㈥ TypeScript 速成教程
Typescript 是 javascript 的类型超集，旨在简化大型 JavaScript 应用程序的开发。Typescript 加入了常见的概念例如 类（classes），泛型（generics），接口（interfaces）和静态类型（static types）并允许开发人员使用静态检查和代码重构等工具。
为什么在意 Typescript
现在问题仍然是为什么你应该优选使用 Typescript。这有一些关于为什么 javascript 开发者应该考虑学习 Typescript 的原因。
静态类型
Javascript 是动态类型的，这意味着直到在运行时实例化时，它不知道变量的类型，这可能导致项目中的问题和错误。Typescript 加入了对 Javascript 静态类型支持如果你正确的使用它处理由变量类型的错误设定引起的错误。您仍然可以完全控制输入代码的严格程度，或者甚至根本不使用类型。
更好的 IDE 支持
Typescript 相比 Javascript 一个更大的优势是更好的 IED 支持包括了来自 Typescript 编译器智能，实时的提示，调试以及更多功能。这里还有一大堆扩展进一步 提升你的 Typescript 开发体验。
应用新的 ECMAScript 特性
Typescript 使您可以使用最新的 ECMAScript 功能，并将它们转换到您选择的 ECMAScript 目标。这意味着您可以使用最新的工具开发应用程序，而无需担心浏览器支持。
什么时候你该使用它
到目前为止，我们应该知道为什么 Typescript 是有用的以及如何改善我们的开发体验。但它并不是解决所有问题的方法，当然也不能阻止你自己编写可怕的代码。那么让我们来看看你应该在哪里使用 Typescript。
当你拥有一个很大的代码库时
Typescript 是大型代码库的一个很好的补充，因为它可以帮助您防止许多常见错误。这尤其适用于多个开发人员工作在同一项目之中。
当你项目成员早已知道静态类型语言时
另一个明显使用 Typescript 的场景是当你和你的团队已经知道静态类型的语言像 Java 和 C# 不想改为编写 Javascript。
设置/建立
要设置 typescript，我们只需要使用 npm 包管理器安装它并创建一个新的 Typescript 文件。
安装完成之后我们可以继续探寻 Typescript 提供给我们的语法和功能特性。
类型
现在让我们来看看 Typescript 所提供的类型：
数值（Number）
Typescript 所有的值类型都是浮点数。所有的数字包括二进制和十六进制都是数值类型。
字符串（String）
与其他语言一样，Typescript 使用 String 数据类型来保存文本数据。
你还可以用反引号来应用多行字符串并嵌入表达式。
布尔类型（Boolean）
Typescript 支持所有的基本数据类型，布尔类型，值必须为 true 或者 false。
指定类型
现在我们已经有了基本的数据类型，我们可以看看你如何在 Typescript 中指定类型。基本上，您只需要在名称和冒号后面写出变量的类型。
单一类型
这里例子为我们如何为变量指定字符串数据类型
所有其他数据类型也是这样使用。
多类型
你仍然可以通过 | 操作符为你的变量指定多个数据类型：
这里我们使用|为变量分配两种类型。现在我们可以在其中存储字符串和数值。
类型检测
现在让我们看看我们如何检查我们的变量是否具有正确的类型。我们有多种选择，但在这里我只展示了两个最常用的选项。
Typeof
typeof 仅仅知道基本类型。这意味着它只能检查变量是否是我们上面定义的数据类型之一。
在此示例中，我们创建一个字符串类型变量并使用 typeof 命令检查 str 是否为 Number 类型（始终为 false）。然后我们打印是否是数值。
Instanceof
instanceof 运算符与 typeof 几乎相同，只是它还可以检查 javascript 尚未定义的自定义类型。
在这里，我们创建一个自定义类型，我们稍后将在本文中讨论，然后创建它的实例。之后，我们检查它是否真的是 Human 类型的变量，如果是，则在控制台中打印。
类型断言
有时我们还需要将变量转换为特定的数据类型。这经常发生在你已经指定了一个泛型类型像 any 并且你想使用它具体的类型的方法。
有很多选择可以解决这个问题，但在这里我只分享其中两个。
As 关键字
通过在变量名之后使用 as 关键字跟随具体的数据类型来转换变量的类型。
这里我们将 str 变量转换为字符串，以便我们可以使用 length 属性（如果您的 TSLINT 设置允许，甚至可以在没有转换的情况下工作）。
> 操作符
我们也可以使用 > 运算符，它与 as 关键字具有完全相同的效果，只有语法差异。
此代码块与上面的代码块具有完全相同的功能。它只是语法不同。
数组
Typescript 中的数组是相同对象的集合，可以用两种不同的方式创建。
创建数组
使用 []
我们可以通过指定类型后跟 [] 来定义数组对象，以表示它是一个数组。
在这个例子中，我们创建一个字符串数组，它包含三个不同的字符串值。
使用泛型数组
我们还可用指定 Array 定义泛型数组
这里我们创建一个数值数组，它包含 5 个不同的数字。
多（混合）类型数组
此外，我们还可以使用 | 操作符将多个类型分配给单个数组。
此例中我们创建了一个数值可以包含字符串和数值。
多维数组
Typescript 还允许我们定义多维数组，这意味着我们可以将数组保存在另一个数组中。我们可以通过使用多个[]运算符来创建一个多维数组。
这里我们创建一个包含另一个数字数组的数组。
元组（Tupels）
元组基本类似数组但有一点不同。我们可以定义每个位子上储存数据的类型。这意味着我们可以通过方括号内的枚举来限制固定索引位置的类型。
在此列中，我们定义了一个简单的元组，在索引 0 位置上指定为数值类型，在索引为 1 位置上指定为字符串类型。这意味着如果我们尝试在此索引上放置另一种数据类型，则会抛出错误。
以下是非法元组的示例：
枚举（Enums）
与大多数其他面向对象编程语言一样，Typescript 中的枚举允许我们定义一组命名常量。 Typescript 还提供基于数值和基于字符串的枚举。使用 enum 关键字定义 Typescript 中的枚举。
数值枚举
首先，我们将查看数值枚举，其中我们将键值与索引匹配。
上面，我们定义了数值枚举将 Playing 初始化为 0，Paused 为 1 等等。
我们也可以将初始化器留空，而 Typescript 会从零开始自动索引它。
字符串枚举
定义字符串枚举也十分简单，我们只需要在定义的每个枚举值后初始化字符串值。
这里我们通过使用字符串初始化我们的状态来定义字符串枚举。
对象（Objects）
Typescript 中的对象是包含一组键值对的实例。这些值可以是变量，数组甚至函数。它也被视为表示非基本类型的数据类型。
我们可以使用大括号创建一个对象：
这里我们创建了一个 human 对象包含三个不同的键值对。
我们可以为对象加入方法：
自定义类型
Typescript 还允许我们自定义类型，以便于我们后续重用。要创建自定义类型，我们只需要使用 type 关键字并定义我们的类型。
在此示例中，我们定义了一个名为 Human 包含三个属性的自定义类型。现在让我们看看如何创建这种类型的对象。
在这里，我们创建自定义类型的实例并设置所需的属性。
方法参数和返回类型
Typescript 允许我们为方法参数和返回值指定数据类型。现在让我们看一下使用 Typescript 定义函数的语法。
这里我们有两个示例函数，它们都具有定义类型的参数。我们还看到在结束括号后定义返回类型。
现在我们可以像普通的 javascript 一样调用我们的函数，但编译器会检查我们是否为函数提供了正确的参数。
可选属性
Typescript 允许我们为方法(注：接口等同样可以定义可选属性)定义可选属性。我们通过 ? 操作符定义。
在这个例子中，lastName 是一个可选参数，这意味着当我们不提供调用函数时，我们不会从编译器中获得错误。
这表示 2 个示例都被视为正确的。
默认值
我们使用可选属性的第二种方法是为它指定一个默认值。我们可以通过直接在函数头部赋值来实现。
在此例我中我们 lastName 赋予了默认值这意味着我们不必每次调用方法时提供它。
接口（Interfaces）
让我们看个例子让定义更加清晰：
可选属性
在 Typescript 中，有时并不是所有接口属性都是必需的。可以使用 ? 运算符在属性后面将其设置为可选。
在这里，我们创建一个具有一个普通和一个可选属性的接口，该属性是使用 ? 运算符。这就是我们两个人初始化都有效的原因。
只读属性
我们的接口中一些属性也应该只在首次创建对象时修改赋值。我们可以通过将 readonly 关键字放在我们的属性名称之前来指定此功能。
在此示例中，id 属性是只读的，在创建对象后无法更改。
模块（Barrels Moles）
Barrels 允许我们在一个更方便的模块中汇总多个导出模块。
我们仅需要创建一个新文件，它将导出我们项目中的多个模块 (译者注：根据 ECMAScript 定义一个文件定义一个模块，此处可能表示模块聚合(类似库等的入口文件))。
之后我们可以通过这个便利的单一导入语句引入这些模块。
泛型（Generics）
泛型允许我们创建兼容广泛类型而不是单一类型的组件。这使得我们的组件“ 开放”和复用。
现在您可能想知道为什么我们不只是使用任何（ any ）类型来使组件接受多种类型而不是单一类型。让我们看一个例子更好地了解。
我们想要一个简单的假函数（mmy function），它返回传入的参数：
然而 any 是通用的，某种程度它能接受所有类型参数但有一个很大的区别。我们丢失了我们传入的参数是什么类型以及返回值是什么类型。
所以让我们来看看，我们如何接受所有类型并知道它返回值的类型。
这里我们使用泛型参数 T，因此我们可以捕获变量类型并在以后使用它。我们还使用它作为返回参数类型，它允许我们在检查代码时看到相应的类型。
更多详细介绍你可以查看Charly Poly关于Generics and overloads的文章
访问修饰符（Access Modifiers）
访问修饰符控制我们类成员的可访问性。 Typescript 支持三种访问修饰符 - 公共的（public），私有的（private）和受保护的（protected）。
公共的
公共成员可以在任何地方访问，没有任何限制 这也是标准修饰符，这意味着您不需要使用 public 关键字为变量添加前缀。
私有的
私有成员只能在其定义的类中能访问。
受保护的
保护成员只能在其定义的类及其子类中访问。
TSLINT
TSLINT 是 Typescript 的标准 linter，可以帮助我们编写干净，可维护和可读的代码。它可以使用我们自己的 lint 规则，配置和格式化程序进行自定义。
设置
首先我们需要安装 Typescript 和 tslint，我们可以全局安装和局部安装：
之后，我们可以使用 TSLINT CLI 在我们的项目中初始化 TSLINT。
现在我们有了 tslint.json 文件，我们可以开始配置我们的规则了。
配置
TSLINT 允许使用配置我们自己的规则并自定义代码的外观。默认情况下，tslint.json 文件看起来像这样，只使用默认规则。
我们可以通过将它们放在 rules 对象中来添加其他规则。
有关所有可用规则的 概述，您可以查看官方文档。
结论
恭喜您一路走到最后！希望此篇文章帮助您理解 Typescript 的基础知识以及如何在项目中使用。
如果您发现这个有用，请考虑推荐并与其他开发人员共享。也可以访问我的网站学习更多。https://www.icoderoad.com
如果您有任何问题和反馈，在以下评论中让我知道。
㈦ TypeScript简单入门（三）:TypeScript原始数据类型表达
原始数据类型包括：布尔值、数值、字符串、 null 、 undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt 。
TypeScript声明变量时需要指定数据类型具体表达式
以构造函数方式：
编译后
其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。
模板字符串
其中 ` 用来定义 ES6 中的模板字符串，${expr} 用来在模板字符串中嵌入表达式。
JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：
声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：
与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
而 void 类型的变量不能赋值给 number 类型的变量：
Symbols是ES6新增的原始数据类型，ts中使用时需要先配置
1、配置tsconfig.json
"lib": ["es6"], 需要dom时还要将"dom"添加进lib,如:console.log语句
2、特性
(1)不能和其他值计算,如加键、字符串拼接等
(2)可以调用.toString()返回字符串
(3)本身作为true类型存在
(4)类似for in遍历时,不会遍历symbol属性
可通过Object.getOwnPropertySymbols(对象)/Reflect.ownKeys(obj)获取symbol属性
3、语法
bigint 数据类型是用来表示那些已经超出了 number 类型最大值的整数值，对于总是被诟病的整数溢出问题，使用了 bigint 后将完美解决。
bigint 是一种基本数据类型（primitive data type）。
JavaScript 中可以用 Number 表示的最大整数为 2^53 - 1，可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限，可以用 BigInt来表示，它可以表示任意大的整数。
在一个整数字面量后加 n 的方式定义一个 BigInt，如：10n 或者调用函数 BigInt()：
BigInt 与 Number 的不同点：
BigInt 不能用于 Math 对象中的方法。
BigInt 不能和任何 Number 实例混合运算，两者必须转换成同一种类型。
BigInt 变量在转换为 Number 变量时可能会丢失精度。
参考
原始数据类型
TypeScript BigInt
TypeScript Symbol
㈧ 第三节:TypeScript对象类型
在 JavaScript 中，我们分组和传递数据的基本方式是通过对象。在 TypeScript 中，我们通过 对象类型 来表示它们。
而TypeScript的核心原则之一是对值所具有的的结构进行类型检查,
之前的数据类型中已经了解,如何限定变量的类型
例如:
如果变量的值不是基本数据类型的值,而是一个对象,可以使用 object 类型
这种写法只能限定变量是object 类型, 但是没法明确表明或限定对象内部属性以及值类型,
也就是说示例中name可是是任意数据类型;属性也不限定于 name 和 age
如果要限定对象属性值的类型,就需要使用字面量的方式进行类型注释
这样的写法虽然达到了限定对象内部结构, 但同时也带来了另外的问题,如属性过多,或多次复用相同类型注释.
因此可以定义接口或 类型别名来定义统一的对象属性限制
通过接口命名对象类型
或者使用类型别名来命名对象类型
但是也需要注意到,在给使用了接口和类型别名时, 变量值接受对象中的属性必须和接口或类型别名中定义的属性一致.,多了少了编译时都会报错
为了让对象类型更具灵活性, 对象类型中每个属性都可以指定几件事:
很多时候,在处理对象类型的时候, 某些属性可能并不一定存在. 这个时候就需要用到可选属性.
可选属性通过在属性名称末尾添加 ? 来将这些属性标记为可选
例如:
可选属性在进行检测时,可选属性在实现上可有可无,这样就提升了对象类型使用的灵活性.
例如:
在TypeScript中对象属性也可以标记为 readonly 只读属性
只读属性虽然不会在运行时更改任何行为.但在类型检查期间无法写入只读标记的属性
通过在属性名前添加 readonly 来标记只读属性
例如:
此时 name 属性标记为只读属性, 当你尝试修改只读属性值时, TypeScript 报错,提示你不可修改
使用 readonly 修饰符并不一定意味着一个值完全不可修改, 也就是说属性属性值是一个引用类型的值,比如对象
readonly 只是表示当前属性本身不能被重写, 但属性值是引用类型, 引用类型内部的值是完全可变的
例如:
示例中只读属性 friend 内部的属性 name 被修改了, 没有任何报错.
因为TypeScript在检查这些类型是否兼容时不会考虑两种类型内部的属性是否有 readonly 标记存在, 所以 readonly 属性也可以通过别名来更改, 也就是说将有只读属性的类型重新分配给没有只读属性的类型
有的时候你并不提前知道类型属性的所有属性名, 但你确实知道属性值的类型
在这样的情况下, 你可以使用索引签名来描述可能值的类型,
例如:
示例中所以签名的意思,表示使用 number 类型的索引获取值时,返回 string 类型
TypeScript索引签名可以同时支持两种类型的索引器.
虽然字符串索引签名是描述'字典'模式的强大方式, 但TypeScript 还是强制所有的属性与其返回的类型匹配
例如:
示例中, age 属性的类型是 number 类型, 将会出现错误,因为与索引签名冲突,
其实也很好理解, 因为在使用 age 属性时, 无论通过, obj.age , 还是 obj["age"] , 其都符合索引签名的模式, 返回的值类型应该是 string 类型, 可是你有明确的声明了 age 属性的返回值是明确的 number 类型
此时TypeScript不知道使用索引签名的规则来检查值类型,还是具体罗列 age 属性的类型来检查值类型
这种问题,可以通过给索引签名使用联合类型解决
最后你 还可以在索引签名上使用只读属性 readonly , 表示不可以给索引分配值
例如:只读索引签名
在实际使用时,一个类型有可能是其他类型的具体版本的类型很常见,
简单说就是, 一个类型只有另外一个类型中的部分信息
例如:
有一下两个类型:
人员基本信息,包含姓名,年纪信息
具体学生信息: 包含除了姓名,年纪外还有学号,班级等信息
示例中, StudentPerson 包含 Person 所有的属性信息, 也可以说是 Person 类型更详细的类型,
试想一下,如果每个定义包含 name , age 属性以及其他不同属性类型时,我们都像示例中把 name , age 属性重新定义一遍.
这样的使用方式会导致 name , age 属性大量重复
解决这样重复声明一个类型中所有的属性,我们就可以使用 extends 关键字扩展原有类型, 并添加新的属性
关键字 extends 允许我们有效的从其他命名类型复制成员, 并添加我们想要的新成员
同样 interface 接口也允许从多个接口中扩展新的类型
这样我们就可以使用 WorkPerson 接口来注释一个具有姓名,年纪, 工作信息,工号属性对象的类型
interface 允许我们通过 extends 扩展其他类型来构建新的类型
TypeScript中还为类型别名提供了另外一种称之为交叉类型的类型扩展方式. 主要用于组合现有类型
使用 & 运算符定义交叉类型
示例中,通过交叉类型组合 Colorful 并 Circle 生成一个新的类型别名,类型别名同时具有前两个类型的所有属性
也可以在类型注释的时候使用交叉类型
理解两者的主要区别,方便我们在使用时做出取舍
通用对象类型:就是需要定义一个可以通用类型,
例如:定义一个Box类型,具有 contents 属性, 但是属性的值可能是 string , number , 等各种类型
首先会想到的是属性值类型使用联合类型
但联合类型也仅仅是罗列我们已知的类型, 在使用场景下可能并不通用, 例如值也有可能是其他对象类型呢
此时也许会考虑 any 任何类型
any类型可以工作,但是可能会导致意外事故发生
也可以尝试定义 unknown 类型
使用unknown类型就意味着我们需要进行类型检查,或者使用类型断言
不过 unknow 也不是特别安全, 比较安全的做法是为每一种类型添加一个接口
但这意味着如果是给函数参数使用, 我们需要创建不同函数或函数重载, 才能对这些进行操作
这样的处理方式不仅繁琐, 而且之后需要需要新的类型还需要引入新的类型和重载, 因为我们contents类型和重载实际上都是相同的,
最好的处理方式,就是我们创建一个声明类型参数的泛型,
其实就是将类型定义为像函数参数或变量一样, 类型参数就可以在多个地方使用, 通过传递具体类型,让使用类型参数的地方全部指代当前具体类型
此时当我们在使用 Box 类型注释时,必须给出一个类型参数来代替 Type
此时会将Box视为类型模板,其中 Type 为占位符将被其他类型替换,
Box 类型可以重复使用, Type 可以用任何类型代替, 这意味着当我们需要一个新类型 Box 是, 我们根本不要在 声明一个新的 Box 类型, 我们只需要传递不同的类型替换 Type 即可
这也意味着,如果将类型用在函数参数上,我们可以通过使用泛型函数来避免重载
示例中, 我们并没有限定obj的类型, 但是在传递参数后, TypeScript根据入参推断出 Type 是一个string 类型, 因此函数的第二个参数也必须是一个字符串类,否则TypeScript将发出错误警告
例如:如下调用函数
类型的别名也是可以通用的
例如
Box 接口也可以使用类型别名来替换
由于类型别名与接口不同,类型别名不仅仅可以描述对象,还可以使用类型别名来编写其他类型的通用帮助类型
㈨ 如何在 TypeScript 中创建自定义类型
介绍
TypeScript 是 JavaScript 语言的扩展，它使用 JavaScript 运行时和编译时类型检查器。
这种组合允许开发人员使用完整的 JavaScript 生态系统和语言功能，同时还添加可选的静态类型检查、枚举数据类型、类和接口。这些特性为开发人员提供了 JavaScript 动态特性的灵活性，但也允许更可靠的代码库，其中可以在编译时使用类型信息来检测可能在运行时导致错误或其他意外行为的问题。
额外的类型信息还提供了更好的代码库文档，并在文本编辑器中改进了 IntelliSense（代码完成、参数信息和类似的内容辅助功能）。队友可以准确地确定任何变量或函数参数的预期类型，而无需通过实现本身。
准备工作
要遵循本教程，我们将需要：
1)、一个环境，我们可以在其中执行 TypeScript 程序以跟随示例。要在本地计算机上进行设置，我们将需要以下内容。
2）、如果你不想在本地机器上创建 TypeScript 环境，你可以使用官方的 TypeScript Playground 来跟随。
3）、我们将需要足够的 JavaScript 知识，尤其是 ES6+ 语法，例如解构、rest 运算符和导入/导出。有关JavaScript的更多主题信息，建议阅读我们的 JavaScript 系列教程。
4）、本教程将参考支持 TypeScript 并显示内联错误的文本编辑器的各个方面。这不是使用 TypeScript 所必需的，但确实可以更多地利用 TypeScript 功能。为了获得这些好处，我们可以使用像 Visual Studio Code 这样的文本编辑器，它完全支持开箱即用的 TypeScript。我们也可以在 TypeScript Playground 中尝试这些好处。
本教程中显示的所有示例都是使用 TypeScript 4.2.2 版创建的。
创建自定义类型
自定义类型语法
在 TypeScript 中，创建自定义类型的语法是使用 type 关键字，后跟类型名称，然后使用类型属性分配给 {} 块。采取以下措施：
语法类似于对象文字，其中键是属性的名称，值是该属性应具有的类型。这定义了一个 Programmer 类型，它必须是一个对象，其 name 键保存一个字符串值，并且 knownFor 键保存一个字符串数组。
如前面的示例所示，我们可以使用 ; 作为每个属性之间的分隔符。也可以使用逗号、, 或完全省略分隔符，如下所示：
使用自定义类型与使用任何基本类型相同。添加一个双冒号，然后添加我们的类型名称：
ada 常量现在将通过类型检查器而不会引发错误。
如果我们在任何完全支持 TypeScript 的编辑器中编写此示例，例如在 TypeScript Playground 中，编辑器将建议该对象期望的字段及其类型，如下面的动画所示：
如果我们使用 TSDoc 格式（一种流行的 TypeScript 注释文档样式）向字段添加注释，则在代码完成中也建议使用它们。使用以下代码并在注释中进行解释：
注释描述现在将与字段建议一起出现：
TypeScript 编译器 (tsc) 将显示错误 2322：
如果我们省略了我们的类型所需的任何属性，如下所示：
TypeScript 编译器将给出错误 2741：
添加原始类型中未指定的新属性也会导致错误：
在这种情况下，显示的错误是 2322：
嵌套自定义类型
我们还可以将自定义类型嵌套在一起。想象一下，我们有一个 Company 类型，它有一个符合 Person 类型的 manager 字段。我们可以像这样创建这些类型：
然后，我们可以像这样创建一个 Company 类型的值：
我们可以省略 manager 常量中的类型，因为它与 Person 类型具有相同的形状。当我们使用与 manager 属性类型所期望的形状相同的对象时，TypeScript 不会引发错误，即使它没有明确设置为 Person 类型。
以下不会引发错误：
我们甚至可以更进一步，直接在company对象字面量中设置manager：
所有这些场景都是有效的。
如果在支持 TypeScript 的编辑器中编写这些示例，我们会发现编辑器将使用可用的类型信息来记录自己。对于前面的示例，只要我们打开 manager 的 {} 对象文字，编辑器就会期望一个name类型的字符串属性：
现在，我们已经完成了一些使用固定数量的属性创建我们自己的自定义类型的示例，接下来，我们将尝试向我们的类型添加可选属性。
可选属性
要将可选属性添加到类型，请添加 ? 属性的修饰符。使用前面部分中的 Programmer 类型，通过添加以下突出显示的字符将 knownFor 属性转换为可选属性：
在这里我们要添加 ? 属性名称后的修饰符。这使得 TypeScript 将此属性视为可选的，并且在我们省略该属性时不会引发错误：
这将毫无错误地通过。
既然，我们已经知道如何向类型添加可选属性，那么，现在该学习如何创建一个可以容纳无限数量的字段的类型了。
可索引类型
在这里，我们使用大括号 ({}) 中的类型定义块创建一个普通类型，然后以 [key: typeOfKeys]: typeOfValues 的格式添加一个特殊属性，其中 typeOfKeys 是该对象的键应具有的类型， typeOfValues 是这些键的值应该具有的类型。
然后，我们可以像任何其他类型一样正常使用它：
使用可索引类型，我们可以分配无限数量的属性，只要它们与索引签名匹配，索引签名是用于描述可索引类型的键和值的类型的名称。在这种情况下，键具有字符串类型，值具有任何类型。
还可以将始终需要的特定属性添加到可索引类型中，就像使用普通类型一样。在以下突出显示的代码中，我们将状态属性添加到我们的数据类型：
这意味着数据类型对象必须有一个带有布尔值的状态键才能通过类型检查器。
现在，我们可以创建具有不同数量元素的对象，我们可以继续学习 TypeScript 中的数组，它可以具有自定义数量的元素或更多。
创建元素数量或更多的数组
使用 TypeScript 中可用的数组和元组基本类型，我们可以为应该具有最少元素的数组创建自定义类型。在本节中，我们将使用 TypeScript 剩余运算符...来执行此操作。
想象一下，我们有一个负责合并多个字符串的函数。此函数将采用单个数组参数。这个数组必须至少有两个元素，每个元素都应该是字符串。我们可以使用以下内容创建这样的类型：
MergeStringsArray 类型利用了这样一个事实，即我们可以将 rest 运算符与数组类型一起使用，并将其结果用作元组的第三个元素。这意味着前两个字符串是必需的，但之后的其他字符串元素不是必需的。
如果一个数组的字符串元素少于两个，它将是无效的，如下所示：
TypeScript 编译器在检查此数组时将给出错误 2322：
到目前为止，我们已经从基本类型的组合中创建了自己的自定义类型。在下一节中，我们将通过将两个或多个自定义类型组合在一起来创建一个新类型。
组合类型
在这里我们将介绍两种组合类型的方法。这些将使用联合运算符传递符合一种或另一种类型的任何数据，并使用交集运算符传递满足两种类型中所有条件的数据。
Unions
unions是使用 | 创建的 (pipe) 运算符，它表示可以具有联合中任何类型的值。举个例子：
在此代码中，ProctCode 可以是字符串或数字。以下代码将通过类型检查器：
unions类型可以从任何有效 TypeScript 类型的联合中创建。
Intersections
我们可以使用相交类型来创建一个全新的类型，该类型具有相交在一起的所有类型的所有属性。
例如，假设我们有一些公共字段始终出现在 API 调用的响应中，然后是某些端点的特定字段：
在这种情况下，所有响应都将具有 status 和 isValid 属性，但只有用户响应将具有附加的用户字段。要使用交集类型创建特定 API 用户调用的结果响应，请结合使用 StatusResponse 和 GetUserResponse 类型：
ApiGetUserResponse 类型将具有 StatusResponse 中可用的所有属性以及 GetUserResponse 中可用的属性。这意味着数据只有在满足两种类型的所有条件时才会通过类型检查器。以下示例将起作用：
另一个示例是数据库客户端为包含连接的查询返回的行类型。我们将能够使用交集类型来指定此类查询的结果：
稍后，如果我们使用 fetchRowsFromDatabase() 函数，如下所示：
生成的常量joinedRows 必须有一个role 属性和一个name 属性，它们都保存字符串值，以便通过类型检查器。
使用模板字符串类型
从 TypeScript 4.1 开始，可以使用模板字符串类型创建类型。这将允许我们创建检查特定字符串格式的类型，并为我们的 TypeScript 项目添加更多自定义。
要创建模板字符串类型，我们使用的语法与创建模板字符串文字时使用的语法几乎相同。但是，我们将在字符串模板中使用其他类型而不是值。
想象一下，我们想创建一个传递所有以 get 开头的字符串的类型。我们可以使用模板字符串类型来做到这一点：
myString 将在此处通过类型检查器，因为字符串以 get 开头，然后是一个附加字符串。
如果我们将无效值传递给我们的类型，例如以下 invalidStringValue：
TypeScript 编译器会给我们错误 2322：
使用模板字符串创建类型可帮助我们根据项目的特定需求自定义类型。在下一节中，我们将尝试类型断言，它为其他无类型数据添加类型。
Using Type Assertions
如果我们想让我们的代码在这些场景中是类型安全的，我们可以使用类型断言，这是一种将变量类型更改为另一种类型的方法。通过在变量后添加 as NewType 可以实现类型断言。这会将变量的类型更改为 as 关键字之后指定的类型。
举个例子：
value 的类型为 any，但是，使用 as 关键字，此代码将 value 强制为 string 类型。
注意：要断言 TypeA 的变量具有 TypeB 类型，TypeB 必须是 TypeA 的子类型。几乎所有的 TypeScript 类型，除了 never，都是 any 的子类型，包括 unknown。
实用程序类型
在前面的部分中，我们查看了从基本类型创建自定义类型的多种方法。但有时我们不想从头开始创建一个全新的类型。有时最好使用现有类型的一些属性，甚至创建一个与另一种类型具有相同形状但所有属性都设置为可选的新类型。
使用 TypeScript 提供的现有实用程序类型，所有这些都是可能的。本节将介绍其中一些实用程序类型；有关所有可用的完整列表，请查看 TypeScript 手册的实用程序类型部分。
所有实用程序类型都是通用类型，我们可以将其视为接受其他类型作为参数的类型。可以通过使用 语法向其传递类型参数来识别通用类型。
Record
Record 实用程序类型可用于以比使用之前介绍的索引签名更简洁的方式创建可索引类型。
在我们的可索引类型示例中，我们具有以下类型：
我们可以使用 Record 实用程序类型而不是像这样的可索引类型：
Record 泛型的第一个类型参数是每个键的类型。在以下示例中，所有键都必须是字符串：
第二个类型参数是这些键的每个值的类型。以下将允许值是任何值：
Omit
Omit 实用程序类型可用于基于另一种类型创建新类型，同时排除结果类型中不需要的一些属性。
假设我们有以下类型来表示数据库中用户行的类型：
如果在我们的代码中，我们要检索除 addressId 之外的所有字段，则可以使用 Omit 创建没有该字段的新类型：
Omit 的第一个参数是新类型所基于的类型。第二个是我们要省略的字段。
如果我们在代码编辑器中将鼠标悬停在 UserRowWithoutAddressId 上，我们会发现它具有 UserRow 类型的所有属性，但我们省略了这些属性。
我们可以使用字符串联合将多个字段传递给第二个类型参数。假设我们还想省略 id 字段，我们可以这样做：
Pick
Pick 实用程序类型与 Omit 类型完全相反。我们无需说出要省略的字段，而是指定要从其他类型使用的字段。
使用我们之前使用的相同 UserRow：
假设我们只需要从数据库行中选择电子邮件键。我们可以像这样使用 Pick 创建这样的类型：
Pick 这里的第一个参数指定了新类型所基于的类型。第二个是我们想要包含的键。
这将等同于以下内容：
我们还可以使用字符串联合来选择多个字段：
Partial
使用相同的 UserRow 示例，假设我们想创建一个新类型，该类型与我们的数据库客户端可以用来将新数据插入用户表中的对象相匹配，但有一个小细节：我们的数据库具有所有字段的默认值，所以，我们是不需要通过其中任何一个。
为此，我们可以使用 Partial 实用程序类型来选择性地包括基本类型的所有字段。
我们现有的类型 UserRow 具有所需的所有属性：
要创建所有属性都是可选的新类型，我们可以使用 Partial 实用程序类型，如下所示：
这与拥有这样的 UserRowInsert 完全相同：
实用程序类型是一个很好的资源，因为它们提供了一种比从 TypeScript 中的基本类型创建类型更快的方法来构建类型。
总结
创建我们自己的自定义类型来表示我们自己的代码中使用的数据结构，可以为我们的项目提供灵活且有用的 TypeScript 解决方案。除了从整体上提高我们自己代码的类型安全性之外，将我们自己的业务对象类型化为代码中的数据结构将增加代码库的整体文档，并在与团队成员一起工作时改善我们自己的开发人员体验相同的代码库。
㈩ TypeScript 变量声明
一直以来我们都是通过 var 关键字定义JavaScript变量。
大家都能理解，这里定义了一个名为 a 值为 10 的变量。
我们也可以在函数内部定义变量：
并且我们也可以在其它函数内部访问相同的变量。
上面的例子里， g 可以获取到 f 函数里定义的 a 变量。 每当 g 被调用时，它都可以访问到 f 里的 a 变量。 即使当 g 在 f 已经执行完后才被调用，它仍然可以访问及修改 a 。
这里很容易看出一些问题，里层的 for 循环会覆盖变量 i ，因为所有 i 都引用相同的函数作用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。
快速的猜一下下面的代码会返回什么：
介绍一下， setTimeout 会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）。
好吧，看一下结果：
很多JavaScript程序员对这种行为已经很熟悉了，但如果你很不解，你并不是一个人。 大多数人期望输出结果是这样：
还记得我们上面提到的捕获变量吗？
让我们花点时间思考一下这是为什么。 setTimeout 在若干毫秒后执行一个函数，并且是在 for 循环结束后。 for 循环结束后， i 的值为 10 。 所以当函数被调用的时候，它会打印出 10 ！
一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时 i 的值：
这种奇怪的形式我们已经司空见惯了。 参数 i 会覆盖 for 循环里的 i ，但是因为我们起了同样的名字，所以我们不用怎么改 for 循环体里的代码。
主要的区别不在语法上，而是语义，我们接下来会深入研究。
这里我们定义了2个变量 a 和 b 。 a 的作用域是 f 函数体内，而 b 的作用域是 if 语句块里。
关于 暂时性死区 的更多信息，查看这里Mozilla Developer Network.
在一个嵌套作用域里引入一个新名字的行为称做 屏蔽 。 它是一把双刃剑，它可能会不小心地引入新问题，同时也可能会解决一些错误。 例如，假设我们现在用 let 重写之前的 sumMatrix 函数。
这个版本的循环能得到正确的结果，因为内层循环的 i 可以屏蔽掉外层循环的 i 。
通常 来讲应该避免使用屏蔽，因为我们需要写出清晰的代码。 同时也有些场景适合利用它，你需要好好打算一下。
因为我们已经在 city 的环境里获取到了 city ，所以就算 if 语句执行结束后我们仍然可以访问它。
回想一下前面 setTimeout 的例子，我们最后需要使用立即执行的函数表达式来获取每次 for 循环迭代里的状态。 实际上，我们做的是为获取到的变量创建了一个新的变量环境。 这样做挺痛苦的，但是幸运的是，你不必在TypeScript里这样做了。
会输出与预料一致的结果：
这很好理解，它们引用的值是 不可变的 。
除非你使用特殊的方法去避免，实际上 const 变量的内部状态是可修改的。 幸运的是，TypeScript允许你将对象的成员设置成只读的。 接口一章有详细说明。
使用最小特权原则，所有变量除了你计划去修改的都应该使用 const 。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用 const 也可以让我们更容易的推测数据的流动。
跟据你的自己判断，如果合适的话，与团队成员商议一下。
Another TypeScript已经可以解析其它 ECMAScript 2015 特性了。 完整列表请参见 the article on the Mozilla Developer Network。 本章，我们将给出一个简短的概述。
最简单的解构莫过于数组的解构赋值了：
这创建了2个命名变量 first 和 second 。 相当于使用了索引，但更为方便：
作用于函数参数：
你可以在数组里使用 ... 语法创建剩余变量：
当然，由于是JavaScript, 你可以忽略你不关心的尾随元素：
或其它元素：
你也可以解构对象：
这通过 o.a and o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。
注意，我们需要用括号将它括起来，因为Javascript通常会将以 { 起始的语句解析为一个块。
你可以在对象里使用 ... 语法创建剩余变量：
你也可以给属性以不同的名字：
这里的语法开始变得混乱。 你可以将 a: newName1 读做 " a 作为 newName1 "。 方向是从左到右，好像你写成了以下样子：
令人困惑的是，这里的冒号 不是 指示类型的。 如果你想指定它的类型， 仍然需要在其后写上完整的模式。
默认值可以让你在属性为 undefined 时使用缺省值：
现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。
但是，通常情况下更多的是指定默认值，解构默认值有些棘手。 首先，你需要在默认值之前设置其格式。
其次，你需要知道在解构属性上给予一个默认或可选的属性用来替换主初始化列表。 要知道 C 的定义有一个 b 可选属性：
要小心使用解构。 从前面的例子可以看出，就算是最简单的解构表达式也是难以理解的。 尤其当存在深层嵌套解构的时候，就算这时没有堆叠在一起的重命名，默认值和类型注解，也是令人难以理解的。 解构表达式要尽量保持小而简单。 你自己也可以直接使用解构将会生成的赋值表达式。
展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。 例如：
这会令 bothPlus 的值为 [0, 1, 2, 3, 4, 5] 。 展开操作创建了 first 和 second 的一份浅拷贝。 它们不会被展开操作所改变。
你还可以展开对象：
search 的值为 { food: "rich", price: "$", ambiance: "noisy" } 。 对象的展开比数组的展开要复杂的多。 像数组展开一样，它是从左至右进行处理，但结果仍为对象。 这就意味着出现在展开对象后面的属性会覆盖前面的属性。 因此，如果我们修改上面的例子，在结尾处进行展开的话：
那么， defaults 里的 food 属性会重写 food: "rich" ，在这里这并不是我们想要的结果。
对象展开还有其它一些意想不到的限制。 首先，它仅包含对象 自身的可枚举属性。 大体上是说当你展开一个对象实例时，你会丢失其方法：
其次，TypeScript编译器不允许展开泛型函数上的类型参数。 这个特性会在TypeScript的未来版本中考虑实现。