讓我們從一個場景和與之相關的任務開始。
我們有一個帶有狀態欄的訊息應用程序，可以顯示用戶的當前狀態並允許他們更新它。我們必須新增一個下拉式選單，使用者可以從中變更其狀態，並使用 useState() 在 UI 中顯示和更新使用者的目前狀態。
為了簡單起見，我們在本文中僅關注 useState 實現，在本文結束時，您將了解即使對於一個簡單的範例，TypeScript 也是一個更強大的選項。
我們必須定義一個 useState() 來儲存和更新 userStatus，並使用五個可能的狀態選項之一進行初始化（假設 active）。
所有可能的選項是：
這是一個非常簡單的任務，對吧？我們要做的就是定義一個 useState 並將其初始化為 active，然後使用 set 函數更新狀態，我們就完成了。
但是等等！當有人審查我的代碼或稍後訪問這段代碼時（例如 1 週、2 週、1 個月、6 個月或其他時間後）會發生什麼，他們如何知道所有可能/有效的選項是什麼？
啊啊！是的，我們可以在 useState 旁邊添加註釋，讓他們知道這些都是可能的選項。
但是，這不是一個好的解決方案，對吧？那麼，我們該如何改進呢？
物件查找對於我們的問題來說是一個非常好的解決方案。因此，讓我們從定義一個名為 UserStatus 的物件查找開始，並使用它來設定我們的 userStatus 值。
現在，讓我們更新 useState 定義。
現在，讓我們嘗試更新狀態。
哦！看看，現在我們在編輯器中獲得了自動完成功能，並且可以透過查看 UserStatus 的定義來檢查 userStatus 的所有可能/有效值。
儘管物件查找方法似乎解決了我們的問題，並且絕對是比僅添加註釋更好的解決方案，但它仍然存在兩個主要問題：
那麼，我們該如何解決這些問題呢？
答案：打字稿
讓我們重新開始我們的解決方案，但這次是在 .tsx 或 Typescript 檔案中。我們可以先定義一個 useState() 函數並使用值來初始化：active。
現在看起來沒有什麼不同，但事實確實如此。讓我們更新 userStatus 值。
啊啊！正如您所看到的，它在一些設定函數周圍給了我們可怕的紅色波浪線錯誤線，但在我們設定字串值的函數上卻沒有。這是因為 Typescript 從初始值（即字串類型）推斷我們狀態的類型。
是的，這將阻止我們為userStatus 狀態設定任何非字串值，但它仍然不會阻止我們設定任何隨機字串值，而且我們仍然必須使用物件查找來記錄所有可能的選項，你可能會問。
讓我們來做一些「一舉兩得」。
在Typescript 中，我們可以建立自訂類型，它也支援泛型，它可以在React 中用於其鉤子定義，在我們的例子中是useState () 鉤子。
讓我們在 React 元件中建立一個新的 UserStatus 類型。
現在，讓我們在 useState 定義中使用此類型。
到目前為止，一切看起來都與我們在物件尋找方法中所做的類似，但 Typescript 的神奇之處在於我們開始使用 set 函數和狀態值。
取得 userStatus 的型別定義。
setUserStatus 函數的自動完成。
對有效值和無效值進行正確驗證。
看那個，
現在，您可能已經很好地感受到了 TypeScript 如何真正增強我們的開發體驗。我們在這裡僅通過一個簡單的示例觸及了表面，但想想我們正在構建的實際應用程序，使用 TypeScript 可能意味著更少的錯誤和更好的開發人員整體體驗。
我希望這篇文章能夠鼓勵您開始在所有 React 應用程式中使用 Typescript 並建立出色的 Web 體驗。
如果您喜歡這篇文章並想聯繫我，那麼您可以在 Linked 和 X/Twitter 上與我聯繫
以上是TypeScript 如何讓 React 變得更好：更流暢的開發者體驗，更少的錯誤（以 useState 為例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
