译文：One Thing Nobody Explained To You About TypeScript

我已经使用 TypeScript 超过四年了，总的来说，这是一次非常棒的体验。随着时间的推移，使用它的摩擦逐渐减少，直到完全消失，这使得我在编写类型或以类型优先的方式解决问题时变得更加高效。虽然我还远未成为真正的类型大师，但我敢说自己已经熟练掌握了这门语言，经历了类型体操、条件类型、嵌套泛型，并深刻理解了 type 和 interface 之间的神圣差异。说实话，我认为我对这门语言已经有了相当不错的理解。

直到我发现我错了。其实，有一个关于 TypeScript 的特定问题我完全理解错了，我相信你也可能犯过同样的错误。而这并不是某个你从未听说过、可能永远不会用到的复杂边缘案例。恰恰相反，这是你和其他所有 TypeScript 开发者直接交互过数百次的东西，一直在我们眼前游弋。

软件也像人一样，具有生命力，从出生到死亡，会经历多种变化。软件架构设计也不是一蹴而就的，是不断地演进发展。每个程序员都可以从理解编程原则和模式中受益。

软件设计原则是一组帮助我们避开不良设计的指导方针。根据 Robert Martin 的理论，应该避免不良设计的以下三个重要特点：

• 僵化：很难做改动，因为每一个细微的改动都会影响到系统大量的其他功能
• 脆弱：每当你做一次改动，总会引起系统中预期之外的部分出现故障
• 死板：代码很难在其他应用中重用，因其不能从当前应用中单独抽离出来

下面这些软件设计原则是我从一些书籍和网络中收集而来，并不完整，而且你也需要在一些有「冲突的原则」之间进行权衡和取舍。本文或许会对你的编程、程序设计、讨论或评审工作有所帮助。

无论是在注册流程、多视图步进器，还是在单调的数据输入界面中，表单都是数字产品设计中最重要的组成部分之一。本文着重介绍了表单设计中常见的该做和不该做的事情。请记住，这些都是一般准则，每个规则都有例外。

# 设计原则

# 单栏设计

多栏会破坏用户在垂直方向上的关注趋势。

调试 JavaScript 中的异步代码，有时会感觉像在趟雷。你不知道 console.log 何时何地会打印出来，你也不知道你的代码是如何执行的。

你很难正确地构造异步代码，使其按照你的意图以正确的顺序执行。

如果你在编写异步代码时有一些指导，并且在你即将犯错时得到一个有用的信息，那不是很好吗？

幸运的是，在我们将代码推送到生产中之前，我们有提示器来捕捉一些错误。下面是一个编译的提示规则列表，专门帮助你在 JavaScript 和 Node.js 中编写异步代码。

即使你最终没有在你的项目中使用这些规则，阅读它们的描述也会使你更好地理解异步代码，提高你的开发技能。

# 场景

当异步处理过多的时候，比如 Promise.all() 并发发起多个 Promise，假设 Promise 是 tcp 连接，并且数量达到几万个，会带来性能问题或触发系统限制。

# 1 命令行体验

本节介绍有关创建漂亮且高价值用户体验的 Node.js 命令行应用程序最佳实践。

在本节中：

• 1.1 遵守POSIX参数
• 1.2 构建富有同理心的CLI
• 1.3 有状态数据
• 1.4 提供富有色彩的体验
• 1.5 丰富的交互
• 1.6 无处不在的超链接
• 1.7 零配置
• 1.8 遵守POSIX信号

# Generator

异步编程一直是 JS 的核心之一，业界也是一直在探索不同的解决方法，从「回调地狱」到发布订阅模式，再到 Promise，都是在优化异步编程。尽管 Promise 已经很优秀了，也不会陷入「回调地狱」，但是嵌套层数多了也会有一连串的 then，始终不能像同步代码那样直接往下写就行了。Generator 是 ES6 引入的进一步改善异步编程的方案，下面我们先来看看基本用法。

当前，稿定 H5 编辑器中的动画可分为翻页动画和元素动画。翻页动画是基于 Vue 内置的动画组件（<transition-group>）来实现。而元素动画则是基于标准的 Web Animation API（WAAPI）实现。

# 速度优化

1. 减小文件搜索范围

   • 配置 resolve.modules:

   Webpack 的 resolve.modules 配置模块库（即 node_modules）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个 node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(alias)的配置，亦当如此：

   function resolve (dir) {
       return path.join(__dirname, '..', dir)
   }
   module.exports = {
       resolve: {
           extensions: ['.js', '.vue', '.json'],
               modules: [
               resolve('src'),
               resolve('node_modules')
           ],
           alias: {
               'vue$': 'vue/dist/vue.common.js',
               'src': resolve('src'),
               'assets': resolve('src/assets'),
               'components': resolve('src/components'),
               // ...
               'store': resolve('src/store')
           }
       },
       ...
   }