02.Typescript 开发环境与编译过程

Typescript的安装

我们需要 npm/cnpm/yarn 等工具之一来安装 Typescript，如果你还不了解这些工具，请参考npm的使用介绍。

请在任意目录下以管理员权限打开命令行工具，运行以下指令：

npm install -g typescript

上面的指令将会全局安装 Typescript，你可以在任何目录下使用 tsc 指令来执行 TypeScript 的相关代码。
检测是否安装成功，可以使用下面的代码：

tsc -v

此命令将会返回版本号 Version 3.8.3，如果没有正常显示，说明安装失败，请尝试重新以管理员权限运行安装指令。

Visual Studio Code

工欲善其事，必先利其器。目前最流行的 IDE 编辑器当属 VS Code,它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。推荐大家下载安装 VS Code 进行下面的操作。

在磁盘中依次创建文件夹Typescript > lesson-1，在 lesson-1文件夹中创建文件 index.ts,并输入以下代码：

let hello :string = "Hello World!";
console.log(hello)

代码中 :string 即是类型注解，表示我们希望 hello变量是 string 类型。TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。

在lesson-1文件夹右键选择在终端中打开:

打开终端，输入指令：

tsc index.ts

运行之后，在本文件夹下，自动生成同名文件 index.js，打开文件你将看到变异之后的代码：

var hello = "Hello World!";
console.log(hello);

powershell在win10中的报错：

由于win10系统的安全策略问题，可能有部分PC无法运行上面的编译指令，并且报错如下：

tsc : 无法加载文件 C:\Users\administrator\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135 
170 中的 about_Execution_Policies。
+ tsc --init
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

错误原因：PowerShell的设置问题，脚本的默认执行策略 Restricted，禁止运行任何脚本和配置文件。

解决方案：更改其执行策略，以管理员身份重新打开一个powershell窗口，在窗口中输入指令：

set-ExecutionPolicy RemoteSigned

运行完出现：在尾部输入Y，运行即可。

执行策略更改  
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170  
中的 about\_Execution\_Policies 帮助主题所述。是否要更改执行策略?  
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为"N"): Y

编译过程

TypeScript 转换为 JavaScript 过程如下图：

作为初学者，我们仅仅需要了解上面简化的过程即可，至于编译器的底层原理，那就是另外一个故事了，有兴趣的同学请参阅深入理解Typescript--编译原理

类型检测系统

现在我们测试一下 Typescript 的类型检测系统，还是在 index.ts 文件中，修改 Hello World 为数字 365，此时 VS Code 瞬间检测到错误，出现红色波浪线，如图：

这就是 VS Code 的强大之处，自带 Typescript 的错误提示，事实上，VS Code自身也是由 Typescript 编写构建的。

此时，我们再次输入编译指令：

tsc index.ts

你将看到编译错误：

值得注意的是，尽管有编译错误，index.js 文件还是被编译出来了，代码如下：

var hello = 365;
console.log(hello);

这个时候，作为程序员你应该检查错误，不可对报错视而不见。