TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。本篇翻译整理自 TypeScript Handbook 中 「Mapped Types」 章节。本文并不严格按照原文翻译，对部分内容也做了解释补充。

TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。本篇翻译整理自 TypeScript Handbook 中 「Everyday Types」 章节。本文并不严格按照原文翻译，对部分内容也做了解释补充。

软件工程的一个重要部分就是构建组件，组件不仅需要有定义良好和一致的 API，也需要是可复用的（reusable）。好的组件不仅能够兼容今天的数据类型，也能适用于未来可能出现的数据类型，这在构建大型软件系统时会给你最大的灵活度。

函数是任何应用的基础组成部分，无论它是局部函数（local functions），还是从其他模块导入的函数，亦或是类中的方法。当然，函数也是值 (values)，而且像其他值一样，TypeScript 有很多种方式用来描述，函数可以以怎样的方式被调用。让我们来学习一下如何书写描述函数的类型（types）。

ES6 前，JavaScript 共有六种数据类型：Undefined、Null、Boolean、Number、String、Object。

前言 这里的 "ES6" 泛指 ES5 之后的新语法 这里的 "完全" 是指本文会不断更新 这里的 "使用" 是指本文会展示很多 ES6 的使用场景 这里的 "手册" 是指你可以参照本文将项目更多的重构为 ES6 语法 此外还要注意这里不一定就是正式进入规范的语法。 1. let 和 const 在我们开发的时候，可能认为应该默认使用 let 而不是 var...

前言 在阅读 《ECMAScript 6 入门》的时候，零散的看到有私有变量的实现，所以在此总结一篇。 1. 约定 实现 {代码...} 优点 写法简单 调试方便 兼容性好 缺点 外部可以访问和修改 语言没有配合的机制，如 for in 语句会将所有属性枚举出来 命名冲突 2. 闭包 实现一 {代码...} 优点 无命名冲突 外部无法访问和修改 缺点 c...

Decorator 装饰器主要用于: 装饰类 装饰方法或属性 装饰类 {代码...} 装饰方法或属性 {代码...} Babel 安装编译 我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。 不过我们也可以选择本地编译： {代码...} 新建 .babelrc 文件 {代码...} 再编译指定的文件 {代码...} 装饰类的编译 编译前： {代码...} 编...

前言 本篇我们重点介绍以下四种模块加载规范： AMD CMD CommonJS ES6 模块 最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 require.js 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。 项目目录为： {代码...} index.html 的内容如下： {代码...} data-main="vender/main" 表示主模块是 vender 下的 m...

我们或多或少都听过“数据绑定”这个词，“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

前言 在上一篇 《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。 ES5 寄生组合式继承 {代码...} 原型链示意图为： 关于寄生组合式继承我们在 《JavaScript深入之继承的多种方式和优缺点》 中介绍过。 引用《JavaScript高级程...

在了解 Babel 是如何编译 class 前，我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟，ES6 的 class 可以看作一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

前言 本文就是简单介绍下 Async 语法编译后的代码。 Async {代码...} Babel 我们直接在 Babel 官网的 Try it out 粘贴上述代码，然后查看代码编译成什么样子： {代码...} _asyncToGenerator regeneratorRuntime 相关的代码我们在 《ES6 系列之 Babel 将 Generator 编译成了什么样子》 中已经介绍过了，这次我们重点来看...

猛一看，好像编译后的代码还蛮少的，但是细细一看，编译后的代码肯定是不能用的呀，regeneratorRuntime 是个什么鬼？哪里有声明呀？mark 和 wrap 方法又都做了什么？

前言 我们以查找指定目录下的最大文件为例，感受从 回调函数 -> Promise -> Generator -> Async 异步处理方式的改变。 API 介绍 为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍一下。 fs.readdir readdir 方法用于读取目录，返回一个包含文件和目录的数组。 fs.stat stat 方法的参数是...

async ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 在异步处理上，async 函数就是 Generator 函数的语法糖。 举个例子： {代码...} 当你使用 async 时： {代码...} 其实 async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。 {代码...} spawn 函数指的是自动执行器，就比如说 c...

单个异步任务 {代码...} 为了获得最终的执行结果，你需要这样做： {代码...} 首先执行 Generator 函数，获取遍历器对象。 然后使用 next 方法，执行异步任务的第一阶段，即 fetch(url)。 注意，由于 fetch(url) 会返回一个 Promise 对象，所以 result 的值为： {代码...} 最后我们为这个 Promise 对象添加一个 then 方法...

前言 Promise 的基本使用可以看阮一峰老师的 《ECMAScript 6 入门》。 我们来聊点其他的。 回调 说起 Promise，我们一般都会从回调或者回调地狱说起，那么使用回调到底会导致哪些不好的地方呢？ 1. 回调嵌套 使用回调，我们很有可能会将业务代码写成如下这种形式： {代码...} 当然这是一种简化的形式，经过一番简单的思...

前言 我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。 特性 1. WeakMap 只接受对象作为键名 {代码...} 2. WeakMap 的键名所引用的对象是弱引用 这句话其实让我非常费解，我个人觉得这句话真正想表达的意思应该是： WeakMaps hold "weak" references to key objects, 翻译过来应该是 WeakMaps 保持了对...

基本介绍 ES6 提供了新的数据结构 Set。 它类似于数组，但是成员的值都是唯一的，没有重复的值。 初始化 Set 本身是一个构造函数，用来生成 Set 数据结构。 {代码...} Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。 {代码...} 属性和方法 操作方法有： add(value)：添加某个...

看着很简单，但是再回顾这段代码，实际上我们仅仅是需要数组中元素的值，但是却需要提前获取数组长度，声明索引变量等，尤其当多个循环嵌套的时候，更需要使用多个索引变量，代码的复杂度就会大大增加，比如我们使用双重循环进行去重：

实际上，Symbol 的很多特性都无法模拟实现……所以先让我们回顾下有哪些特性，然后挑点能实现的……当然在看的过程中，你也可以思考这个特性是否能实现，如果可以实现，该如何实现。

回顾 我们先来回顾下箭头函数的基本语法。 ES6 增加了箭头函数： {代码...} 相当于： {代码...} 如果需要给函数传入多个参数： {代码...} 如果函数的代码块需要多条语句： {代码...} 如果需要直接返回一个对象： {代码...} 与变量解构结合： {代码...} 很多时候，你可能想不到要这样用，所以再来举个例子，比如在 React ...

基础用法 {代码...} 如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义： {代码...} 值得一提的是，在模板字符串中，空格、缩进、换行都会被保留： {代码...} 注意，打印的结果中第一行是一个换行，你可以使用 trim 函数消除换行： {代码...} 嵌入变量 模板字符串支持嵌入变量，只需要将变量名写在 ${} 之中，其...

初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于：