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

在 JavaScript 中，最基本的将数据成组和分发的方式就是通过对象。在 TypeScript 中，我们通过对象类型（object types）来描述对象。

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

TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增及修改较多的一些章节进行了个人的翻译整理。

前言写给即将参加以及未来参加校招的同学们。校招介绍校招，全称校园招聘，指企业招聘那些即将毕业的学生。每年一般有春招、秋招两次，春招的时间大概在 3 - 5 月，秋招的时间大概在 7 - 12 月。不过像淘宝，招聘的时间跨度往往并没有那么长，从往年的经验来看，淘宝的春招大概在 3 - 4 月，秋招大概在 7 - 9 月。这主要...

背景最近淘系开启社招，我联系了很多的同学，了解了大家一些面大厂的经历后，我觉得大家对于面试大厂是不是有点随意……面试这种东西并不是投个简历，等着被面就好了，是要做很多准备的，这个准备不只是题目和项目上的准备，心理和意识上的准备同样重要。不过因为我个人也只在淘宝这个大厂呆过，所以我根据自己的经历，讲...

作为一个业务前端，完成业务需求的同时，还要处理各种线上问题，加班辛苦忙碌了一年，还要被老板说“思考是不够的”、“没有业务 sence”，出去面试，被问项目，也说不出什么有亮点或者有挑战的东西，想做点牛逼的东西，也没有发现什么有价值的方向，好不容易找到一些方向，还要被老板一顿质问，业务价值是什么？ROI 怎样？...

3 月 25 日晚，面向 21 届学生，淘系前端团队举办直播活动，由淘系前端技术专家大果带来「淘系前端技术体系揭秘」和「校招问题答疑」，答疑环节更是邀请了淘系前端校招负责人、淘系高级技术专家元彦，直播回答问题，其中干货满满，冴羽辛苦的对答疑部分进行了文字整理，分享给大家，如果要观看这场直播，可以搜索「yayuj...

先看效果 先来个思考题： {代码...} 我们直接看效果： 如果觉得打印一个字母不过瘾的话，打印一句话呢？ {代码...} 再来看看效果： 基础测验 如果想了解以上是怎么实现的，先来检测下自己对 JavaScript 隐式类型转换的理解程度： {代码...} 如果不能准确的说出以上的结果，或者是想更深入的理解以上的转换过程，推荐先看...

这其实是因为 JavaScript 自动的将数据类型进行了转换，我们通常称为隐式类型转换。但是我们都知道，+运算符既可以用于数字加法，也能用于字符串拼接，那在这个例子中，是将数字 1 转成字符串 '1'，进行拼接运算？还是将字符串 '1' 转成数字 1，进行加法运算呢？

于是我真的就建群收集了题目，和团队的同事一起写答案，我们也不图什么，就是想做一件有意义的事情，现在我整理了下我们的回答，有的不一定就是非常具体的回答，但也提供了思路和参考资料，大家看看是否还有什么补充的？

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

于是我真的就建群收集了题目，和团队的同事一起写答案，我们也不图什么，就是想做一件有意义的事情，现在我整理了下我们的回答，有的不一定就是非常具体的回答，但也提供了思路和参考资料，大家看看是否还有什么补充的？

2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，在灰度期间，就导致了阿里系的很多应用都产生了问题，为此还专门成立了小组，推动各 BU 进行改造，目前阿里系基本已经改造完成。所有的前端团队估计都收到过通知，也着实加深了一把大家对于 Cookie 的理解，所以很可能就此出个面试题，而即便不是面试题，当问...

0.1 + 0.2 是否等于 0.3 作为一道经典的面试题，已经广外熟知，说起原因，大家能回答出这是浮点数精度问题导致，也能辩证的看待这并非是 ECMAScript 这门语言的问题，今天就是具体看一下背后的原因。

前言 这里的 "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)：添加某个...