TypeScript - 隱式型別


TypeScript 是一種靜態型別的程式語言,它是 JavaScript 的超集。它用於需要嚴格型別、面向物件程式設計概念和程式碼可重用性的大型 Web 應用程式。TypeScript 最重要的功能之一是能夠自動推斷型別。此功能稱為隱式型別。

隱式型別是一種功能,它允許 TypeScript 在變數初始化時自動確定變數的型別。這使得編碼更快、更容易且錯誤更少。本文將探討 TypeScript 中隱式型別的概念,並透過示例討論其優勢。

什麼是隱式型別?

隱式型別是 TypeScript 的一項功能,它根據變數的初始值或程式碼中的用法自動推斷變數的型別,而不是要求程式設計師顯式宣告型別。

這意味著開發人員無需顯式指定變數的型別,因為 TypeScript 會根據分配的值推斷它。TypeScript 使用型別推斷在沒有顯式型別註釋的情況下提供型別資訊,這發生在程式碼中的各個地方。例如,

let myVar = 10; // TypeScript infers the type of myVar as number
let myString = "Hello, World!"; // string is type of myString

在上面的示例中,TypeScript 根據分配給它們的值自動將 myVar 的型別推斷為 number,將 myString 的型別推斷為 string。

在 TypeScript 中,型別推斷髮生在變數和成員初始化期間、為函式引數分配預設值時以及確定函式的返回型別時。此過程通常很簡單且自動,允許語言根據程式碼中的上下文和用法推斷型別。

隱式型別的示例

讓我們看一些示例來了解隱式型別在 TypeScript 中是如何工作的。

示例 1:推斷變數的型別

在上面的示例中,TypeScript 根據分配給它們的值將 myVar 的型別推斷為 number,將 myString 的型別推斷為 string,將 myBoolean 的型別推斷為 boolean。

let myVar = 10; // TypeScript infers the type of myVar as number
let myString = "Hello, World!"; // infers the type of myString as string
let myBoolean = true; // infers the type of myBoolean as Boolean
console.log(`The type of myVar is: ${typeof myVar}`);
console.log(`The type of myString is: ${typeof myString}`);
console.log(`The type of myBoolean is: ${typeof myBoolean}`);

輸出

The type of myVar is: number
The type of myString is: string
The type of myBoolean is: boolean

示例 2:推斷函式的型別

在上面的示例中,即使沒有顯式定義,TypeScript 也可以使用分配給它們的預設值來推斷 add 函式引數的型別為 number。使用推斷的引數型別,它還可以確定函式的返回型別。

function add(a = 2, b = 5) {
   console.log(`The typeof a is: ${typeof a}`);
   console.log(`The typeof b is: ${typeof b}`);
   return a + b;
}
add(4, 5);

輸出

The typeof a is: number
The typeof b is: number

示例 3:推斷陣列的型別

在下面的程式碼中,isNumberArray 是一個型別保護函式,它檢查輸入 arr 是否為陣列,以及陣列中的每個元素是否為 "number" 型別。is 關鍵字用於在函式簽名中斷言型別。

然後,我們將 myArray 宣告為 any 型別以暫時繞過型別檢查。然後,我們可以使用型別保護 isNumberArray 來檢查 myArray 是否為有效的 number[] 陣列。如果型別保護返回 true,則表示型別斷言正確,我們可以安全地將 myArray 視為數字陣列。

function isNumberArray(arr: any): arr is number[] {
   return Array.isArray(arr) && arr.every((value) => typeof value === "number");
}

const myArray = [1, 2, 3];
if (isNumberArray(myArray)) {
   // Here, myArray is recognized as number[]
   console.log("myArray is an array of numbers");
} else {
   console.log("myArray is not an array of numbers");
}

編譯後,它將生成以下 JavaScript 程式碼 -

function isNumberArray(arr) {
   return Array.isArray(arr) && arr.every(function (value) { return typeof value === "number"; });
}
var myArray = [1, 2, 3];
if (isNumberArray(myArray)) {
   // Here, myArray is recognized as number[]
   console.log("myArray is an array of numbers");
}
else {
   console.log("myArray is not an array of numbers");
}

輸出

myArray is an array of numbers

如何確定隱式型別?

在初始化期間推斷型別、使用提供的預設值獲取函式引數的型別或確定函式的返回型別都非常簡單。

當 TypeScript 從多個表示式推斷型別時,它使用表示式型別來確定“最佳通用型別”。

let x = [4, "hello", null]

x 變數的推斷型別是陣列中每個值的最佳通用型別。因此,推斷的型別變為 (number|string|null)[]。

由於“最佳通用型別”必須從提供的候選型別中選擇,因此在某些情況下,型別共享一個共同的結構,但沒有一個型別是所有候選型別的超型別。例如 -

let bouquet = [new Tulip(), new Dahlia(), new Orchid()];

在這種情況下,TypeScript 推斷的型別是 (Tulip|Dahlia|Orchid)[],但理想情況下,我們可能希望 bouquet 被推斷為 Flower[]

但是,陣列中沒有嚴格為 Flower[] 型別的物件,我們不會對陣列元素型別進行任何推斷。因此,當沒有一個型別是所有其他候選表示式的超型別時,我們需要顯式提供型別 -

Let bouquet: Flower[] = [new Tulip(), new Dahlia(), new Orchid()];

當找不到最佳通用型別時,結果推斷是聯合陣列型別,(Tulip|Dahlia|Orchid)[]

隱式型別的優勢

TypeScript 中隱式型別的優勢在於 -

  • 更快的編碼 - 隱式型別透過消除顯式指定每個變數型別的需要來節省時間和精力。

  • 更少的錯誤 - 由於 TypeScript 自動推斷變數的型別,因此在宣告變數型別時出錯的可能性較小。

  • 程式碼可讀性 - 隱式型別使程式碼更易於閱讀,因為它減少了需要編寫的程式碼量。

結論

隱式型別是 TypeScript 的一項強大功能,它允許語言根據分配給它們的值自動推斷變數、函式、陣列和物件的型別。此功能幫助開發人員編寫更簡潔、更簡潔的程式碼,同時還減少了錯誤的可能性。此外,它節省了時間和精力,因為開發人員無需在程式碼中顯式指定每個變數的型別。總的來說,隱式型別是一項寶貴的功能,有助於 TypeScript 在開發人員中越來越受歡迎。

更新於: 2023-08-22

826 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告