大家好，我是 CUGGZ。
TypeScript 是微軟于 2012 年推出的一門語言，它是 JavaScript 的超集，具有更強(qiáng)的可選類型系統(tǒng)。TypeScript 和 JavaScript 一樣是有嚴(yán)格模式的，今天就來看看 TypeScript 中的嚴(yán)格模式如何開啟，以及它到底有多嚴(yán)格！
TypeScript 的配置項(xiàng)都寫在項(xiàng)目根目錄名為 tsconfig.json 的配置文件中，可以通過以下方式來開啟嚴(yán)格模式：
{
...
"compilerOptions": {
"strict": true,
...
},
...
}TypeScript 編譯器有超過 90 個(gè)不同的配置項(xiàng)。其中 7 個(gè)是關(guān)于嚴(yán)格模式的：
- noImplicitAny
- noImplicitThis
- alwaysStrict
- strictBindCallApply
- strictNullChecks
- strictPropertyInitialization
- strictFunctionTypes
當(dāng)在 tsconfig.json 中開啟嚴(yán)格模式之后，就相當(dāng)于開啟了這些配置：
{
...
"compilerOptions": {
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictBindCallApply": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
...
}
...
}下面就來分別看一下這些選項(xiàng)都有什么含義。
noImplicitAny
此規(guī)則不允許變量或函數(shù)參數(shù)具有隱式 any 類型。來看下面的例子：
const add10 = number number + 10;
當(dāng)啟用了嚴(yán)格模式時(shí)，函數(shù)參數(shù) number 就報(bào)錯(cuò)了：
參數(shù)“number”隱式具有“any”類型。ts(7006)
要想修復(fù)這個(gè)報(bào)錯(cuò)，只需給參數(shù)或變量顯式指定類型：
const add10 = (number: number) => number + 10;
因此 noImplicitAny 規(guī)則可以確保代碼更具可讀性。否則，add10 函數(shù)的調(diào)用者需要推斷參數(shù)是一個(gè)數(shù)字，那使用 TypeScript 還有什么意義呢？
noImplicitThis
此規(guī)則不允許 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);
};
}
}當(dāng)啟用了嚴(yán)格模式時(shí)，getBodyMassIndex 中的 this 就報(bào)錯(cuò)了：
"this" 隱式具有類型 "any"，因?yàn)樗鼪]有類型注釋。ts(2683)
解決這個(gè)問題的方法就是使用箭頭函數(shù)，因?yàn)榧^函數(shù)使用其父級(jí)的執(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);
};
}
}alwaysStrict
此規(guī)則指定始終以嚴(yán)格模式檢查每個(gè)模塊，并且在編譯之后的 JavaScript 文件中加入"use strict"，用來告訴瀏覽器該 JavaScript 為嚴(yán)格模式。
ECMAScript 嚴(yán)格模式是在 ES5 中引入的，它只是向編譯器提示代碼應(yīng)該以嚴(yán)格模式執(zhí)行，使用嚴(yán)格模式可以使代碼更以更安全、高效的方式運(yùn)行。
strictBindCallApply
此規(guī)則可以確保使用具有正確參數(shù)的 call()、bind() 和 apply() 函數(shù)。來看下面的例子：
const logNumber = (x: number) => {
console.log(`number：${x}`)
}
logNumber.call(undefined, "10"); //當(dāng)啟用了嚴(yán)格模式時(shí)，getBodyMassIndex 中的 this 就報(bào)錯(cuò)了：
類型“string”的參數(shù)不能賦給類型“number”的參數(shù)。ts(2345)
當(dāng)遇到這種報(bào)錯(cuò)時(shí)，只需檢查函數(shù)調(diào)用的參數(shù)，并使用正常的方式調(diào)用：
logNumber.call(undefined, 10); // number：10
strictNullChecks
此規(guī)則使得 null和 undefined 值不能賦值給非這兩種類型的值，別的類型的值也不能賦給它們。除了 any 類型，還有個(gè)例外就是 undefined 可以賦值給 void 類型。這個(gè)選項(xiàng)可以幫助 Uncaught TypeError 錯(cuò)誤。來看下面的例子：
interface Book {
name: string;
author: string;
}
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
console.log(book.name);當(dāng)啟用了嚴(yán)格模式時(shí)，打印 book.name 時(shí)就報(bào)錯(cuò)了：
如果未開啟嚴(yán)格模式，即使 book.name 可能未定義，此代碼也會(huì)編譯。想要修復(fù)這個(gè)問題，就需要為要編譯的代碼添加 null 檢查：
interface Book {
name: string;
author: string;
}
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
if (book) {
console.log(book.name);
} else {
console.log('Book not found');
}函數(shù)中也是一樣的，來看下面的例子：
interface Book {
name: string;
author: string;
}
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
const logBookName = (book: Book) => {
console.log(book.name);
}
logBookName(book);如果啟用了嚴(yán)格模式時(shí)，調(diào)用 logBookName(book); 時(shí)就會(huì)報(bào)錯(cuò)：
類型“Book | undefined”的參數(shù)不能賦給類型“Book”的參數(shù)。
不能將類型“undefined”分配給類型“Book”。ts(2345)
這里提供兩種解決方案：
- A：將logBookName 函數(shù)參數(shù)類型設(shè)置為 Book | undefined
- B：null 檢查條件調(diào)用
// A
const logBookName = (book: Book | undefined) => {
if (book) {
console.log(book.name);
}
else {
console.log('not book');
}
}
// B
if (book) {
logBookName(book);
}
使用該規(guī)則時(shí)，可以強(qiáng)制開發(fā)人員編寫具有更好類型描述的代碼。
strictPropertyInitialization
此規(guī)則將強(qiáng)制在構(gòu)造函數(shù)中初始化所有屬性值。來看下面的例子：
class User {
name: string;
age: number;
occupation: string | undefined;
constructor(name: string) {
this.name = name;
}
}在上面的代碼塊中有一個(gè) User 類，constructor() 方法是初始化其實(shí)例屬性的地方。當(dāng)實(shí)例化一個(gè)類對(duì)象時(shí)，JavaScript 會(huì)自動(dòng)調(diào)用 constructor() 方法。Typescript 要求要么初始化定義的屬性，要么指定一個(gè) undefined 類型。因此，當(dāng)編譯上面的代碼時(shí)，將會(huì)提示以下錯(cuò)誤：
屬性“age”沒有初始化表達(dá)式，且未在構(gòu)造函數(shù)中明確賦值。ts(2564)
對(duì)于上面的代碼，可以這樣改：
// A:指定 undefined 類型
class User {
name: string;
age: number | undefined;
occupation: string | undefined;
constructor(name: string) {
this.name = name;
}
}
// B:初始化定義的屬性
class User {
name: string;
age: number;
occupation: string | undefined;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
strictFunctionTypes
此規(guī)則會(huì)更徹底地檢查函數(shù)參數(shù)。Typescript 參數(shù)默認(rèn)是雙向協(xié)變的，這意味著它們既可以是協(xié)變的，也可以是逆變的。方差是一種深入了解子類型關(guān)系的方法。當(dāng)參數(shù)是協(xié)方差時(shí)，我們可以將特定類型分配給更廣泛的類型（例如將子類型分配給超類型）。逆變是相反的：可以將更廣泛的類型分配給特定類型（例如將超類型分配給子類型）。
// 非嚴(yán)格模式
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; // Ok
getAnimalName = getDogName; // Ok
上面的代碼運(yùn)行時(shí)并沒有提示錯(cuò)誤，默認(rèn)情況下參數(shù)是雙向協(xié)變比較的。超類型 getAnimalName 和子類型 getDogName 的方法可以相互分配。當(dāng)開啟嚴(yán)格模式之后，則 TypeScript 的參數(shù)進(jìn)行逆變比較。
// 嚴(yán)格模式
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; // Ok
getAnimalName = getDogName; // Error
當(dāng)開啟嚴(yán)格模式時(shí)，最后一行將報(bào)以下錯(cuò)誤：
不能將類型“(dog: Dog) => string”分配給類型“(animal: Animal) => string”。
參數(shù)“dog”和“animal” 的類型不兼容。
類型 "Animal" 中缺少屬性 "breeds"，但類型 "Dog" 中需要該屬性。ts(2322)
這里，getAnimalName 是比 getDogName 更廣泛的函數(shù)。因此，在這種情況下，無法將超類型分配給子類型。但是，可以將子類型分配給超類型。大多數(shù)時(shí)候，函數(shù)參數(shù)應(yīng)該是逆變的，而不是雙向協(xié)變的。如果開啟嚴(yán)格模式，Typescript 將不會(huì)將函數(shù)參數(shù)視為雙向協(xié)變。
