iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Modern Web

從ES到ESNext - 30天輕鬆掌握ECMAScript系列 第 28

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的不同而有調整 -

  • targetES5: [DOM,ES5,ScriptHost]
  • targetES6: [DOM,ES6,DOM.Iterable,ScriptHost]

Module

設定以哪種模組系統作爲編譯輸出。選項有 - None, CommonJS, AMD, System, UMD, ES6/ES2015ESNext

如果沒有特別設定lib,則預設內容會根據target的不同而有調整 -

  • targetES5ES3: commonjs
  • targetES6以上: ES6/ES2015

esModuleInterop

預設為false

allowSyntheticDefaultImports

開發時的型別檢查使用,當 module === "system"esModuleInterop === true時使用。

experimentalDecorators

允許使用目前在 stage-2 的 Decorator 語法。預設為false

emitDecoratorMetadata

允許使用Metadata Reflection API。預設為false

參考資源


上一篇
ES2021(ES12) - Intl、WeakRef
下一篇
Are You Ready? ES2022!
系列文
從ES到ESNext - 30天輕鬆掌握ECMAScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言