TypeScript 如何讓 React 變得更好：更流暢的開發者體驗，更少的錯誤（以 useState 為例）

讓我們從一個場景和與之相關的任務開始。

我們有一個帶有狀態欄的訊息應用程序，可以顯示用戶的當前狀態並允許他們更新它。我們必須新增一個下拉式選單，使用者可以從中變更其狀態，並使用 useState() 在 UI 中顯示和更新使用者的目前狀態。

為了簡單起見，我們在本文中僅關注 useState 實現，在本文結束時，您將了解即使對於一個簡單的範例，TypeScript 也是一個更強大的選項。

任務

我們必須定義一個 useState() 來儲存和更新 userStatus，並使用五個可能的狀態選項之一進行初始化（假設 active）。

所有可能的選項是：

1. 活躍（活躍）
2. 離開（離開）
3. 請勿打擾（dnd）
4. 請假（請假）
5. 外出 (OOO)

JSX/JS

這是一個非常簡單的任務，對吧？我們要做的就是定義一個 useState 並將其初始化為 active，然後使用 set 函數更新狀態，我們就完成了。

但是等等！當有人審查我的代碼或稍後訪問這段代碼時（例如 1 週、2 週、1 個月、6 個月或其他時間後）會發生什麼，他們如何知道所有可能/有效的選項是什麼？

啊啊！是的，我們可以在 useState 旁邊添加註釋，讓他們知道這些都是可能的選項。

但是，這不是一個好的解決方案，對吧？那麼，我們該如何改進呢？

對象查找

物件查找對於我們的問題來說是一個非常好的解決方案。因此，讓我們從定義一個名為 UserStatus 的物件查找開始，並使用它來設定我們的 userStatus 值。

現在，讓我們更新 useState 定義。

現在，讓我們嘗試更新狀態。

哦！看看，現在我們在編輯器中獲得了自動完成功能，並且可以透過查看 UserStatus 的定義來檢查 userStatus 的所有可能/有效值。

對象查找的問題

儘管物件查找方法似乎解決了我們的問題，並且絕對是比僅添加註釋更好的解決方案，但它仍然存在兩個主要問題：

1. 對於以後訪問我們的程式碼的任何人，他們必須知道我們正在使用物件查找來設定我們的狀態。這可能看起來微不足道，但想像一下，隨著我們的組件增長並變得更加複雜，那麼有人很容易不知道我們的實現。
2. 它仍然不能阻止任何人為我們的狀態設定任何隨機值，即使他們知道物件查找。  

那麼，我們該如何解決這些問題呢？
答案：打字稿

多倫多證券交易所/TS

讓我們重新開始我們的解決方案，但這次是在 .tsx 或 Typescript 檔案中。我們可以先定義一個 useState() 函數並使用值來初始化：active。

現在看起來沒有什麼不同，但事實確實如此。讓我們更新 userStatus 值。

啊啊！正如您所看到的，它在一些設定函數周圍給了我們可怕的紅色波浪線錯誤線，但在我們設定字串值的函數上卻沒有。這是因為 Typescript 從初始值（即字串類型）推斷我們狀態的類型。

是的，這將阻止我們為userStatus 狀態設定任何非字串值，但它仍然不會阻止我們設定任何隨機字串值，而且我們仍然必須使用物件查找來記錄所有可能的選項，你可能會問。
 

讓我們來做一些「一舉兩得」。

顯式類型和泛型

在Typescript 中，我們可以建立自訂類型，它也支援泛型，它可以在React 中用於其鉤子定義，在我們的例子中是useState () 鉤子。

讓我們在 React 元件中建立一個新的 UserStatus 類型。

現在，讓我們在 useState 定義中使用此類型。

到目前為止，一切看起來都與我們在物件尋找方法中所做的類似，但 Typescript 的神奇之處在於我們開始使用 set 函數和狀態值。

1. 取得 userStatus 的型別定義。
   

2. setUserStatus 函數的自動完成。
   

3. 對有效值和無效值進行正確驗證。
   

看那個，

1. 我們只需將滑鼠懸停在 userStatus 上並查找其類型定義即可取得所有有效值的文件。
2. 但是，在使用 set 函數時，我們不需要查看狀態值的類型定義，因為它會自動為我們提供所有有效選項的自動完成功能。
3. 現在，它不僅會在設定非字串值時給我們帶來錯誤，還會為我們使用無效字串值帶來錯誤（即，它總是會因無效輸入而給出錯誤）。

結論

現在，您可能已經很好地感受到了 TypeScript 如何真正增強我們的開發體驗。我們在這裡僅通過一個簡單的示例觸及了表面，但想想我們正在構建的實際應用程序，使用 TypeScript 可能意味著更少的錯誤和更好的開發人員整體體驗。

我希望這篇文章能夠鼓勵您開始在所有 React 應用程式中使用 Typescript 並建立出色的 Web 體驗。

如果您喜歡這篇文章並想聯繫我，那麼您可以在 Linked 和 X/Twitter 上與我聯繫

以上是TypeScript 如何讓 React 變得更好：更流暢的開發者體驗，更少的錯誤（以 useState 為例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！