JavaScript 中存在的问题

由于各种历史因素，JavaScript 语言本身存在很多的缺点：

• 如 ES5 以及之前的使用的 var 关键字关于作用域的问题。
• 如最初 JavaScript 设计的数组类型并不是连续的内存空间。
• 直到今天 JavaScript 也没有加入类型检测。

但是不可否认，JavaScript 在变得更好。ES6、7、8 等的推出，每次都会让这门语言更加现代、更加安全、更加方便。但是 JavaScript 在类型监测仍然没有进展。

类型带来的问题

JavaScript 不能在代码编译期间发现代码的错误。

🌰 例子：

function getLength(str){
  return str.length;
}

getLength('abc')
getLength(); // 错误调用，但是IDE不报错

这个错误很大的原因就是因为 JavaScript 没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误；并且当这个错误产生时，会影响后续代码的继续执行，也就是整个项目都因为一个小小的错误而深入崩溃。

当然可以通过以给 JavaScript 加上很多限制：要求 getLength 函数中 str 是一个必传的类型，没有调用者没有传编译期间就会报错。要求它的必须是一个 String 类型，传入其他类型就直接报错。那么就可以知道很多的错误问题在编译期间就被发现，而不是等到运行时再去发现和修改。

类型思维的缺失

JavaScript 因为从设计之初就没有考虑类型的约束问题，所以造成了前端开发人员关于类型思维的缺失：

• 不关心变量或者参数是什么类型的，如果在必须确定类型时，我们往往需要使用各种判断验证。
• 因为没有类型约束，而总是担心自己的代码不安全，不够健壮。

在大型项目中使用 JavaScript 时，，这种宽松的类型约束会带来非常多 的安全隐患，多人员开发它们之间也没有良好的类型契约：

• 实现一个核心类库时，如果没有类型约束，那么需要对别人传入的参数进行各种验证来保证代码的健壮性；
• 如果要调用外部函数，没有对函数进行任何的注释，只能去看里面的逻辑来理解这个函数需要传入什么参数，返回值是什么类型。

TypeScript 的诞生

为了弥补 JavaScript 类型约束上的缺陷，增加类型约束，很多公司推出了自己的方案： 2014 年，Facebook 推出了 flow 来对 JavaScript 进行类型检查； 同年，微软也推出了 TypeScript 1.0 版本； 他们都致力于为 JavaScript 提供类型检查。

• Vue2.x 的时候采用的就是 flow 来做类型检查；
• Vue3.x 已经全线转向 TypeScript，98.3% 使用 TypeScript 进行了重构；
• Angular 在很早期就使用 TypeScript 进行了项目重构并且需要使用 TypeScript 来进行开发； 而甚至 Facebook 公司一些自己的产品也在使用 TypeScript；

认识 TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript 是拥有类型的 JavaScript 超集，它可以编译成普通、干净、完整的 JavaScript 代码。

• TypeScript 是加强版的 JavaScript。
• JavaScript 所拥有的特性，TypeScript 全部都是支持的，并且它紧随 ECMAScript 的标准，所以 ES6、ES7、ES8 等新语法标准，它都是支持的。
• 并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型（Enum）、元组类型（Tuple）等。
• TypeScript 在实现新特性的同时，总是保持和 ES 标准的同步甚至是领先。
• TypeScript 最终会被编译成 JavaScript 代码，所以并不需要担心它的兼容性问题，在编译时也不需要借助于 Babel 这样的工具；
• TypeScript 不仅让 JavaScript 更加安全，而且给它带来了诸多好用的好用特性；。

TypeScript 特点

官方描述：

• 始于 JavaScript，归于 JavaScript
• TypeScript 是一个强大的工具，用于构建大型项目
• 拥有先进的 JavaScript 特性。

TypeScript 的安装与运行环境

全局安装 TypeScript 开发环境：

$ npm install typescript -g # 安装命令
$ tsc --version # 查看版本

常规查看 TypeScript 代码的运行效果的两个步骤：

• 通过 tsc 编译 TypeScript 到 JavaScript 代码；

• 在浏览器或者 Node 环境下运行 JavaScript 代码。

简化 TypeScript 的运行：

• 编写了 TypeScript 之后可以直接运行在浏览器上：通过 webpack，配置本地的 TypeScript 编译环境和开启一个本地服务，可以直接运行在浏览器上； codewhy TypeScript (二) 使用 Webpack 搭建环境 (qq.com) (opens new window)；
• 编写了 TypeScript 之后，直接通过 node 的命令来执行：通过 ts-node 库，为 TypeScript 的运行提供执行环境。

安装 ts-node：

$  npm i ts-node -g

与 ts-node 需要依赖 tslib 和 @types/node 两个包：

npm i tslib @types/node -g