Playground

学习之初，折腾各种环境配置太过费神，最好的方式就是直接使用官方为我们提供的 TypeScript: 演练场

官方Playground的能力基本足够覆盖初学者的学习需求，同时也具备一些配置、插件和分享的支持。

学习/开发环境 - 图1

直接在代码编辑器内输入 ts 代码并点击运行（Ctrl + Enter）即可直接运行。版本也可以直接切换，tsconfig也直接已可视化的形式来操作。

本地运行

前面也已经提到了，浏览器和 Node.js 是不认识 TypeScript 的 .ts 文件的，我们需要在运行前将其编译为 .js 文件。

官方提供的编译器是 tsc ，即 typescript compiler

安装 tsc

使用 npm 即可安装

  1. npm install -g typescript

安装完成后将可以使用 tsc 命令：

  1. # 查看当前 typescript 版本
  2. tsc -v
  4. # 将 ts 文件编译为同名 js 文件 并使用 node 运行
  5. tsc index.ts && node index.js
  7. # 可将当前目录下所有 ts 文件编译为 js 文件
  8. tsc *

TS 文件的快速执行：ts-node 与 ts-node-dev

以上连两个工具都可以快速来运行.ts 文件，就像 node index.js 一样方便。 其中后者还支持直接监听文件并重新执行。 注意这两者都依赖 上面提到的 tsc。

  1. # 安装 ts-node
  2. npm i ts-node typescript -g
  4. # 运行 ts 文件
  5. ts-node index.ts

配置文件 tsconfig.json

前文已经描述了，ts 是需要先编译成 js 才能在浏览器和 node 中去运行的，涉及编译就少不了配置，这个配置就是 tsconfig.json

官方的配置文件说明可参考 https://www.typescriptlang.org/zh/docs/handbook/tsconfig-json.html

学习之初，我们可以不用深入了解这个配置。使用 tsc --init 命令即可快速在当前项目目录下创建好一个 tsconfig.json 或直接使用 recommended 配置。

使用说明

tsconfig.json 是放在项目根目录，用来配置一些编译选项等。

当我们使用 tsc 命令编译项目，且没有指定输入文件时，编译器就会去查找 tsconfig.json 文件。

如果在当前目录没找到，就会逐级向父文件夹查找。我们也可以通过在 tsc 命令中加上--project 参数，来指定一个包含 tsconfig.json 文件的目录。

如果命令行上指定了输入文件时，根目录中 tsconfig.json 的配置会被忽略。

常见配置项

接下来我们看一下 tsconfig.json 里都有哪些可配置项。tsconfig.json 文件里有几个主要的配置项：

  1. {
  2.   "files": [],
  3.   "include": [],
  4.   "exclude": [],
  5.   "extends": "",
  6.   "compilerOptions": {}
  7. }

完整参考 https://www.typescriptlang.org/tsconfig

files

files 可以配置一个数组列表，里面包含指定文件的相对或绝对路径。编译器在编译的时候只会编译包含在 files 中列出的文件。如果不指定，则取决于有没有设置 include 选项；如果没有 include 选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用*、?、**/等通配符。

include

include 也可以指定要编译的路径列表，但和 files 的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符。比如"./src"即表示要编译 src 文件夹下的所有文件以及子文件夹的文件。

exclude

exclude 表示要排除的、不编译的文件，它也可以指定一个列表，规则和 include 一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符。

extends

extends 可以通过指定一个其它的 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承来的文件配置会覆盖当前文件定义的配置。TS 在 3.2 版本开始，支持继承一个来自 Node.js 包的 tsconfig.json 配置文件。

compilerOptions

编译选项，主要用来控制语言如何工作（编辑代码时体现）和 控制编译结果（编译产出）

以下简要介绍几个常用的，完整参考 https://www.typescriptlang.org/tsconfig#compiler-options

  • strictNullChecks
    值为 true 或 false，当设为 true 时，null 和 undefined 值不能赋值给非这两种类型的值，设为 false 的情况下 null 和 undefined 是很多类型的子类型。通常不建议关闭。
  • target：
    用于指定编译之后的版本目标，可选值有：ES3(默认值)、ES5、ES2015、ES2016、ES2017、ESNEXT。如果不配置 target 项，默认是转译为 ES3 的版本，通常会视项目浏览器需求修改这个配置。 此配置会影响可用的语言特性。
  • module：
    用来指定要使用的模块标准，可选值有commonjs、amd、system、umd、es2015(或写 es6)。如果不设置 module 选项，则如果 target 设为 ES6，那么 module 默认值为 ES6，否则是 commonjs。
  • lib：
    用于指定要包含在编译中的库文件。
    如果你要使用一些 ES6 的新语法，你需要引入 ES6 这个库，或者也可以写 ES2015。
    如果没有指定 lib 配置，默认会加载一些库，而加载什么库是受 target 影响的。
    如果 target 为 ES5，默认包含的库有DOM、ES5和ScriptHost；如果 target 是 ES6，默认引入的库有DOM、ES6、DOM.Iterable和ScriptHost。
  • declaration：
    值为 true 或 false，用来指定是否在编译的时候生成响应的”.d.ts”声明文件。
    如果设为 true，编译每个 ts 文件之后会生成一个 js 文件和一个声明文件。
    但是 declaration 和 allowJs 不能同时设为 true。
  • sourceMap：
    值为 true 或 false，用来指定编译时是否生成.map 文件。
  • outFile：
    用于指定将输出文件合并为一个文件，它的值为一个文件路径名，比如设置为"./dist/main.js"，则输出的文件为一个 main.js 文件。
    但是要注意，只有设置 module 的值为 amd 和 system 模块时才支持这个配置。
  • outDir：
    用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹。
  • rootDir：
    用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现 1 以 rootDir 的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译。
  • removeComments：
    值为 true 或 false，用于指定是否将编译后的文件中的注释删掉，设为 true 的话即删掉注释，默认为 false。