如何提高 TypeScript 的代碼質(zhì)量？

大家好，我是 CUGGZ。

Typescript 是 Microsoft 開發(fā)的一種編程語言，旨在為 Javascript 語言帶來嚴(yán)格的類型檢查和類型安全方面的安全性。它是 JavaScript 的超集，可以編譯為 Javascript。編譯選項是 tsconfig.json 文件中的屬性，可以啟用或禁用以改善 Typescript 體驗。下面就來看看如何通過設(shè)置編譯選項來提高 Typescript 代碼的質(zhì)量。

前言
在 TypeScript 項目中，tsconfig.json 放在項目根目錄，它指定了用來編譯這個項目的根文件和編譯選項。在 tsconfig.json 里有以下可配置項：

{
  "compileOnSave": true,
  "files": [],
  "include": [],
  "exclude": [],
  "extends": "",
  "compilerOptions": {}
}
這些配置項的作用如下：

compileOnSave：如果設(shè)為 true，在編輯了項目中文件保存的時候，編輯器會根據(jù) tsconfig.json 的配置重新生成文件，不過這個需要編輯器支持。
files：可以配置一個數(shù)組列表，里面包含指定文件的相對或絕對路徑。編譯器在編譯的時候只會編譯包含在 files 中列出的文件。如果不指定，則取決于有沒有設(shè)置 include 選項；如果沒有 include 選項，則默認(rèn)會編譯根目錄以及所有子目錄中的文件。這里列出的路徑必須是指定文件，而不是某個文件夾，而且不能使用*、?、**/等通配符。
include：include 也可以指定要編譯的路徑列表，但和 files 的區(qū)別在于，這里的路徑可以是文件夾，也可以是文件，可以使用相對和絕對路徑，而且可以使用通配符。比如"./src"即表示要編譯 src 文件夾下的所有文件以及子文件夾的文件。
exclude：表示要排除的、不編譯的文件，它也可以指定一個列表，規(guī)則和 include 一樣，可以是文件可以是文件夾，可以是相對路徑或絕對路徑，可以使用通配符。
extends：可以通過指定一個其它的 tsconfig.json 文件路徑，來繼承這個配置文件里的配置，繼承來的同名配置會覆蓋當(dāng)前文件定義的配置，所有相對路徑都被解析為其所在文件的路徑。TS 在 3.2 版本開始，支持繼承一個來自 Node.js 包的 tsconfig.json 配置文件。
compilerOptions：用來設(shè)置編譯選項，是 tsconfig.json 配置中最重要的配置項。本文所提到所有選項都需要寫在這個配置項中。
1. noUnusedLocals
將這個選項設(shè)置為 true 時，編譯器將檢查未使用的局部變量并生成錯誤，其方式類似于 ESLint 中的 no-unused-vars。此編譯器選項旨在消除和刪除 Typescript 中未使用的變量?？紤]下面的例子：

const numHandler = (input: number) => {
  let digits;
  return input;
};
在上面的例子中，我們定義了一個名為 numHandler 的函數(shù)，它接受一個 number 類型的參數(shù)。接下來，定義并返回了input 參數(shù)。當(dāng)編譯上面的代碼時，就會提示以下錯誤：

error TS6133: 'digits' is declared but its value is never read
產(chǎn)生這個錯誤的原因是聲明了 digits 變量但并沒有使用它?？梢酝ㄟ^在代碼中的某處使用聲明的值，或者通過將 tsconfig.json 文件中的 noUnusedLocals 選項設(shè)置為 false 來消除此錯誤。

2. noUnusedParameter
這個編譯選項有點類似于 noUnusedLocals 選項。不同之處在于，noUnusedLocals 在有未使用的局部變量時產(chǎn)生錯誤，noUnusedParameter 在聲明但未使用函數(shù)參數(shù)時產(chǎn)生錯誤。考慮下面的例子：

const anExample = (input: string) => {
  const someStrings = 'name'
  return { true, someStrings };
};
在上面的例子中，我們定義了一個名為 anExample 的函數(shù)，它接受一個 string 類型的參數(shù)。接下來，定義了一個名為 someStrings 的變量，然后返回一個布爾值和定義的變量。當(dāng)編譯上面的代碼時，將會提示以下錯誤：

error TS6133: 'input' is declared but its value is never read
發(fā)生這種情況是因為在函數(shù)中聲明了輸入?yún)?shù)而沒有使用它?？梢酝ㄟ^使用函數(shù)體中聲明的參數(shù)或?qū)?tsconfig.json 文件中的 noUnusedParameter 選項設(shè)置為 false 來消除此錯誤。

3. noImplicitReturns
這個編譯選項確保任何帶有返回聲明的函數(shù)都返回一些內(nèi)容。當(dāng)函數(shù)中的代碼路徑不返回值時，此選項會生成錯誤。考慮下面的例子：

function add(input: number, output: number) {
  if (input + output > 0) {
    return input + output;
  }
}
在上面的例子中，我們定義了一個帶有兩個 number 類型參數(shù)的函數(shù)。接下來，設(shè)置一個 if 語句，它檢查兩個參數(shù)的和是否大于零，然后返回該和。將此編譯選項設(shè)置為 true 時，編譯器會提示以下類型錯誤：

error TS7030: Not all code paths return a value.
Typescript 在這里檢測到并非所有代碼路徑都返回某些內(nèi)容。當(dāng)參數(shù)的總和不是正數(shù)時，就會沒有返回語句，這就可能會引發(fā)錯誤，因為上面的函數(shù)將返回 undefined。要解決此問題，請確保代碼的所有部分都會返回內(nèi)容?？梢赃@樣進(jìn)行修改：

function add(input: number, output: number) {
  if (input + output > 0) {
    return input + output;
  }
  return
}
通過使用 return 關(guān)鍵字，確保了代碼的所有部分都返回一些內(nèi)容。編譯選項幫助我們檢測可能的缺失情況，并避免錯誤。

4. noFallthroughCasesInSwitch
當(dāng)這個選項設(shè)置為 true 時，只要有 switch 語句中缺少 break 或 return 關(guān)鍵字，這個編譯選項就會生成錯誤。考慮下面的例子：

let name = 'Isaac';
 
switch (name) {
  case 'Mike':
    console.log('name is Mike');
  case 'John':
    console.log('name is John');
    break;           
}
當(dāng)編譯上面的代碼時，將會提示以下錯誤：

error TS7029: Fallthrough case in switch
發(fā)生這種情況是因為在第一個 switch 語句的分支中缺少了 break 關(guān)鍵字。

5. strictNullChecks
將這個編譯選項設(shè)為 true 時，null和 undefined 值不能賦值給非這兩種類型的值，別的類型的值也不能賦給它們。除了 any 類型，還有個例外就是 undefined 可以賦值給 void 類型。這個選項可以幫助我們消除 Uncaught TypeError 錯誤?？紤]下面的例子：

let title: string;
name = title;
console.log(name);
當(dāng)編譯上面的代碼時，將會提示以下錯誤：

error TS2454: Variable 'title' is used before being assigned
解決這個錯誤的方法是在使用變量之前為其賦值：

let title: string = "Student"
name = title
console.log(name)
6. noImplicitAny
Typescript 中的每個變量都有一個類型。我們要么顯式地定義類型，要么 Typescript 推斷它的類型?？紤]下面的例子：

function value(a) {
  return;
}
在上面的代碼中，有一個參數(shù)為 a 的函數(shù)。由于沒有為該參數(shù)定義類型，因此 Typescript 推斷該參數(shù)具有 any 類型。將此編譯選項設(shè)置為 true 時，編譯器會提示以下錯誤：

error TS7006: Parameter 'a' implicitly has an 'any' type
解決此問題的方法就是確保正確定義每個參數(shù)的類型。

7. noImplicitThis
將這個編譯器選項設(shè)置為 true 時，Typescript 會在不正確地使用 this 關(guān)鍵字的情況下或在不清楚 this 所指的位置的地方提示錯誤。

class Person {
  weight: number;
  height: number;
 
  constructor(weight: number, height: number) {
    this.weight = weight;
    this.height = height;
  }
 
  getBodyMassIndex() {
    return function () {
      return this.weight / (this.height * this.height);
    };
  }
}
由于 Javascript 中存在作用域，當(dāng)編譯上面的代碼時，就會提示以下錯誤。這是因為 this 關(guān)鍵字的上下文默認(rèn)沒有綁定到任何 Person 實例。

error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation
解決這個問題的方法就是使用箭頭函數(shù)，因為箭頭函數(shù)使用其父級的執(zhí)行上下文：






class Person {
  weight: number;
  height: number;
 
  constructor(weight: number, height: number) {
    this.weight = weight;
    this.height = height;
  }
 
  getBodyMassIndex() {
    return () => {
      return this.weight / (this.height * this.height);
    };
  }
}
8. strictBindCallApply
這個編譯選項可以確保使用具有正確參數(shù)的 call()、bind() 和 apply() 函數(shù)。

const numHandler = (a: number) ={
  console.log(`log ${a}!`);
}
numHandler.call(undefined, 'Mike')
當(dāng)把這個編譯選項設(shè)置為 true 的情況下運行上述代碼時，將會提示以下錯誤：

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'
為了解決這個問題，需要傳入正確的參數(shù)：

const numHandler = (a: number) ={
  console.log(`log ${a}!`)
}
    
numHandler.call(undefined, '25')
9. strictPropertyInitialization
將這個編譯選項設(shè)置為 true 時，可以確保在構(gòu)造函數(shù)中初始化所有類屬性。

class User {
    name: string;
    age: number;
    occupation: string | undefined;
    
    constructor(name: string) {
        this.name = name;
    }
}
在上面的代碼塊中有一個 User 類，constructor() 方法是初始化其實例屬性的地方。當(dāng)實例化一個類對象時，JavaScript 會自動調(diào)用 constructor() 方法。Typescript 要求我們要么初始化定義的屬性，要么指定一個 undefined 類型。因此，當(dāng)編譯上面的代碼時，將會提示以下錯誤：

error TS2564: Property 'age' has no initializer and is not definitely assigned in the constructor.
10. useUnknownInCatchVariables
在 Javascript 中，可以拋出錯誤并在 catch 中捕獲它。通常這將是一個 error 實例，默認(rèn)設(shè)置為 any。將 useUnknownInCatchVariable 編譯選項設(shè)置為 true 時，它會隱式地將 catch 中的任何變量設(shè)置為 unknown 而不是 any?？紤]下面的例子：

try {
    throw 'myException';
}
catch (err) {
    console.error(err.message);
}
當(dāng)編譯上述代碼時，它會將 err 更改為 unknown 類型。因此會提示以下錯誤；

error TS2571: Object is of type 'unknown'.
產(chǎn)生此錯誤是因為 Typescript 將 err 設(shè)置為 unkown。可以通過以下方式來修復(fù)此錯誤：

將 err 從 unknown 縮小到 error 實例
try {
    throw 'myException';
}
catch (err) { // err: unknown
  if (err instanceof Error) {
    console.error(err.message);
  }
}
使用類型保護
try {
  throw "myException";
} catch (err) {
  // 錯誤現(xiàn)在縮小為一個字符串
  if (typeof err === "string") {
    console.error(err);
  }
}
在 if 檢查的幫助下，Typescript 識別出 typeof err === "string" 是一種特殊形式的代碼，我們在其中顯式聲明和描述類型，這稱為類型保護。

11. strictFunctionTypes
當(dāng) strictFunctionTypes 為 true 時，會更徹底地檢查函數(shù)參數(shù)。Typescript 參數(shù)默認(rèn)是雙向協(xié)變的，這意味著它們既可以是協(xié)變的，也可以是逆變的。方差是一種深入了解子類型關(guān)系的方法。當(dāng)參數(shù)是協(xié)方差時，我們可以將特定類型分配給更廣泛的類型（例如將子類型分配給超類型）。逆變是相反的：可以將更廣泛的類型分配給特定類型（例如將超類型分配給子類型）。

//strictFunctionTypes: false

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breeds: Array<string>;
}

let getDogName = (dog: Dog) => dog.name;
let getAnimalName = (animal: Animal) => animal.name;

getDogName = getAnimalName;  // Okay
getAnimalName = getDogName;  // Okay
上面的代碼運行時并沒有提示錯誤，默認(rèn)情況下參數(shù)是雙向協(xié)變比較的。超類型 getAnimalName 和子類型 getDogName 的方法可以相互分配。如果 strictFunctionTypes 設(shè)置為 true，則 Typescript 的參數(shù)進(jìn)行逆變比較。

//strictFunctionTypes : true
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breeds: Array<string>;
}

let getDogName = (dog: Dog) => dog.name;
let getAnimalName = (animal: Animal) => animal.name;

getDogName = getAnimalName; // Okay
getAnimalName = getDogName; // Error
當(dāng)上面的代碼運行時，將會提示以下錯誤：

Type '(dog: Dog) => string' is not assignable to type '(animal: Animal) => string'.
Types of parameters 'dog' and 'animal' are incompatible.
Property 'breeds' is missing in type 'Animal' but required in type 'Dog'.
這里，getAnimalName 是比 getDogName 更廣泛的函數(shù)。因此，在這種情況下，無法將超類型分配給子類型。但是，可以將子類型分配給超類型。大多數(shù)時候，函數(shù)參數(shù)應(yīng)該是逆變的，而不是雙向協(xié)變的。如果啟用這個編譯選項，Typescript 將不會將函數(shù)參數(shù)視為雙向協(xié)變。

12. allowUnreachableCode
UnReachable 的代碼永遠(yuǎn)不會被執(zhí)行，例如在 return 語句之后的代碼。將將這個編譯選項設(shè)置為 true 時，將忽略無法訪問的代碼。相比之下，TypeScript 會在 allowUnreachableCode 設(shè)置為 false 時驗證我們的代碼路徑，確保所有代碼都可以訪問和使用。設(shè)置為 true 時，如果檢測到任何無法訪問的代碼，則會引發(fā)錯誤。

const randomNum = (n: number): boolean => {
  if (n > 5) {
    return true;
  } else {
    return false;
  }
    
  return true;
};
如果代碼被證明無法訪問，Typescript 將提示以下警告：

error TS7027: Unreachable code detected.
13. noPropertyAccessFromIndexSignature
當(dāng)此編譯選項設(shè)置為 true 時，它要求我們使用 [] 括號表示法和 . 點符號表示法訪問未知屬性以訪問已定義的屬性。這提高了一致性，因為使用點符號訪問的屬性始終指示現(xiàn)有屬性。obj.key 語法如果屬性不存在，可以使用 [] 括號表示法：obj["key"]。

interface HorseRace {
  breed: "Shetland" | "Hackney" | "Standardbred";
  speed: "fast" | "slow";
  // 尚未定義的屬性的索引簽名
  [key: string]: string;
}
declare const pick: HorseRace;
pick.breed;
pick.speed;
pick.ownerName;
在上面的示例中，我們定義了一個 HorseRace 接口，并為其賦予了一些屬性，例如breed、speed和索引簽名（用于未知屬性）。當(dāng)編譯上面的代碼時，將會提示以下錯誤：

error TS4111: Property 'ownerName' comes from an index signature, so it must be accessed with ['ownerName'].
要修改此錯誤，需要在調(diào)用屬性 ownerName 時使用括號表示法：






pick.breed;
pick.speed;
pick["ownerName"]
14. exactOptionalPropertyType
默認(rèn)情況下，Typescript 會忽略一個屬性是否被設(shè)置為“undefined”，因為它沒有被定義，或者被定義為了 undefined。

//exactOptionalPropertyTypes = false

interface Test {
  property?: string;
}
const test1: Test = {};
console.log("property" in test1); //=> false

const test2: Test = { property: undefined };
console.log("property" in test2);
上面代碼執(zhí)行的時候不會產(chǎn)生錯誤，在 test1 中，檢查是否定義了 property；如果不是，它會打印一個 false。在 test2 中，打印出 true，因為定義了 property 并將其設(shè)置為 undefined。接下來，把 exactOptionalPropertyTypes 選項設(shè)置為 true：

//exactOptionalPropertyTypes = true

interface Test {
  property?: string;
}
const test1: Test = {};
console.log("property" in test1); // false

const test2: Test = { property: undefined };
console.log("property" in test2);  // true
編譯上述代碼時，將會提示以下錯誤：

error TS2375: Type '{ property: undefined; }' is not assignable to type 'Test' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties. Types of property 'property' are incompatible. Type 'undefined' is not assignable to type 'string'.
這里，Typescript 不允許定義 undefined 的屬性。為了解決這個問題，可以用 undefined 類型定義屬性。

//exactOptionalPropertyTypes = true

interface Test {
  property?: string | undefined;
}

const test1: Test = {};
console.log("property" in test1); //false

const test2: Test = { property: undefined };
console.log("property" in test2);  //true
當(dāng)啟用 exactOptionalPropertyTypes 時，Typescript 會意識到這兩種具有未定義屬性的不同方式。它還確保如果我們想顯式地將屬性定義為 undefined，則必須首先使用 undefined 類型對其進(jìn)行注釋。

15. forceConsistentCasingInFileNames
當(dāng)這個選項設(shè)置為 false 時，將遵循運行 Typescript 的操作系統(tǒng) (OS) 的區(qū)分大小寫規(guī)則。它可以區(qū)分大小寫（操作系統(tǒng)區(qū)分文件名中的小寫和大寫字符）或不區(qū)分大小寫（操作系統(tǒng)不區(qū)分字符大小寫）。當(dāng) forceConsistentCasingInFileNames 選項設(shè)置為 true 時，如果嘗試導(dǎo)入名稱大小寫與磁盤上文件名稱大小寫不同的文件，Typescript 將引發(fā)錯誤。

// StringValidator.ts

export interface StringValidator {
  isAcceptable(s: string): boolean;
}
// ZipCodeValidator.ts

import { StringValidator } from "./stringValidator";

export const numberRegexp = /^[0-9]+$/;

export class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string) {
    return s.length === 5 && numberRegexp.test(s);
  }
}
在不考慮文件名大小寫的情況下，在上面的代碼中導(dǎo)入 StringValidator.ts 文件。如果 forceConsistentCasingInFileNames 選項設(shè)置為 true，將會提示以下錯誤：

error TS1149: File name 'C:/Users/acer/Desktop/workBase/writing/Typescript/tsc/stringValidator.ts' differs from already included file name 'C:/Users/acer/Desktop/workBase/writing/Typescript/tsc/StringValidator.ts' only in casing.
要解決此問題，需要在導(dǎo)入文件時確保文件名大小寫正確。

總結(jié)&延伸
編譯選項大致可以分為五類：基礎(chǔ)選項、類型檢查選項、額外檢測選項、模塊解析選項、Source Map 選項、實驗選項。

（1）基礎(chǔ)選項
target：用于指定編譯之后的版本目標(biāo)，可選值有：ES3(默認(rèn)值)、ES5、ES2015、ES2016、ES2017、ESNEXT。如果不配置 target 項，默認(rèn)是將代碼轉(zhuǎn)譯為 ES3 的版本，如果設(shè)為 ESNEXT，則為最新 ES 規(guī)范版本。
module：用來指定要使用的模塊標(biāo)準(zhǔn)，可選值有commonjs、amd、system、umd、es2015(或?qū)?es6)。如果不設(shè)置 module 選項，則如果 target 設(shè)為 ES6，那么 module 默認(rèn)值為 ES6，否則為 commonjs。
lib：用于指定要包含在編譯中的庫文件。如果要使用 ES6 的新語法，需要引入 ES6 這個庫，或者也可以寫 ES2015。如果沒有指定 lib 配置，默認(rèn)會加載一些庫，而加載什么庫是受 target 影響的。如果 target 為 ES5，默認(rèn)包含的庫有DOM、ES5和ScriptHost；如果 target 是 ES6，默認(rèn)引入的庫有DOM、ES6、DOM.Iterable和ScriptHost。
allowJs：值為 true 或 false，用來指定是否允許編譯 JS 文件，默認(rèn)是 false，即不編譯 JS 文件。
checkJs：值為 true 或 false，用來指定是否檢查和報告 JS 文件中的錯誤，默認(rèn)是 false。
jsx：指定jsx代碼用于的開發(fā)環(huán)境: ‘preserve’, ‘react-native’，‘react’，用于編譯 jsx 代碼
jsxFactory: 指定生成目標(biāo)為react JSX時，使用的JSX工廠函數(shù)，比如 React.createElement。
declaration：值為 true 或 false，用來指定是否在編譯的時候生成響應(yīng)的".d.ts"聲明文件。如果設(shè)為 true，編譯每個 ts 文件之后會生成一個 js 文件和一個聲明文件。但是 declaration 和 allowJs 不能同時設(shè)為 true。
declarationMap：指定是否為聲明文件.d.ts生成.map文件
sourceMap：值為 true 或 false，用來指定編譯時是否生成.map文件。
outFile：用于指定將輸出文件合并為一個文件，它的值為一個文件路徑名，比如設(shè)置為"./dist/main.js"，則輸出的文件為一個 main.js 文件。但是要注意，只有設(shè)置 module 的值為 amd 和 system 模塊時才支持這個配置。
outDir：用來指定輸出文件夾，值為一個文件夾路徑字符串，輸出的文件都將放置在這個文件夾。
rootDir：用來指定編譯文件的根目錄，編譯器會在根目錄查找入口文件。
removeComments：值為 true 或 false，用于指定是否將編譯后的文件中的注釋刪掉，設(shè)為 true 的話即刪掉注釋，默認(rèn)為 false。
noEmit：不生成編譯文件，很少用。
importHelpers：值為 true 或 false，指定是否引入 tslib 里的輔助工具函數(shù)，默認(rèn)為 false。
isolatedModules：值為 true 或 false，指定是否將每個文件作為單獨的模塊，默認(rèn)為 true，它不可以和 declaration 同時設(shè)定。
removeComments：刪除所有注釋，除了以 /!*開頭的版權(quán)信息。
（2）類型檢查選項
strict：值為 true 或 false，用于指定是否啟動所有類型檢查，如果設(shè)為 true 則會同時開啟前面這幾個嚴(yán)格類型檢查，默認(rèn)為 false。
noImplicitAny：值為 true 或 false，如果沒有為一些值設(shè)置明確的類型，編譯器會默認(rèn)這個值為 any 類型，如果將 noImplicitAny 設(shè)為 true，則如果沒有設(shè)置明確的類型會報錯。默認(rèn)值為 false。
alwaysStrict：值為 true 或 false，指定始終以嚴(yán)格模式檢查每個模塊，并且在編譯之后的 JS 文件中加入"use strict"，用來告訴瀏覽器該 JS 為嚴(yán)格模式。
strictNullChecks：值為 true 或 false，當(dāng)設(shè)為 true 時，null 和 undefined 值不能賦值給非這兩種類型的值，別的類型的值也不能賦給它們。除了 any 類型，還有個例外就是 undefined 可以賦值給 void 類型。
strictFunctionTypes：值為 true 或 false，用來指定是否使用函數(shù)參數(shù)雙向協(xié)變檢查。如果開啟了 strictFunctionTypes，這個賦值就會報錯。默認(rèn)為 false
strictPropertyInitialization： 值為 true 或 false，設(shè)為 true 后會檢查類的非 undefined 屬性是否已經(jīng)在構(gòu)造函數(shù)里初始化，如果要開啟該項，需要同時開啟 strictNullChecks，默認(rèn)為 false。
strictBindCallApply：值為 true 或 false，設(shè)為 true 后會對 bind、call 和 apply 綁定方法參數(shù)的檢查是嚴(yán)格檢查的。
（3）額外檢查選項
noUnusedLocals：值為 true 或 false，用于檢查是否有定義了但是沒有使用的變量，對于這一點的檢測，使用 ESLint 可以在書寫代碼的時候做提示，可以配合使用。默認(rèn)值為 false。
noUnusedParameters：值為 true 或 false，用于檢查是否有在函數(shù)體中沒有使用的參數(shù)，這個也可以配合 ESLint 來做檢查，默認(rèn)是 false。
noImplicitReturns：值為 true 或 false，用于檢查函數(shù)是否有返回值，設(shè)為 true 后，如果函數(shù)沒有返回值則會提示，默認(rèn)為 false。
noFallthroughCasesInSwitch：值為 true 或 false，用于檢查 switch 中是否有 case 沒有使用 break 跳出 switch，默認(rèn)為 false。
noImplicitThis：當(dāng) this 為 any 類型的時候報錯。
注意： 開啟了這些檢查如果有錯會提示但不會報錯。

（4）模塊解析選項
moduleResolution：用于選擇模塊解析策略，有node和classic兩種類型。
baseUrl：用于設(shè)置解析非相對模塊名稱的基本目錄，相對模塊不會受 baseUrl 的影響。
rootDirs：可以指定一個路徑列表，在構(gòu)建時編譯器會將這個路徑列表中的路徑內(nèi)容都放到一個文件夾中。
typeRoots：用來指定聲明文件或文件夾的路徑列表，如果指定了此項，則只有在這里列出的聲明文件才會被加載。
types：用來指定需要包含的模塊，只有在這里列出的模塊聲明文件才會被加載進(jìn)來。
allowSyntheticDefaultImports：值為 true 或 false，用來指定允許從沒有默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入。
paths： 用于設(shè)置模塊名到基于 baseUrl 的路徑映射。
（5）source map 選項
sourceRoot：用于指定調(diào)試器應(yīng)該找到 TypeScript 文件而不是源文件位置，這個值會被寫進(jìn) .map 文件里。
sourceMap：生成相應(yīng)的 .map文件
mapRoot：用于指定調(diào)試器找到映射文件而非生成文件的位置，指定 map 文件的根路徑，該選項會影響.map 文件中的 sources 屬性。
inlineSourceMap：值為 true 或 false，指定是否將 map 文件的內(nèi)容和 js 文件編譯在同一個 js 文件中。如果設(shè)為 true，則 map 的內(nèi)容會以//# sourceMappingURL=然后接 base64 字符串的形式插入在 js 文件底部。
inlineSources：值為 true 或 false，用于指定是否進(jìn)一步將 .ts 文件的內(nèi)容也包含到輸出文件中。
（6）實驗選項
控制是否開啟一些實驗性質(zhì)的語法。

experimentalDecorators：值是 true 或 false，用于指定是否啟用實驗性的裝飾器特性。
emitDecoratorMetadata：值為 true 或 false，用于指定是否為裝飾器提供元數(shù)據(jù)支持。
參考：

https://blog.openreplay.com/improving-code-quality-in-typescript-with-compiler-options
https://blog.openreplay.com/improving-code-quality-in-typescript-with-compiler-options-part-2

作者：GUOZE


歡迎關(guān)注微信公眾號 ：前端充電寶