tsconfig.json入門指南

前言

以前開發都是在用腳手架,幾乎0配置,只須要會ts的語法就徹底能夠開發ts項目了，此次本身從零折騰了一個ts項目，發現配置方面仍是有挺多坑的，因此不如從頭看一下具體的方法和文檔，因而總結出了這篇文章。相信我，本身系統的瞭解一遍和使用腳手架直接配置相比，理解上確定會有不同的認知。
本文主要從簡單的方式瞭解tsconfig.json是幹什麼的、怎麼用、和webpack結合起來會有一些常見的坑以及一些經常使用的配置，結合文檔來看效果更佳 www.typescriptlang.org/v2/en/tscon…
因爲第一次寫文章，確定會有些不嚴謹或者很差的地方，請你們多多指出建議，謝謝~

what

用於編譯時遵循的規則表

why

在沒有tsconfig的狀況下，咱們能夠用命令行的方式去執行

tsc --outFile file.js --target es3 --module commonjs index.ts

解釋上半句：將index.ts用es3的代碼和commonjs的形式，編譯爲file.js在根目錄下

1. 須要編譯的調調框框不少的情形下(後面將要寫一坨)
2. 團隊協做的情形下(你們須要有統一的規範)

how

純手工命令式

上文有闡述，得本身打一坨

配置文件命令式

• 不顯式指定 tsconfig.json ，此時，編譯器會從當前路徑開始尋，直到找到tsconfig.json文件爲止和require,import不寫具體路徑的查找規則差很少
• 經過 --project （或縮寫 -p ）指定一個包含 tsconfig.json 的路徑，和import,require寫個相對路徑差很少

配置文件裏的具體參數

配置文件裏有不少參數，具體場景有的確實還比較抽象，這裏統一舉例說明

這個tsconfig.json大致能夠分爲兩個部分描述，第一部分是編譯的規則配置(compilerOptions)，第二個部分是對哪些文件進行編譯(files,include,exclude)

最經常使用的結構代碼舉例以下:

{
    "compilerOptions": {},
    "files": [], 
    "include": [],
    "exclude": [] 
}
複製代碼

compilerOptions

顧名思義就是編譯規則,下面會具體說一些經常使用的詳細配置

files

用法很簡單，就是個數組，裏面的元素爲待編譯的ts文件，以下圖。

files就是根據上面編譯規則須要將哪些文件編譯,舉個例子

上面的配置文件的規則就是將compilerOption的編譯規則應用於index.ts下，那若是我下面這樣寫就確定會報錯了

因此得出結論：file適用於比較小型的項目，規定幾個特定的文件。

最後一個小細節，file裏面只是入口文件，好比test裏面依賴一個rely.ts那麼在files中不寫rely.ts也不會報錯。在當前目錄下運行一下tsc作比較就知道了~

那文件不少的項目怎麼辦，下面的include和exclude就派上用場了

include && exclude

當文件有不少的時候，就能夠用include和exclude(固然也能夠不用)結合使用，好比如今只想讓src下的除了帶except文件編譯，如圖所示：

在該項目根目錄輸入tsc會發生什麼呢？

會發現並無編譯except.ts的文件

注意

當用webpack進行打包並暴露出bundle文件的時候會和tsconfig產生衝突，由於他倆都是編譯/打包出來的文件，所以要在tsconfig.json中添加exclude到webpack打包出的指定路徑，理解如圖：

把註釋中的引開就解決這個問題了~

PS

• include能夠和file聯用
• exclude只對include有效，對files無效
• 若是 files 和 include 都未設置，那麼除了 exclude 排除的文件，編譯器會默認包含路徑下的全部 TS 文件

幾個經常使用的編譯配置

allowJs

容許編譯js文件

sourceMap

生成一個.map.js的文件，用於其餘工具來debugg，相似於webpack的sourceMap

noImplicitAny

不容許用any，若是初學ts，建議項目部太複雜的狀況下，能夠藉此來進行限制，前置本身培養對ts的理解

module && target

這兩個有必定的關聯關係

target是編譯成哪一個版本的js(es3,es5,es6...)

module模板生成的形式，默認狀況下，當target是es3的時候，那module默認爲commonjs形式，不然爲es6形式。

注意(和outFile搭配使用)：生成的模塊形式：none、commonjs、amd、system、umd、es六、es2015 或 esnext 只有 amd 和 system 能和 outFile 一塊兒使用 target 爲 es5 或更低時可用 es6 和 es2015

lib

引入ES的功能庫，好比想在項目中用js中Set，Map等新的數據結構，或promise等，那要在lib中引入es2015

removeComments

編譯出的文件是否帶註釋，當爲false的時候能夠減小編譯出文件的體積

allowSyntheticDefaultImports

這個配置挺重要的，若是不知道會很納悶，很差排查爲啥會報錯

當它爲false的時候,引入模塊的時候必須以*as的形式，例如引入react

import * as React from 'react'

當爲true的時候

import React from 'react' 但要注意，他要配合module是esModule的格式或者--esModuleInterop爲true的時候，由於react是commonjs寫的，並無default,因此import React from 這種default引入是不對的，具體能夠看下這篇文章 blog.leodots.me/post/40-thi…

jsx

若是用tsx文件(React-ts)那麼該項要配置成 jsx:"react"

baseUrl

舉個例子:

在根目錄的src目錄有個hello文件夾，其中hello裏包含world.ts

在根目錄的app.ts下

import { example } from "./src/hello/world"

當baseUrl: './src'

則上面的目錄能夠簡寫成import { example } from "hello/world"

paths

paths必須和上面的baseUrl聯用，舉個例子：

那麼將能夠這樣引入：

可是有一點必需要特別注意：

若是用了webpack使用了alias,那麼致使baseUrl不會生效，從而paths也不會生效，因此paths豈不是沒用了嗎？其實從實際做用來講確實是沒用了，不過能夠將paths的配置和alias配置成同樣的，在vscode中會有路徑的自動提示，也是很方便很爽的