【2】TypeScript入门——搭建 TypeScript 学习开发环境

二、搭建 TypeScript 学习开发环境

1. 编译器

● VS Code 让我们获得一种较为理想的开发体验，不必等到转译阶段，在编码时就能快速检测、抛出类型错误，极大地提升了 TypeScript 开发体验和效率
● VSCode优点
a. 在传统语法高亮、自动补全功能的基础上拓展了基于变量类型、函数定义，以及引入模块的智能补全；
b. 支持在编辑器上直接运行和调试应用；
c. 内置了 Git Comands，能大幅提升使用 Git 及其他 SCM 管理工具的协同开发效率；
d. 基于 Electron 开发，具备超强的扩展性和定制性。

2. 注意

VS Code 中内置了特定版本的 TypeScript 语言服务，所以它天然支持 TypeScript 语法解析和类型检测，且这个内置的服务与手动安装的 TypeScript 完全隔离。
因此，VS Code 支持在内置和手动安装版本之间动态切换语言服务，从而实现对不同版本的 TypeScript 的支持。
VS Code 默认使用自身内置的 TypeScript 语言服务版本，而在应用构建过程中，构建工具使用的却是应用路径下 node_modules/typescript 里的 TypeScript 版本。如果两个版本之间存在不兼容的特性，就会造成开发阶段和构建阶段静态类型检测结论不一致的情况，因此，我们务必将 VS Code 语言服务配置成使用当前工作区的 TypeScript 版本。

3. 安装TypeScript

方法一：npm全局安装typescript

接下来，继续了解如何基于 VS Code 完善 TypeScript 开发、转译环境。因为 VS Code 只集成了 TypeScript 语言服务，不包含转译器，所以我们还需要单独安装 TypeScript。推荐通过命令行工具使用 npm 全局安装 TypeScript。

1. 打开 VS Code 内置命令行工具，然后输入
npm i -g typescript
2. 安装完后查看typescript版本
tsc -v
3. 在练习目录下输入“tsc --init”命令快速创建一个 tsconfig.json 文件，或者在 VS Code 应用窗口新建一个空的 tsconfg.json配置 TypeScript 的行为
tsc --init

方法二： npm 全局安装 ts-node

我们也可以通过安装在 Terminal 命令行中直接支持运行 TypeScript 代码（Node.js 侧代码）的 ts-node 来获得较好的开发体验。
通过 npm 全局安装 ts-node 的操作如下代码所示：

npm i -g ts-node

4. 配置 tsconfig.json

为了让 TypeScript 的行为更加严格、简单易懂，降低学习的心理负担，这就要求我们在 tsconfig.json 中开启如下所示设置，该设置将决定了 VS Code 语言服务如何对当前应用下的 TypeScript 代码进行类型检测：

{
  "compilerOptions": {
    /* Strict Type-Checking Options */
    "strict": true,                        /* Enable all strict type-checking options. */
    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true,              /* Enable strict null checks. */
    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    "alwaysStrict": false,                 /* Parse in strict mode and emit "use strict" for each source file. */
  }
}

5. 创建第一个ts文件

function say(word: string) {
  console.log(word);
}
say('Hello, World');

• word 函数参数后边多出来的 “: string” 注解直观地告诉我们，这个变量的类型就是 string
• 对比js语法，会发现typeScript 代码和我们熟悉的 JavaScript 相比，并没有明显的差异。

6. 转译成js文件

方法一：tsc命令

注意：指定转译的目标文件后，tsc 将忽略当前应用路径下的 tsconfig.json 配置，因此我们需要通过显式设定如下所示的参数，让 tsc 以严格模式检测并转译 TypeScript 代码。其中给–watch是 tsc 设定一个 watch 参数监听文件内容变更，实时进行类型检测和代码转译，如下代码所示：

tsc HelloWorld.ts --strict --alwaysStrict false --watch

方法二：直接使用 ts-node 运行 HelloWorld.ts

ts-node HelloWorld.ts 

运行成功后，ts-node 就会输出如下所示内容：Hello, World
当然，我们也可以唤起“直接运行”（本质上是先自动进行转译，再运行）TypeScript 的 ts-node 命令行来编写代码，这就跟我们在 Node.js 命令行或者浏览器中调试工具一样。