重新认识TypeScript

安装

根据文档, 建议使用全局安装或使用与TypeScript兼容的编译器.

$ yarn global add typescript
yarn global v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "typescript@4.0.5" with binaries:
      - tsc
      - tsserver
Done in 5.54s.

安装了tsc和tsserver两个命令, tsc我等皆知, 但tsserver是何物?

TypeScript独立服务器（aka tsserver）是一个Node.js可执行文件，封装了TypeScript编译器和语言服务，并通过JSON协议公开它们。tsserver非常适合编辑器和IDE支持。

编译

tsc

使用tsc --locale zh-CN --help或者tsc --locale zh-CN --all查看中文帮助文档:

-w, --watch                     监视输入文件。
--pretty                        使用颜色和上下文风格化错误和消息(实验)。
--all                           显示所有编译器选项。
-v, --version                   打印编译器的版本。
--init                          初始化 TypeScript 项目并创建 tsconfig.json 文件。
-p, --project 文件或目录         编译给定了其配置文件路径或带 "tsconfig.json" 的文件夹路径的项目。
-b, --build                     生成一个或多个项目及其依赖项。
-t, --target 版本                指定 ECMAScript 目标版本: "ES3" (默认)、"ES5"、"ES2015"、"ES2016"、"ES2017"、"ES2018"、"ES2019"、"ES202" 或 "ESNEXT"
-m, --module 种类                指定模块代码生成: "none"、"commonjs"、"amd"、"system"、"umd"、"es2015"、"es2020" 或 "ESNext"。
--lib                           指定要在编译中包括的库文件。'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker'
--allowJs                       允许编译 JavaScript 文件。
--jsx 种类                       指定 JSX 代码生成: "preserve"、"react-native" 或 "react"。
-d, --declaration               生成相应的 ".d.ts" 文件。
--declarationMap                为每个相应的 ".d.ts" 文件生成源映射。
--sourceMap                     生成相应的 ".map" 文件。
--outFile 文件                   连接输出并将其发出到单个文件。
--outDir 目录                    将输出结构重定向到目录。
--removeComments                请勿将注释发出到输出。
--noEmit                        请勿发出输出。
--strict                        启用所有严格类型检查选项。
--types                         要包含在编译中类型声明文件。

通常配合tsconfig.json配置文件使用tsc命令:

tsc
tsc -b ./tsconfig.build.json

Webpack + ts-loader

ts-loader也可以读取tsconfig.json文件, 不过它调用了包typescript, 每个项目都安装一遍typescript是真的麻烦.
生成.d.ts文件, 但是js文件被webpack打包, 一个入口对应一个输出.

比起ts-loader, 我觉得babel更好一些.

Babel

Babel是一个非常流行的JavaScript转译器，它通过插件@babel/plugin-transform-typescript支持TypeScript文件。
不读取tsconfig.json文件, 不会生成.d.ts文件.

tsconfig.json

有意思的是, 该文件没有严格的json格式限制, 可以使用注释, 甚至可以全部加逗号.

继承一个配置文件:

{
    "extends": "./tsconfig.json",
}

END