第1章 Hello TypeScript
对于大部分前端开发者而言，TypeScript是一门新鲜且陌生的语言。既然已经有JavaScript了，为什么还需要TypeScript呢？TypeScript与JavaScript又有什么不同呢？
从某种严格的角度来讲，人们并不需要重复的东西，人们需要不一样的、特别的东西，就像两位面试者站在面试官前，都努力地表现出自己的差异性。
本章通过回溯JavaScript的发展历史来讲述TypeScript的差异性，希望通过梳理TypeScript的发展脉络，让读者了解只属于TypeScript的特性。
准备好了吗？就从Hello TypeScript开始吧。
1.1 引言
人们在使用一门语言之前需要对其进行多方“面试”。
你很难想象现在的前端世界竞争有多么激烈，除了长年稳坐第一的JavaScript以外，还有CoffeeScript、Dart、ClojureScript，等等，甚至“新人”Kotlin也希望来蹭一下热度，分一杯羹。
因此，非常有必要先来看一下TypeScript的“个人简历”：
·JavaScript的超集。
·支持ECMAScript 6标准，并支持输出ECMAScript 3/5/6标准的纯JavaScript代码。
·支持ECMAScript未来提案中的特性，比如异步功能和装饰器。
·支持类型系统且拥有类型推断。
·支持运行在任何浏览器、Node.js环境中。
从这份简历可以了解到，TypeScript与JavaScript、ECMAScript有着非常深入的联系。那么在谈论TypeScript之前，有必要对JavaScript与ECMAScript做一次充分的背景调查。也只有在了解了JavaScript与ECMAScript之后，我们才更有资格去谈论TypeScript是否适合我们。
1.1.1 JavaScript与ECMAScript
JavaScript是蹭热点的“网红”出身。在1995年，它被搭载在网景浏览器中首次发布，当时名字还是LiveScript。由于网景觉得这个名字缺乏热度，所以决定蹭一下流行的Java的热度，最终改名叫JavaScript。
如果非要说JavaScript与Java有什么关系的话，大概就相当于雷锋与雷峰塔的关系了。在国外程序员圈内，则喜欢用HAM（火腿）和HAMSTER（仓鼠）来比喻两者的关系，如图1-1所示。
JavaScript的成功引起了微软的注意，其在IE 3.0上搭载了JScript。JScript也是一种JavaScript的实现，两种JavaScript语言的出现意味着浏览器端语言标准化的缺失，甚至可能进一步出现分裂状态。
图1-1 Java与JavaScript的关系就像HAM之与HAMSTER之间的关系
所以在1996年，网景将JavaScript提交给ECMA International（欧洲计算机制造商协会）进行标准化，最终确定了新的语言标准，取名为ECMAScript。
从此，所有JavaScript的实现都必须以ECMAScript标准为基础。但由于JavaScript的历史原因，我们仍然用JavaScript称呼这门语言，而用ECMAScript称呼标准。
事情在开端的时候总是美妙的。
1997年ECMAScript发布了首版标准，紧接着1998年6月发布第二版标准。但在1999年12月发布了第三版标准之后，不幸开始降临了。在接下来的10年里，ECMAScript再也没能为标准化做出太大的贡献，甚至不同浏览器中的实现与标准大相径庭。不仅如此，各大厂商也开始向自己的JavaScript里添加“私货”，比如JScript的ActiveXObject。
这10年里究竟发生了什么呢？比较公允的看法是由于ECMAScript 4过分激进的草案导致了浏览器厂商的一致抵制。IE和Flash在这一时期的强势也导致了ECMAScript的进一步没落。
直到2005年秋，Task Group 1 of Ecma Technical Committee 39(TG1)才开始定期召开会议。之后，大火的Ajax让人们意识到了JavaScript的复兴，标准化工作才开始加速。
经过一系列复杂的争论，2009年12月ECMAScript 5得以发布。随后的2012年，国外的开发者社区推动停止对旧版本IE的支持工作，使得ECMAScript 5开始流行。
2015年，ECMAScript规范草案的委员会TC39决定将定义新标准的制度改为一年一次。这意味着ECMAScript的更新不再依赖于整个草案的完成度，而可以根据添加的特性进行滚动发布。
同年，代号为Harmony的ECMAScript 6，也就是耳熟能详的ES 6，或者叫ES 2015，得以发布。Harmony（和谐）这个名字很有意思，仿佛在告诉开发者这么多年的争执与混乱终于平息。
但现在浏览器又开始拖后腿了。新特性往往很难在第一时间得到浏览器的支持，所以这一时期诞生了大量的前端工具，使开发者可以在开发环境中提前使用ECMAScript已发布或者还是草案的新特性。比如，Babel通过插件化的方式引入ECMAScript的特性，并在生产环境时编译到ES 3或ES 5的代码。
1.1.2 TypeScript
TypeScript是在新时代诞生的。
Ajax的火热和JavaScript的复兴标志着一个全新时代的到来。这个时期的JavaScript代码正在变得越来越庞大，构建规模化JavaScript应用程序的需求日益旺盛。
微软的语言开发者发现，内部的研发部门以及外部的客户都表示JavaScript大型Web应用很容易出现失控，变得难以驾驭。而类似CoffeeScript和Script#的语言又难以使用JavaScript的语言特性。
微软认为JavaScript只是一门脚本语言，设计理念简单，缺乏对类与模块的支持，并非真正用于开发大型Web应用。这使得微软内部开始出现需要自定义工具去强化JavaScript开发的需求。
2012年10月，Delphi、C#之父安德斯·海尔斯伯格主持开发的TypeScript终于发布，并且他亲自进行推广。
TypeScript的主要特点如下：
1）免费开源，使用Apache授权协议。
2）基于ECMAScript标准进行拓展，是JavaScript的超集。
3）添加了可选静态类型、类和模块。
4）可以编译为可读的、符合ECMAScript规范的JavaScript。
5）成为一款跨平台的工具，支持所有的浏览器、主机和操作系统。
6）保证可以与JavaScript代码一起运行，无须修改。（这一点保证了JavaScript项目可以向TypeScript平滑迁移。）
7）文件拓展名是ts。
8）编译时检查，不污染运行时。
可以说，TypeScript的设计充满了克制风格，这也使得它在诞生初期并没有迎来太大的反响。但安德斯·海尔斯伯格毕竟是语言大师，我们可以看一下自2012年后TypeScript的热度趋势图，如图1-2所示。
从与ES 6同期发布开始，TypeScript的热度开始了前所未有的爆发。这是因为，同时期大规模的单页应用需求开始井喷，也让市场意识到了TypeScript的重要性，这就是大师的前瞻性了。
与Facebook发布的静态类型检测工具Flow及其他语言相比的热度趋势图如图1-3所示。
如今，TypeScript成为微软发展的重点项目，其将新版本的发布节奏加快到了平均一个半月一次。在这样高强度的更新下，我们甚至可以期待将来TypeScript支持WebAssembly。
图1-2 TypeScript热度趋势图（2012年11月至2017年11月）
图1-3 热度趋势图（2014年10月至2017年12月）
1.2 准备环境
从现在起，我们就可以忘掉JavaScript、ECMAScript了，把思绪放空，回到眼前的TypeScript来。聊了这么多，是时候跟TypeScript打个招呼了，但在正式打招呼之前，我们还有些准备工作要做。
1.2.1 安装Node.js
Node.js是JavaScript的一个基于服务端的运行环境，大部分JavaScript工具链都需要它才能运行，TypeScript也不例外，所以下面先介绍Node.js。
首先打开Node.js的中文官网：
此时会有两个下载版本可以选择，如图1-4所示。
图1-4 Node.js中文官网
带LTS标记的版本意味着该版本会有长达30个月的官方维护期，包括安全问题、文档更新等；而不带此标记的版本会在新版本发布后仅拥有2个月的维护期。
所以，如果是在生产环境中使用，尽量使用LTS版本。如果只是想学习Node.js的话，可以根据版本的不同特性进行选择。而在本书中，推荐安装Node.js 8.x。Node.js的安装包在各个系统上的差异不大，所以下载完成之后，直接打开安装就可以了。
如果使用Windows，在安装完成之后，可以进入CMD（同时按住Win和R键，然后输入CMD，再按回车可进入），在CMD中输入：
node -v
这时，如果出现类似如下的版本提示，则说明安装成功：
node -v v8.11.1
同理，如果使用Linux和Mac，可以打开终端，然后输入同样的命令，也能看到版本号。
1.2.2 npm和Yarn
npm的全称是Node Package Manager，翻译过来就是Node.js的包管理工具。它不仅承接了Node生态的包管理，也承接了前端JavaScript的包管理工作，同时它还与Node.js一起无痕地捆绑安装，不需要再次去搜索下载，这使得npm很快得到了普及。
npm由三个不同的部分组成：网站、注册表和CLI。网站是用户发现软件包的主要工具，注册表是一个关于软件包信息的大型数据库，而CLI则告诉开发者如何在注册表上发布软件包或下载软件包。
那Yarn是什么呢？Yarn是Facebook、Google、Exponent和Tilde共同开发的一款新JavaScript包管理工具。它并没有试图完全取代npm。Yarn同样是从npm注册源获取模块的CLI客户端。注册的方式不会有任何变化，即同样可以正常获取与发布包。它存在的目的是解决团队使用npm面临的少数问题，比如依赖版本的锁定、并行安装以及文案输出等。当然，在Node版本的更替中，npm本身也在积极更新并解决这些问题。
但在本书中，我们使用Yarn作为项目的包管理工具。
可以通过以下方式安装Yarn：
npm install –g yarn
当然，Yarn的官方文档有明确说明。一般来说，不推荐通过npm安装Yarn，在用基于Node.js的包管理工具安装Yarn时，该包未被签名，并且只通过基本的SHA1散列进行唯一完整性检查。这在安装系统级应用时有安全风险。
为此，建议访问以下网址，采用Yarn官方推荐的方式进行安装：
https://yarnpkg.com/zh-Hans/docs/install#mac-tab
1.2.3 安装TypeScript
TypeScript的安装非常简单，只需执行如下命令即可：
npm install –g typescript
但通常在实际项目中，我们不会对TypeScript进行全局安装。因为TypeScript自带的tsc命令并不能直接运行TypeScript代码，所以通常我们还会安装TypeScript的运行时ts-node：
npm install –g ts-node
ts-node并不等于TypeScript的Node.js，仅仅封装了TypeScript编译的过程，提供直接运行TypeScript代码的能力。
1.3 Visual Studio Code
似乎我们忘了点什么，没错，那就是一款适合TypeScript的IDE。
工欲善其事，必先利其器，这说明需要挑选一款得心应手的兵器。而推荐Visual Studio Code（以下简称VSCode）的原因主要有以下三个：
1）免费开源，可跨平台使用且跨平台体验非常一致。
2）同样由微软主导开发，并进行高频率的持续更新。
3）几乎由TypeScript实现，天然对TypeScript有良好的支持。当光标悬停在变量上时，会主动提示变量类型，非常方便。
1.3.1 安装VSCode
访问VSCode的官网，可以直接根据当前系统版本下载需要的安装包，如图1-5所示。
https://code.visualstudio.com/
图1-5 VSCode官网下载页面
VSCode会自动检查是否为最新版本，并提示用户自动更新，所以无须担心当前是否为最新版本。
1.3.2 安装Shell命令
按住快捷键
P（Windows，Linux使用Ctrl+Shift+P），在浮窗中输入：
install 'code'
如图1-6所示，选择“Shell Command：Install'code'command in PATH”后，会提示已经成功安装Shell命令。之后在终端中使用code命令就可以快速打开文件或者文件夹，比如code test.js或者code./folder。
图1-6 选择安装Shell命令
1.4 Hello World
好的，经历了一番波折后，我们终于来到了经典的Hello World环节。
想必你已经有点不耐烦了，但我还是得啰嗦一下步骤，打开VSCode，新建文件，名叫hello.ts。
这个时候让我们忘记各种概念，ES的历史也好，TypeScript也好，让它们都化作粉尘吧。
请回忆你记忆中的JavaScript，如果要输出一行Hello World该如何操作？难道不是下面这样吗？
console.log('hello world');
当然是这样，TypeScript与JavaScript的基础语法几乎一样。
但我们还是需要谨慎验证一番。按住快捷键J（Windows和Linux为Ctrl+J），此时会打开VSCode自带的终端，输入ts-node hello.ts，如图1-7所示。
图1-7 Hello World
此时，你会看到一个漂亮的Hello World的输出。
但这个漂亮的输出不禁让你陷入深深的沉思：“有啥不一样？”TypeScript与JavaScript到底有什么不同呢？还真的有很多不同，让我们去下一章看看类型与函数。
1.5 本章小结
经过一番严格的“考核”，我们了解到TypeScript不仅出身“名门”微软，还有着日益增长的“声望”。它不仅能完全适用于JavaScript开发，还带来了非常多新的特性。
但不要被它迷惑了！对，我说的就是你！
不能简单地被TypeScript迷惑了，这一次我可以给它通过面试。但在接下来的章节里，我们必须给它一些艰巨的任务，让它充分展现自己的实力，让我们了解一下为什么它能在混战的前端业界占有一席之地。
1.6 作业
1.我们都知道IDE中拓展的威力，好的拓展能够让我们事半功倍，能自动纠错，能辅助我们写代码，所以尝试在VSCode中安装与TypeScript的开发相关的拓展。
2.快捷键在IDE中有着不可动摇的重要地位，熟悉快捷键能够提升你的代码编写速度，就像设计师如果熟练掌握快捷键就能熟练地P图一样，请尝试熟记VSCode的快捷键。
3.漂亮的开发环境总是能令我们身心愉悦，请尝试修改VSCode的配色和文件图标。
4.除了TypeScript，现在知名的静态类型检测器还有Flow。尝试了解Flow的产生和发展，以及与TypeScript的不同之处。这会是一件非常有趣的事，在了解完之后你会惊讶地发现，TypeScript的社区生态比Flow的更壮大，这算是微软与Facebook比拼的一次大胜利吧。