Typescript (tsconfig.json)

本系列文章经过重新编排和扩充，已出书为ECMAScript关键30天。原始文章因当时准备时程紧迫，多少有些许错误。为了避免造成读者的困扰，以及配合书籍的内容规划，将会陆续更新本系列文章。
本篇文章在 2021/11/8 已更新。

在写 Typescript 时，最重要的就是 tsconfig.json。因为 ts 或 tsx 档并不能直接在环境执行，所以需要有一份设定档告诉 compiler 要如何转出可执行的 js 档。另外开发时也会因设定的不同，会使用不同方式的型别检查。

新增的方式有两种。一是直接在根目录下新增 tsconfig.json，档案内容如果是空物件{}，表示使用预设设定。

另一种方式是打开 cmd，输入tsc --init(须先安装 Typescript)就会产生 tsconfig.json。

如果有看过有关 tsconfig.json 的官方文件，就知道选项其实还不少。其中有些设定也不是很好理解。

所以今天就挑几个跟这系列比较相关的部分整理一下说明，让同为 Typescript 的开发者，在设定 tsconfig.json 时可以更得心应手。

compilerOptions

主要集中设定编译时的选项。

target

设定编译的 js 档，以特定的 ECMAScript 版本为标准输出。预设值为ES3。其他可设定的版本有 -

• ES5
• ES6/ES2015 (选择其中一种写法)
• ES7/ES2016 (选择其中一种写法)
• ES2017
• ES2018
• ES2019
• ES2020
• ES2021
• ESNext

lib

在 TypeScript 中，针对基本常用的 JS API(像是String)和浏览器环境（像是document）已经有内建的定义档。不过根据这几天的介绍，Javascript 和浏览器，每年都推陈出新，释出新特性。

加上近几年来 NodeJS 的发展，在程序编译输出的部分，我们会希望能有对应的定义档，并且可以适当调整，移除不用的定义档。

在lib中，可以以列表的方式选择性加入 -

• ES5
• ES6/ES2015 (选择其中一种写法)
• ES7/ES2016 (选择其中一种写法)
• ES2017
• ES2018
• ES2019
• ES2020
• ES2021
• ESNext
• DOM
• WebWorker
• ScriptHost

如果没有特别设定lib，则预设内容会根据target的不同而有调整 -

• target为ES5: [DOM,ES5,ScriptHost]
• target为ES6: [DOM,ES6,DOM.Iterable,ScriptHost]

Module

设定以哪种模组系统作爲编译输出。选项有 - None, CommonJS, AMD, System, UMD, ES6/ES2015或ESNext。

如果没有特别设定lib，则预设内容会根据target的不同而有调整 -

• target为ES5或ES3: commonjs
• target为ES6以上: ES6/ES2015

esModuleInterop

预设为false。

allowSyntheticDefaultImports

开发时的型别检查使用，当 module === "system" 或 esModuleInterop === true时使用。

experimentalDecorators

允许使用目前在 stage-2 的 Decorator 语法。预设为false。

emitDecoratorMetadata

允许使用Metadata Reflection API。预设为false。

参考资源

• What TypeScript configuration produces output closest to Node.js 14 capabilities?
• 【Day 03】 TypeScript 编译设定 - tsconfig.json
• Intro to the TSConfig Reference