參考
了不起的 tsconfig.json 指南
tsconfig.json文件各字段吐血整理

一、簡(jiǎn)介

1. 什么是 tsconfig.json

TypeScript 使用 tsconfig.json 文件作為其配置文件，當(dāng)一個(gè)目錄中存在 tsconfig.json 文件，則認(rèn)為該目錄為 TypeScript 項(xiàng)目的根目錄。

2. 為什么使用 tsconfig.json

通常我們可以使用 tsc 命令來(lái)編譯少量 TypeScript 文件：

/*
  參數(shù)介紹：
  --outFile // 編譯后生成的文件名稱
  --target  // 指定ECMAScript目標(biāo)版本
  --module  // 指定生成哪個(gè)模塊系統(tǒng)代碼
  index.ts  // 源文件
*/
$ tsc --outFile leo.js --target es3 --module amd index.ts

但如果實(shí)際開(kāi)發(fā)的項(xiàng)目，很少是只有單個(gè)文件，當(dāng)我們需要編譯整個(gè)項(xiàng)目時(shí)，就可以使用 tsconfig.json 文件，將需要使用到的配置都寫(xiě)進(jìn) tsconfig.json 文件，這樣就不用每次編譯都手動(dòng)輸入配置，另外也方便團(tuán)隊(duì)協(xié)作開(kāi)發(fā)。

3.初始化 tsconfig.json

在初始化操作，也有 2 種方式：

• 手動(dòng)在項(xiàng)目根目錄（或其他）創(chuàng)建 tsconfig.json 文件并填寫(xiě)配置；
• 通過(guò) tsc --init 初始化 tsconfig.json 文件。

二、實(shí)例

1.learnTsconfig/src/index.ts

// 返回當(dāng)前版本號(hào)
function getVersion(version:string = "1.0.0"): string{
    return version;
}

console.log(getVersion("1.0.1"))

2.初始化 tsconfig.json 文件

在 learnTsconfig 根目錄執(zhí)行：

E:\ts\learnTsconfig>tsc --init

Created a new tsconfig.json with:

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

3.常用配置

{
  "compilerOptions": {
    "target": "ES5",             // 目標(biāo)語(yǔ)言的版本
    "module": "commonjs",        // 指定生成代碼的模板標(biāo)準(zhǔn)
    "noImplicitAny": true,       // 不允許隱式的 any 類型
    "removeComments": true,      // 刪除注釋 
    "preserveConstEnums": true,  // 保留 const 和 enum 聲明
    "sourceMap": true            // 生成目標(biāo)文件的sourceMap文件
  },
  "files": [   // 指定待編譯文件
    "./src/index.ts"  
  ]
}

files 配置項(xiàng)值是一個(gè)數(shù)組，用來(lái)指定了待編譯文件，即入口文件。當(dāng)入口文件依賴其他文件時(shí)，不需要將被依賴文件也指定到 files 中，因?yàn)榫幾g器會(huì)自動(dòng)將所有的依賴文件歸納為編譯對(duì)象，即 index.ts 依賴 user.ts 時(shí)，不需要在 files 中指定 user.ts ， user.ts 會(huì)自動(dòng)納入待編譯文件。

執(zhí)行tsc命令，可以看到src文件下生成的js文件，可以使用node src/index.js命令執(zhí)行。

三、compilerOptions 配置編譯選項(xiàng)

• "incremental": true, // TS編譯器在第一次編譯之后會(huì)生成一個(gè)存儲(chǔ)編譯信息的文件，第二次編譯會(huì)在第一次的基礎(chǔ)上進(jìn)行增量編譯，可以提高編譯的速度
• "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲(chǔ)位置
• "diagnostics": true, // 打印診斷信息
• "target": "ES5", // 目標(biāo)語(yǔ)言的版本
• "module": "CommonJS", // 生成代碼的模板標(biāo)準(zhǔn)
• "outFile": "./app.js", // 將多個(gè)相互依賴的文件生成一個(gè)文件，可以用在AMD模塊中，即開(kāi)啟時(shí)應(yīng)設(shè)置"module": "AMD",
• "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的庫(kù)，即聲明文件，es5 默認(rèn)引用dom、es5、scripthost,如需要使用es的高級(jí)版本特性，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array",
• "allowJS": true, // 允許編譯器編譯JS，JSX文件
• "checkJs": true, // 允許在JS文件中報(bào)錯(cuò)，通常與allowJS一起使用
• "outDir": "./dist", // 指定輸出目錄
• "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結(jié)構(gòu)
• "declaration": true, // 生成聲明文件，開(kāi)啟后會(huì)自動(dòng)生成聲明文件
• "declarationDir": "./file", // 指定生成聲明文件存放目錄
• "emitDeclarationOnly": true, // 只生成聲明文件，而不會(huì)生成js文件
• "sourceMap": true, // 生成目標(biāo)文件的sourceMap文件
• "inlineSourceMap": true, // 生成目標(biāo)文件的inline SourceMap，inline SourceMap會(huì)包含在生成的js文件中
• "declarationMap": true, // 為聲明文件生成sourceMap
• "typeRoots": [], // 聲明文件目錄，默認(rèn)時(shí)node_modules/@types
• "types": [], // 加載的聲明文件包
• "removeComments":true, // 刪除注釋
• "noEmit": true, // 不輸出文件,即編譯后不會(huì)生成任何js文件
• "noEmitOnError": true, // 發(fā)送錯(cuò)誤時(shí)不輸出任何文件
• "noEmitHelpers": true, // 不生成helper函數(shù)，減小體積，需要額外安裝，常配合importHelpers一起使用
• "importHelpers": true, // 通過(guò)tslib引入helper函數(shù)，文件必須是模塊
• "downlevelIteration": true, // 降級(jí)遍歷器實(shí)現(xiàn)，如果目標(biāo)源是es3/5，那么遍歷器會(huì)有降級(jí)的實(shí)現(xiàn)
• "strict": true, // 開(kāi)啟所有嚴(yán)格的類型檢查
• "alwaysStrict": true, // 在代碼中注入'use strict'
• "noImplicitAny": true, // 不允許隱式的any類型
• "strictNullChecks": true, // 不允許把null、undefined賦值給其他類型的變量
• "strictFunctionTypes": true, // 不允許函數(shù)參數(shù)雙向協(xié)變
• "strictPropertyInitialization": true, // 類的實(shí)例屬性必須初始化
• "strictBindCallApply": true, // 嚴(yán)格的bind/call/apply檢查
• "noImplicitThis": true, // 不允許this有隱式的any類型
• "noUnusedLocals": true, // 檢查只聲明、未使用的局部變量(只提示不報(bào)錯(cuò))
• "noUnusedParameters": true, // 檢查未使用的函數(shù)參數(shù)(只提示不報(bào)錯(cuò))
• "noFallthroughCasesInSwitch": true, // 防止switch語(yǔ)句貫穿(即如果沒(méi)有break語(yǔ)句后面不會(huì)執(zhí)行)
• "noImplicitReturns": true, //每個(gè)分支都會(huì)有返回值
• "esModuleInterop": true, // 允許export=導(dǎo)出，由import from 導(dǎo)入
• "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問(wèn)umd模塊
• "moduleResolution": "node", // 模塊解析策略，ts默認(rèn)用node的解析策略，即相對(duì)的方式導(dǎo)入
• "baseUrl": "./", // 解析非相對(duì)模塊的基地址，默認(rèn)是當(dāng)前目錄
• "paths": { // 路徑映射，相對(duì)于baseUrl
  // 如使用jq時(shí)不想使用默認(rèn)版本，而需要手動(dòng)指定版本，可進(jìn)行如下配置
  "jquery": ["node_modules/jquery/dist/jquery.min.js"]
  },
• "rootDirs": ["src","out"], // 將多個(gè)目錄放在一個(gè)虛擬目錄下，用于運(yùn)行時(shí)，即編譯后引入文件的位置可能發(fā)生變化，這也設(shè)置可以虛擬src和out在同一個(gè)目錄下，不用再去改變路徑也不會(huì)報(bào)錯(cuò)
• "listEmittedFiles": true, // 打印輸出文件
• "listFiles": true// 打印編譯的文件(包括引用的聲明文件)

1.延遲初始化 strictPropertyInitialization

參考
ts 更嚴(yán)格的類屬性檢查

Typescript 2.7 引入了一個(gè)新的控制嚴(yán)格性的標(biāo)記 –strictPropertyInitialization, 這個(gè)參數(shù)在 tsconfig.ts 中來(lái)配置

開(kāi)啟方式：

"strictNullChecks": true
"strictPropertyInitialization": true

作用

• 使用這個(gè)標(biāo)記會(huì)確保類的每個(gè)實(shí)例屬性都會(huì)在構(gòu)造函數(shù)里或使用屬性初始化器賦值。
• 它會(huì)明確地進(jìn)行從變量到類的實(shí)例屬性的賦值檢查

舉例

class C {
  foo: number;
  bar = "hello";
  baz: boolean;
  constructor() {
    this.foo = 42;
  }
}

上述代碼，首先編輯器會(huì)報(bào)錯(cuò)： 屬性“baz”沒(méi)有初始化表達(dá)式，且未在構(gòu)造函數(shù)中明確賦值。ts(2564)。
其次在編譯報(bào)錯(cuò)：error TS2564: Property 'baz' has no initializer and is not definitely assigned in the constructor.

兩種都告訴開(kāi)發(fā)者，應(yīng)該給 baz 顯示賦值，但是某種情況下，在初始化的時(shí)候我們并不想賦值，更期望是 undefined，而后再去賦值，此時(shí) !: 就派上用場(chǎng)了。

在上述代碼中 屬性 baz 冒號(hào)之前加上 ! ,這樣就不會(huì)報(bào)錯(cuò)了

class C {
  foo: number;
  bar = "hello";
  baz!: boolean;
  constructor() {
    this.foo = 42;
  }
}

四、eslint

參考
放棄 TSLint，使用 ESLint
TypeScript如何使用ESLint進(jìn)行代碼檢測(cè)

1.放棄 TSLint

ESLint 支持 ECMAScript 和 JavaScript，而 TSLint 僅支持 TypeScript。因此，TSLint 官方已經(jīng)于 2019 年放棄了 TSLint，轉(zhuǎn)而呼吁開(kāi)發(fā)者們使用 ESLint 作為替代。

https://palantir.github.io/tslint/
warning: TSLint has been deprecated as of 2019. Please see this issue for more details: Roadmap: TSLint → ESLint. typescript-eslint is now your best option for linting TypeScript.

2.實(shí)踐

參考
ESLint 使用簡(jiǎn)介

先在VSCODE中安裝eslint插件，并重啟。新建一個(gè)Test.ts如下：

export class Test{
    private a:number;

    constructor(){

    }

    private fun1():void{
        console.log(this.a);
    }
}

現(xiàn)在，先使用eslint -v檢查一下，如果沒(méi)有安裝，則需要進(jìn)行全局安裝：

npm i eslint -g

D:\ts\HelloWorld>eslint -v
v8.10.0

然后就可以使用eslint --init來(lái)初始化配置文件了：

D:\ts\HelloWorld>eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y)

看來(lái)這里最新的版本初始化命令有所變化，可以參考前端代碼規(guī)范化之create-react-app項(xiàng)目添加eslint

選了yes后，開(kāi)始回答問(wèn)題，注意紅框處，問(wèn)我們項(xiàng)目是不是在用TypeScript，這里選Yes，后面又提示安裝ts-eslint相關(guān)內(nèi)容。

image.png

D:\ts\HelloWorld>eslint src/Test.ts

D:\ts\HelloWorld\src\Test.ts
  2:13  error  Parsing error: Unexpected token a

? 1 problem (1 error, 0 warnings)

3.更復(fù)雜的配置

參考
在TypeScript項(xiàng)目中使用ESLint，看這篇就夠了
VS Code下Eslint+Prettier+TypeScript一步到位（規(guī)范配置）