TypeScript 简明教程：安装 TypeScript

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

1. 认识 TypeScript
2. 安装 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 版本，可选值为：ES三、ES五、ES201五、ES201六、ES201七、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 的支持：

• Atom
• Sublime Text
• WebStorm
• Vim
• Emacs
• Eclipse
• Visual Studio 2015
• Visual Studio 2013