定義您自己的類型

mstmahmuda11121

React 應用程式不僅可以使用 JavaScript 開發，還可以使用 TypeScript 開發。 TypeScript 是基於 JavaScript，並在該語言中新增了靜態類型系統。這是為了避免 JavaScript 動態型別系統出現的典型問題。這尤其包括在更大且持久的應用程式中更好地維護程式碼。 我們的電子書中有更多包含 React 使用技巧的專家文章。電子書 React – 立即免費下載！ 在我們了解如何使用 TypeScript 建立類型安全的 React 元件之前，我們先來看看 JavaScript 的類型系統，以了解 TypeScript 背後的動機以及 TypeScript 本身的基礎知識。 以下程式碼示範了 JavaScript 類型系統的動態特性。它在語法上是有效的，並且可以在瀏覽器中執行而不會出現錯誤。


到程式碼 typeof 運算子將 person 變數一次的類型印到控制台。我們看到，透過分配不 沙烏地阿拉伯 電話號碼 同類型的值，變數的類型會自動變更。 雖然一方面動態類型非常方便，因為我們不必擔心類型，但另一方面它可能容易出錯且難以理解。在上面的小程式碼範例中，我們可以相對容易地確定人是什麼類型。然而，對於最近更大的應用程序，這變得更加困難，因此更容易出錯。編譯器或類型檢查器無法幫助解決該問題。讓我們來看第二個例子，這次是函數如果我們想在應用程式中呼叫這個函數，我們需要知道 person 應該是什麼我們無法從簽名中看到所有這些，必須依賴文件或閱讀原始碼。




另一方面，函數本身無法在運行時確定是否僅將與其期望類型相對應的參數傳遞給它。例如，假設該函數需要一個字串，但錯誤地傳遞了一個物件。如果隨後執行應用程式並呼叫函數，則「典型」錯誤只會在運行時發生到程式碼 我們知道 React API 規定元件的屬性需要這個參數，但是我們無法從元件中看到需要哪些屬性以及它們是什麼類型。就像前面的 JavaScript 範例一樣，我們無法在元件中 100% 確定我們實際上會收到預期形式的預期屬性。 （React 有一個模組，即React PropTypes，可以用它來描述屬性，但這裡的檢查也只在運行時進行，並且在開發過程中的幫助非常有限）。 打字稿 在開發時使用靜態類型系統可以避免這些問題——至少在很大程度上是這樣。