個受歡迎且非常清晰的網站設定工具

mstmahmuda11121

因此，該組件還可以依賴它已被賦予正確屬性的事實。因此，您可以確定，例如，title 屬性絕對是一個字串（而不是 null 或其他資料類型）。 用 TypeScript 編寫的元件也可以從 JavaScript 程式碼呼叫。這意味著它不僅適用於基於 TypeScript 的應用程式。當在 JavaScript 程式碼中使用時，類型檢查當然不再可能，並且可能會發生所描述的問題。 在元件內，我們無法（意外地）存取不存在的屬性。像 props.title 而不是 props.title 這樣的錯誤會在 TypeScript 中引發錯誤。此外，屬性不能被意外更改因為我們已將屬性標記為唯讀。 元件的使用者和元件本身都可以提供與 TypeScript 相容的 IDE 或編輯器程式碼完成和其他幫助。 在元件內，TypeScript 知道屬性的類型，因此它知道 title 是一個字串而不是 null（因此可以對其呼叫 toUpperCase() ）。由於也指定了 onLoginClick 回呼函數的簽名，因此 TypeScript 可以確保在使用函數時使用正確的參數呼叫它。


圖 - 程式碼範例：錯誤使用 LoginForm 元件時出現 TypeScript 錯誤 錯誤使用 LoginForm 元件 沙烏地阿拉伯 電話號碼 時出現 TypeScript 錯誤 除了屬性之外，我們還在元件中使用使用者名稱和密碼的狀態。在最簡單的形式中，我們不需要明確指定類型，因為 TypeScript 能夠根據 useState 函數的類型宣告派生類型。因此，在呼叫 onLoginClick 回呼函數時沒有問題：由於 TypeScript 已經確定了使用者名稱和密碼的正確類型（字串），因此 TypeScript 也知道呼叫是正確的。 這樣，useState(setUsername, setPassword)傳回的setter函數也能正確輸入。對這些函數的以下呼叫現在將導致錯誤 在某些情況下，TypeScript 無法獨立匯出狀態的類型。例如，如果狀態也可以為空或由複雜物件組成。在這種情況下，描述狀態的類型參數也可以傳遞給 useState 掛鉤。假設使用者名稱的狀態也可以為空，我們可以這樣寫由於元件中的 username 現在可以為 null，因此 TypeScript 強制我們在使用前執行適當的 null 檢查，以便在運行時不會發生錯誤。




完整的範例可以在線上 IDE Codesandbox中找到。 使用 TypeScript 反應應用程式 – Outlook 我們已經看到 React 元件可以使用 TypeScript 無縫開發。在最好的情況下，我們甚至不需要明確地編寫類型定義，但我們仍然受益於 TypeScript 的靜態類型系統。其他 React API 中的 TypeScript 支援也非常好。也可以在任何地方指定您自己的類型。例如，您可以使用 React Context API 來描述可供應用程式使用的物件的外觀。對全域物件的修改和存取都是型別安全的。 useReducer 鉤子可用於確保正確使用關聯的減速器函數中管理的狀態（在減速器內更改時以及在組件內使用時），並且組件僅使用調度函數觸發器執行已知且正確的操作。 React 生態系統的大部分也可以使用 TypeScript（有時甚至用 TypeScript 實作）。使用Jest和React-testing-library的測試案例可以在 TypeScript 中開箱即用地編寫，React Router 和 Redux 也可以使用 TypeScript。特別是在 Redux 中，TypeScript 可以為確保操作、減速器和元件正確協同工作提供很大幫助。由於類型推斷，在許多地方甚至不需要明確編寫類型定義。