快捷導(dǎo)航

詳解Typescript?嚴格模式有多嚴格

更新時間：2023年01月29日 14:40:44 作者：CUGGZ

這篇文章主要為大家介紹了Typescript?嚴格模式有多嚴格實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

TypeScript 是微軟于 2012 年推出的一門語言，它是 JavaScript 的超集，具有更強的可選類型系統(tǒng)。TypeScript 和 JavaScript 一樣是有嚴格模式的，今天就來看看 TypeScript 中的嚴格模式如何開啟，以及它到底有多嚴格！

TypeScript 的配置項都寫在項目根目錄名為 tsconfig.json 的配置文件中，可以通過以下方式來開啟嚴格模式：

{
  ...
  "compilerOptions": {
    "strict": true,
    ...
  },
  ...
}

TypeScript 編譯器有超過 90 個不同的配置項。其中 7 個是關(guān)于嚴格模式的：

noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictPropertyInitialization
strictFunctionTypes

當(dāng)在 tsconfig.json 中開啟嚴格模式之后，就相當(dāng)于開啟了這些配置：

{
  ...
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    ...
  }
  ...
}

下面就來分別看一下這些選項都有什么含義。

noImplicitAny

此規(guī)則不允許變量或函數(shù)參數(shù)具有隱式 any 類型。來看下面的例子：

const add10 = number =&gt; number + 10;

當(dāng)啟用了嚴格模式時，函數(shù)參數(shù) number 就報錯了：

參數(shù)“number”隱式具有“any”類型。ts(7006)

要想修復(fù)這個報錯，只需給參數(shù)或變量顯式指定類型：

const add10 = (number: number) =&gt; number + 10;

因此 noImplicitAny 規(guī)則可以確保代碼更具可讀性。否則，add10 函數(shù)的調(diào)用者需要推斷參數(shù)是一個數(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)啟用了嚴格模式時，getBodyMassIndex 中的 this 就報錯了：

"this" 隱式具有類型 "any"，因為它沒有類型注釋。ts(2683)

解決這個問題的方法就是使用箭頭函數(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);
    };
  }
}

alwaysStrict

此規(guī)則指定始終以嚴格模式檢查每個模塊，并且在編譯之后的 JavaScript 文件中加入"use strict"，用來告訴瀏覽器該 JavaScript 為嚴格模式。

ECMAScript 嚴格模式是在 ES5 中引入的，它只是向編譯器提示代碼應(yīng)該以嚴格模式執(zhí)行，使用嚴格模式可以使代碼更以更安全、高效的方式運行。

strictBindCallApply

此規(guī)則可以確保使用具有正確參數(shù)的 call()、bind() 和 apply() 函數(shù)。來看下面的例子：

const logNumber = (x: number) =&gt; {
  console.log(`number：${x}`)
}
logNumber.call(undefined, "10"); //

當(dāng)啟用了嚴格模式時，getBodyMassIndex 中的 this 就報錯了：

類型“string”的參數(shù)不能賦給類型“number”的參數(shù)。ts(2345)

當(dāng)遇到這種報錯時，只需檢查函數(shù)調(diào)用的參數(shù)，并使用正常的方式調(diào)用：

logNumber.call(undefined, 10); // number：10

strictNullChecks

此規(guī)則使得 null和 undefined 值不能賦值給非這兩種類型的值，別的類型的值也不能賦給它們。除了 any 類型，還有個例外就是 undefined 可以賦值給 void 類型。這個選項可以幫助 Uncaught TypeError 錯誤。來看下面的例子：

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)啟用了嚴格模式時，打印 book.name 時就報錯了：

對象可能為“未定義”。ts(2532)

如果未開啟嚴格模式，即使 book.name 可能未定義，此代碼也會編譯。想要修復(fù)這個問題，就需要為要編譯的代碼添加 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);

如果啟用了嚴格模式時，調(diào)用 logBookName(book); 時就會報錯：

類型“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ī)則時，可以強制開發(fā)人員編寫具有更好類型描述的代碼。

strictPropertyInitialization

此規(guī)則將強制在構(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)編譯上面的代碼時，將會提示以下錯誤：

屬性“age”沒有初始化表達式，且未在構(gòu)造函數(shù)中明確賦值。ts(2564)

對于上面的代碼，可以這樣改：

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

// 非嚴格模式
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

上面的代碼運行時并沒有提示錯誤，默認情況下參數(shù)是雙向協(xié)變比較的。超類型 getAnimalName 和子類型 getDogName 的方法可以相互分配。當(dāng)開啟嚴格模式之后，則 TypeScript 的參數(shù)進行逆變比較。

// 嚴格模式
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)開啟嚴格模式時，最后一行將報以下錯誤：

不能將類型“(dog: Dog) => string”分配給類型“(animal: Animal) => string”。
參數(shù)“dog”和“animal” 的類型不兼容。
類型 "Animal" 中缺少屬性 "breeds"，但類型 "Dog" 中需要該屬性。ts(2322)

這里，getAnimalName 是比 getDogName 更廣泛的函數(shù)。因此，在這種情況下，無法將超類型分配給子類型。但是，可以將子類型分配給超類型。大多數(shù)時候，函數(shù)參數(shù)應(yīng)該是逆變的，而不是雙向協(xié)變的。如果開啟嚴格模式，Typescript 將不會將函數(shù)參數(shù)視為雙向協(xié)變。

以上就是詳解Typescript 嚴格模式有多嚴格的詳細內(nèi)容，更多關(guān)于Typescript 嚴格模式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: