本文为系列文章《TypeScript 简明教程》中的一篇。

认识 TypeScript

安装 TypeScript

前言

通过前一篇文章，相信大家对 TypeScript 有了基本的了解，对 TypeScript 的价值也有了一定的认识。不过，光说不练假把式，本节我们学习如何搭建 TypeScript 的开发环境。

TypeScript 官方提供了一个 Playground。你可以在左侧输入 TypeScript 代码，右侧会自动显示出编译后的 JavaScript 代码，十分方便。

事实上，你完全可以跳过下面内容，直接在 Playground 中书写后面教程中的 TypeScript 代码，待到大概熟悉 TypeScript 的语法后，再回头看本节内容。

全局安装 TypeScript

使用如下命令安装 TypeScript 命令行工具：

npm install -g typescript

从安装结果我们可以看出，以上命令在全局环境下安装了两条命令：tsc 和 tsserver。其中，tsserver 主要用于为编辑器和 IDE 等提供语义支持，一般来说不常用到。

常用的是 tsc 命令。tsc 为 typescript compiler 的缩写，即 TypeScript 编译器，用于将 TS 代码编译为 JS 代码。使用方法很简单：

tsc index.ts

作为约定，使用 TypeScript 编写的文件应以 .ts 为后缀。用 TypeScript 编写 React 时，应使用 .tsx 后缀，而不是 .jsx。

Example

首先，我们新建一个 TS 文件 main.ts。输入以下代码：

// 创建一个 sayHi 函数，具有一个参数 person
// person 必须为字符串
function sayHi(person: string) {
    return `Hi, ${ person  }`
}

sayHi('Hopsken')

使用 tsc 命令编译，它会在当前目录下生成编译好的 JS 文件。

tsc main.ts

编译后的 JS 代码：

function sayHi(person) {
    return "Hi, " + person;
}
sayHi("Hopsken");

可以看到，原先 TypeScript 中的类型注解已经被移除，生成的文件中不包含任何类型判断的代码。

此外，细心的同学可能已经注意到了，原先的 TS 代码中我们使用 ES6 的模板字符串语法，但在生成的 JS 中，编译器自动将其转换成了 ES5 的语法。这就是 TypeScript 为我们带来的另一个好处，有了它，我们就可以放心的使用 JavaScript 新特性了。

那么，如果 TS 源码中存在错误呢？比如说，在本该传入 string 的地方传入了 number。我们在上述程序中做出如下修改：

sayHi(42)

再次编译，

可以看到，编译器会自动报出相关错误，并给出相关提示。

注意，尽管编译器会报出错误，但其仍然会生成『有问题』的 JS 文件！

tsconfig.json

一般来说，每个 TypeScript 都应该有一个 tsconfig.json 文件，表明这是一个 TypeScript 项目。通过 tsconfig.json 文件，我们可以配置 TypeScript 编译时所使用的参数。

如果没有指定输入文件，直接调用 tsc 命令的话，编译器会从当前目录开始，逐级向上寻找 tsconfig.json 文件。

通过 --project(-p) 参数，可以要求编译器使用指定目录（或文件路径）下的 tsconfig.json 文件。

使用以下命令初始化一个 tsconfig.json 文件。

tsc --init

下面介绍几个常用的配置项，完整列表请参考这里。

{
  "compilerOptions": {
    // 指定输出的 JS 代码所使用的 ECMAScript 版本，可选值为：ES3、ES5、ES2015、ES2016、ES2017、ES2018 和 ESNEXT。请根据具体的兼容性要求选择。
    "target": "es5",
    // 指定输出的 JS 代码所使用的模块化方案，可选值为：none、commonjs、amd、system、umd、es2015 或 ESNext。
    "module": "commonjs",
    // 指定编译过程中要使用的库，视具体情况而定。
    "lib": [],
    // 是否编译 JS 文件。
    "allowJs": true,
    // 是否报告 JS 源码中的错误。
    "checkJs": true,
    // 启用 JSX 语法，可选值为 perserve、react-native、react。
    "jsx": "preserve",
    // 是否生成相关的 '.d.ts' 声明文件。
    "declaration": true,
    // 是否生成 sourceMap 文件
    "sourceMap": true,
    // 将输出的 JS 代码整合为单个文件
    // "outFile": "./",
    // 指定输出目录
    "outDir": "./",
    // 指定源码根目录
    "rootDir": "./",
    // 是否引入 tslib
    "importHelpers": true,
    // 当目标版本为 'ES5' 或 'ES3'，用以提供完整的解构、'for-of iterable' 支持
    "downlevelIteration": true,

    // 启用所有严格类型检查，区别于 JS 的 strict mode。
    "strict": true,
    // 使用 any 类型时必须明确声明
    // "noImplicitAny": true,
    // 严格检查 null 类型
    // "strictNullChecks": true,
    // 严格检查函数类型
    // "strictFunctionTypes": true,
    // 严格检查 bind、call、apply 类型
    // "strictBindCallApply": true,
    // 严格检查类属性初始化
    // "strictPropertyInitialization": true,
    // 当 this 具有隐含 any 类型时报错
    // "noImplicitThis": true,
    // 始终使用严格模式（指 JS 中的严格模式）
    // "alwaysStrict": true,

    /* 实验性选项 */
    // 对 ES7 中的修饰器 decorator 提供实验性支持
    "experimentalDecorators": true,
  }
}

下期预告

从下一期开始，我们将正式介绍 TypeScript 的基本语法。下一节，我们将学习 TypeScript 中的基本类型和类型推论。

附：关于编辑器

目前，主流的编辑器都支持 TypeScript。不过，这里还是要着重推荐一下 Visual Studio Code。

它是一款免费、开源、跨终端的编辑器。由 MicroSoft 开发，与臃肿的 Visual Studio 系列 IDE 不同，这是一款现代化、轻量级的编辑器。

最重要的是，VSCode 本身就是用 TypeScript 编写的，自身内置了 TypeScript 支持。不管是代码补全、接口提示，还是定义跳转、代码重构等等，都可以轻松应对。

获取其他编辑器或 IDE 对 TypeScript 的支持：