最近遇到了挺多涉及到前端“編譯”方面的工作,其中關于 TypeScript 的編譯會涉及到關于 tsconfig.json 文件的配置,由于配置項繁雜,遂逐一解析并驗證,減少大家的一些疑惑,并提升工作效率!
隨著 TypeScript 的流行,越來越多的項目通過使用 TypeScript 來實現編寫代碼時候的類型提示和約束,從開發過程中減少 BUG 出現的概率,以此提升程序的健壯性和團隊的研發效率。
為什么會單獨寫一篇文章來講述 tsconfig.json 文件的配置吶?原因是筆者在做 TS 項目的時候,由于對其中的配置項不熟悉,搞來搞去,搞好久,煩死了!所以決定好好梳理下。
越來越多的項目用上了 TypeScript,因此如何按需配置 tsconfig 也應該是前端工程師需要掌握的技能之一。
本文內容結構如下,朋友們按需食用:
一、前置知識
在熟悉掌握 tsconfig.json 文件配置前,先給首次接觸 TS 的同學預備一下“前置知識”。
1.1 TypeScript 是什么?
TypeScript 官網:https://www.typescriptlang.org
TypeScript 是一種基于 JavaScript 的強類型編程語言,它使得在前端項目開發過程中更加嚴謹且流暢,一定程度上保證了大型前端項目程序的健壯性。
- TypeScript 是由微軟開發的一款開源的編程語言;
- TypeScript 是 JavaScript 的超集,遵循最新的 ESM 規范,TypeScript 擴展了 JavaScript 的語法;
- TypeScript 更像后端 JAVA、C# 這樣的面向對象語言,可以讓 JS 開發大型企業級項目。
但是 TypeScript 并不可以直接運行,而是需要轉換成 JavaScript 代碼才可以在 Node.js 或瀏覽器環境下執行,因此我們需要通過“編譯器”將 TS 代碼轉換為 JS 代碼。
1.2 什么是 tsc ?
tsc 的全稱是 TypeScript Compiler,也就是將 TypeScript 轉碼為 JavaScript 代碼的編譯器。
tsc 的全局安裝方式:
- npm install typescript -g
當我們編譯一份 index.ts 文件時,會使用下面的命令:
- tsc ./index.ts
這樣就可以得到一份編譯成為 JavaScript 代碼的 ./index.js 文件。
tsc 實際就是將 TS 轉為 JS 的編譯(器)腳手架工具,如果是一個 TS 的前端工程項目,那么就可以通過項目中的 tsconfig.json 文件來自定義配置 TS 編譯相關規則。
項目中的 tsconfig.json 文件,我們一般會通過如下快捷命令生成:
- tsc --init
執行完后,會在項目根目錄生成一個簡單的初始化 tsconfig.json 配置描述文件,如果沒有特別的要求,該初始化配置就足以支持你愉快地使用 TS 開發啦!
更多相關 TS 編譯配置和使用說明可以通過 tsc -h 查看。
1.3 tsconfig.json 文件
tsconfig.json[1] 文件是用于描述將 TypeScript 轉為 JavaScript 代碼的配置文件。
IDE(代碼編輯器)將會根據 tsconfig.json 文件來對當前項目中支持不同程度的類型約束,同時也是對 TSC 編譯 TypeScript 代碼過程做一些預定義、約束入口和編譯輸出目錄等配置。
因此對于一個支持 TypeScript 編程語言的工程來說,tsconfig.json 文件就是編碼的基礎。
二、tsconfig.json 配置詳解
有了上面的前置知識作為基石,相信大家會對 tsconfig.json 文件的配置項也會更加容易理解。
- tsconfig 的詳細配置:https://www.typescriptlang.org/tsconfig
- tsconfig 的協議描述網址:http://json.schemastore.org/tsconfig
tsconfig 協議
筆者將從常見的配置項單獨解釋,然后在最后會將一些不常用的配置統一解釋,朋友們可以將這篇文章收藏一下,可當作一份 tsconfig 配置的中文查詢對照表