如何在TypeScript中創建自定義類型

介紹

TypeScript是JavaScript語言的擴展，它使用JavaScript運行時和編譯時類型檢查器。

這種組合允許開發人員使用完整的JavaScript生態系統和語言功能，同時還添加可選的靜態類型檢查、枚舉數據類型、類和接口。 這些特性為開發人員提供了JavaScript動態特性的靈活性，但也允許更可靠的代碼庫，其中可以在編譯時使用類型信息來檢測可能在運行時導致錯誤或其他意外行為的問題。

額外的類型信息還提供了更好的代碼庫文檔，并在文本編輯器中改進了IntelliSense（代碼完成、參數信息和類似的內容輔助功能）。 隊友可以準確地確定任何變量或函數參數的預期類型，而無需通過實現本身。

準備工作

要遵循本教程，我們將需要：

1)、一個環境，我們可以在其中執行TypeScript程序以跟隨示例。 要在本地計算機上進行設置，我們將需要以下內容。

2）、如果你不想在本地機器上創建TypeScript環境，你可以使用官方的TypeScriptPlayground來跟隨。

3）、我們將需要足夠的JavaScript知識，尤其是ES6+語法，例如解構、rest運算符和導入/導出。 有關JavaScript的更多主題信息，建議閱讀我們的JavaScript系列教程。

4）、本教程將參考支持TypeScript并顯示內聯錯誤的文本編輯器的各個方面。 這不是使用TypeScript所必需的，但確實可以更多地利用TypeScript功能。 為了獲得這些好處，我們可以使用像VisualStudioCode這樣的文本編輯器，它完全支持開箱即用的TypeScript。 我們也可以在TypeScriptPlayground中嘗試這些好處。

本教程中顯示的所有示例都是使用TypeScript4.2.2版創建的。

創建自定義類型

自定義類型語法

在TypeScript中，創建自定義類型的語法是使用type關鍵字，后跟類型名稱，然后使用類型屬性分配給{}塊。采取以下措施：

語法類似于對象文字，其中鍵是屬性的名稱，值是該屬性應畝敬具有的類型。 這定義了一個Programmer類型，迅遲慎它必須是一個對象，其name鍵保存一個字符串值，并且knownFor鍵保存一個字符串數組。

如前面的示例所示，我們可以使用;作為每個屬性之間的分隔符。也可以使用逗號、,或完全省略分隔符，如下所示：

使用自定義類型與使用任何基本類型相同。添加一個雙冒號，然后添加我們的類型名稱：

ada常量現在將通過類型檢查器而不會引發錯誤。

如果我們在任何完全支持TypeScript的編輯器中編寫此示例，例如在TypeScriptPlayground中，編輯器將建議該對象期望的字段及其類型，如下面的動畫所示：

如果我們使用TSDoc格式（一種流行的TypeScript注釋文檔樣式）向字段添加注釋，則在代碼完旦嘩成中也建議使用它們。使用以下代碼并在注釋中進行解釋：

注釋描述現在將與字段建議一起出現：

TypeScript編譯器(tsc)將顯示錯誤2322：

如果我們省略了我們的類型所需的任何屬性，如下所示：

TypeScript編譯器將給出錯誤2741：

添加原始類型中未指定的新屬性也會導致錯誤：

在這種情況下，顯示的錯誤是2322：

嵌套自定義類型

我們還可以將自定義類型嵌套在一起。 想象一下，我們有一個Company類型，它有一個符合Person類型的manager字段。 我們可以像這樣創建這些類型：

然后，我們可以像這樣創建一個Company類型的值：

我們可以省略manager常量中的類型，因為它與Person類型具有相同的形狀。 當我們使用與manager屬性類型所期望的形狀相同的對象時，TypeScript不會引發錯誤，即使它沒有明確設置為Person類型。

以下不會引發錯誤：

我們甚至可以更進一步，直接在company對象字面量中設置manager：

所有這些場景都是有效的。

如果在支持TypeScript的編輯器中編寫這些示例，我們會發現編輯器將使用可用的類型信息來記錄自己。對于前面的示例，只要我們打開manager的{}對象文字，編輯器就會期望一個name類型的字符串屬性：

現在，我們已經完成了一些使用固定數量的屬性創建我們自己的自定義類型的示例，接下來，我們將嘗試向我們的類型添加可選屬性。

可選屬性

要將可選屬性添加到類型，請添加?屬性的修飾符。使用前面部分中的Programmer類型，通過添加以下突出顯示的字符將knownFor屬性轉換為可選屬性：

在這里我們要添加?屬性名稱后的修飾符。這使得TypeScript將此屬性視為可選的，并且在我們省略該屬性時不會引發錯誤：

這將毫無錯誤地通過。

既然，我們已經知道如何向類型添加可選屬性，那么，現在該學習如何創建一個可以容納無限數量的字段的類型了。

可索引類型

在這里，我們使用大括號({})中的類型定義塊創建一個普通類型，然后以[key:typeOfKeys]:typeOfValues的格式添加一個特殊屬性，其中typeOfKeys是該對象的鍵應具有的類型，typeOfValues是這些鍵的值應該具有的類型。

然后，我們可以像任何其他類型一樣正常使用它：

使用可索引類型，我們可以分配無限數量的屬性，只要它們與索引簽名匹配，索引簽名是用于描述可索引類型的鍵和值的類型的名稱。 在這種情況下，鍵具有字符串類型，值具有任何類型。

還可以將始終需要的特定屬性添加到可索引類型中，就像使用普通類型一樣。在以下突出顯示的代碼中，我們將狀態屬性添加到我們的數據類型：

這意味著數據類型對象必須有一個帶有布爾值的狀態鍵才能通過類型檢查器。

現在，我們可以創建具有不同數量元素的對象，我們可以繼續學習TypeScript中的數組，它可以具有自定義數量的元素或更多。

創建元素數量或更多的數組

使用TypeScript中可用的數組和元組基本類型，我們可以為應該具有最少元素的數組創建自定義類型。 在本節中，我們將使用TypeScript剩余運算符...來執行此操作。

想象一下，我們有一個負責合并多個字符串的函數。 此函數將采用單個數組參數。 這個數組必須至少有兩個元素，每個元素都應該是字符串。 我們可以使用以下內容創建這樣的類型：

MergeStringsArray類型利用了這樣一個事實，即我們可以將rest運算符與數組類型一起使用，并將其結果用作元組的第三個元素。 這意味著前兩個字符串是必需的，但之后的其他字符串元素不是必需的。

如果一個數組的字符串元素少于兩個，它將是無效的，如下所示：

TypeScript編譯器在檢查此數組時將給出錯誤2322：

到目前為止，我們已經從基本類型的組合中創建了自己的自定義類型。 在下一節中，我們將通過將兩個或多個自定義類型組合在一起來創建一個新類型。

組合類型

在這里我們將介紹兩種組合類型的方法。 這些將使用聯合運算符傳遞符合一種或另一種類型的任何數據，并使用交集運算符傳遞滿足兩種類型中所有條件的數據。

unions是使用|創建的(pipe)運算符，它表示可以具有聯合中任何類型的值。舉個例子：

在此代碼中，ProductCode可以是字符串或數字。以下代碼將通過類型檢查器：

unions類型可以從任何有效TypeScript類型的聯合中創建。

Intersections

我們可以使用相交類型來創建一個全新的類型，該類型具有相交在一起的所有類型的所有屬性。

例如，假設我們有一些公共字段始終出現在API調用的響應中，然后是某些端點的特定字段：

在這種情況下，所有響應都將具有status和isValid屬性，但只有用戶響應將具有附加的用戶字段。要使用交集類型創建特定API用戶調用的結果響應，請結合使用StatusResponse和GetUserResponse類型：

ApiGetUserResponse類型將具有StatusResponse中可用的所有屬性以及GetUserResponse中可用的屬性。 這意味著數據只有在滿足兩種類型的所有條件時才會通過類型檢查器。 以下示例將起作用：

另一個示例是數據庫客戶端為包含連接的查詢返回的行類型。我們將能夠使用交集類型來指定此類查詢的結果：

稍后，如果我們使用fetchRowsFromDatabase()函數，如下所示：

生成的常量joinedRows必須有一個role屬性和一個name屬性，它們都保存字符串值，以便通過類型檢查器。

使用模板字符串類型

從TypeScript4.1開始，可以使用模板字符串類型創建類型。 這將允許我們創建檢查特定字符串格式的類型，并為我們的TypeScript項目添加更多自定義。

要創建模板字符串類型，我們使用的語法與創建模板字符串文字時使用的語法幾乎相同。 但是，我們將在字符串模板中使用其他類型而不是值。

想象一下，我們想創建一個傳遞所有以get開頭的字符串的類型。我們可以使用模板字符串類型來做到這一點：

myString將在此處通過類型檢查器，因為字符串以get開頭，然后是一個附加字符串。

如果我們將無效值傳遞給我們的類型，例如以下invalidStringValue：

TypeScript編譯器會給我們錯誤2322：

使用模板字符串創建類型可幫助我們根據項目的特定需求自定義類型。 在下一節中，我們將嘗試類型斷言，它為其他無類型數據添加類型。

UsingTypeAssertions

如果我們想讓我們的代碼在這些場景中是類型安全的，我們可以使用類型斷言，這是一種將變量類型更改為另一種類型的方法。 通過在變量后添加asNewType可以實現類型斷言。 這會將變量的類型更改為as關鍵字之后指定的類型。

舉個例子：

value的類型為any，但是，使用as關鍵字，此代碼將value強制為string類型。

注意：要斷言TypeA的變量具有TypeB類型，TypeB必須是TypeA的子類型。 幾乎所有的TypeScript類型，除了never，都是any的子類型，包括unknown。

實用程序類型

在前面的部分中，我們查看了從基本類型創建自定義類型的多種方法。 但有時我們不想從頭開始創建一個全新的類型。 有時最好使用現有類型的一些屬性，甚至創建一個與另一種類型具有相同形狀但所有屬性都設置為可選的新類型。

使用TypeScript提供的現有實用程序類型，所有這些都是可能的。 本節將介紹其中一些實用程序類型；有關所有可用的完整列表，請查看TypeScript手冊的實用程序類型部分。

所有實用程序類型都是通用類型，我們可以將其視為接受其他類型作為參數的類型。 可以通過使用語法向其傳遞類型參數來識別通用類型。

Record實用程序類型可用于以比使用之前介紹的索引簽名更簡潔的方式創建可索引類型。

在我們的可索引類型示例中，我們具有以下類型：

我們可以使用Record實用程序類型而不是像這樣的可索引類型：

Record泛型的第一個類型參數是每個鍵的類型。在以下示例中，所有鍵都必須是字符串：

第二個類型參數是這些鍵的每個值的類型。以下將允許值是任何值：

Omit實用程序類型可用于基于另一種類型創建新類型，同時排除結果類型中不需要的一些屬性。

假設我們有以下類型來表示數據庫中用戶行的類型：

如果在我們的代碼中，我們要檢索除addressId之外的所有字段，則可以使用Omit創建沒有該字段的新類型：

Omit的第一個參數是新類型所基于的類型。 第二個是我們要省略的字段。

如果我們在代碼編輯器中將鼠標懸停在UserRowWithoutAddressId上，我們會發現它具有UserRow類型的所有屬性，但我們省略了這些屬性。

我們可以使用字符串聯合將多個字段傳遞給第二個類型參數。假設我們還想省略id字段，我們可以這樣做：

Pick實用程序類型與Omit類型完全相反。 我們無需說出要省略的字段，而是指定要從其他類型使用的字段。

使用我們之前使用的相同UserRow：

假設我們只需要從數據庫行中選擇電子郵件鍵。我們可以像這樣使用Pick創建這樣的類型：

Pick這里的第一個參數指定了新類型所基于的類型。 第二個是我們想要包含的鍵。

這將等同于以下內容：

我們還可以使用字符串聯合來選擇多個字段：

使用相同的UserRow示例，假設我們想創建一個新類型，該類型與我們的數據庫客戶端可以用來將新數據插入用戶表中的對象相匹配，但有一個小細節：我們的數據庫具有所有字段的默認值，所以，我們是不需要通過其中任何一個。

為此，我們可以使用Partial實用程序類型來選擇性地包括基本類型的所有字段。

我們現有的類型UserRow具有所需的所有屬性：

要創建所有屬性都是可選的新類型，我們可以使用Partial實用程序類型，如下所示：

這與擁有這樣的UserRowInsert完全相同：

實用程序類型是一個很好的資源，因為它們提供了一種比從TypeScript中的基本類型創建類型更快的方法來構建類型。

總結

創建我們自己的自定義類型來表示我們自己的代碼中使用的數據結構，可以為我們的項目提供靈活且有用的TypeScript解決方案。 除了從整體上提高我們自己代碼的類型安全性之外，將我們自己的業務對象類型化為代碼中的數據結構將增加代碼庫的整體文檔，并在與團隊成員一起工作時改善我們自己的開發人員體驗相同的代碼庫。

互聯網真是個神奇的地方，它不僅哪余鬧教你如何寫代碼，還提供了很多有用的工具，在開發的各個階段幫你節約寶貴時間。 本文將列出9個有用的在線工具，對任何開發人員而言，它們都會是得力助手（排名不分先后）。

老實說，盡管我做了很多前端開發工作，但還是不太擅長使用CSS。 EnjoyCSS是一款非常簡單的工具，是我在困難時期的救星。 它為用戶提供了簡單的UI，讓用戶可以設計元素，并提供對應的CSS輸出。

Prettier是一種代碼格式化程序，支李罩持JavaScript，包括ES2017、JSX、Angular、Vue、Flow和TypeScript等。 它會用符合標準并遵循最佳實踐的樣式替換掉你原來的樣式。 這個方便的工具在我們的IDE中非常流行，但是它也有自己的在線版本，你可以在里面優化你的代碼。

從我踏入前端開發起，Postman就一直是我的必備開發工具之一。 它能在后端檢查我的端點，非常好用。 它的出色表現讓我把它放到了這里。 它包含的端點包括GET、POST、DELETE、OPTIONS和PUT之類。 可以稱之為絕對不能錯過的一款工具。

據ChidumeNnamdi稱，這是所有用戶最喜歡的在線IDE工具。 主要原因是它將我們最喜歡和最常用的IDE——也就是VisualStudioCode，引入了Web端。

StackBlitz允許你一鍵設置Angular、React、Ionic、TypeScript、RxJS、Svelte和其他JavaScript框架。 一鍵設置這個功能意味著開發者可以在極短的時間內開始編碼。 我發現這款工具非常有用，尤其是在線上嘗試示例代碼段或庫時。 你可能沒有時間從頭開始創建一個新項目來嘗試一項新功能。 有了StackBlitz，你只需不到幾分鐘的時間就可以試用新的NPM軟件包，而無需從頭開始在本地創建項目。

軟件開發的一項基本原則是代碼可重用性。 這可以減少你的開發工作，因為你無需從頭開始構建每個組件。

這正是所做的。 它使你可以共享可重用的代碼組件和代碼片段，從而減少開銷并加快開發流程。

它還允許在團隊之間共享組件，這使你的團隊可以與其他團隊更好地協作。

“組件是你的設計系統。 共同打造更好的產品。 ”—

正如所提到的，這一組件平臺也適合用作毀悶設計系統構建器。 它能讓你的開發人員和設計師團隊共同工作，是從頭開始構建設計系統的理想工具。

現在支持React、Vue、Angular、Node等JavaScript框架。

CanIUse是一款在線工具，使用起來非常方便，因為它讓你可以了解所實現的特性是否與你希望使用的瀏覽器目標相兼容。

很多開發者都會遇到一個很鬧心的問題，那就是開發的應用程序中的某些特性在瀏覽器上的支持與兼容問題，明明在這個瀏覽器可以正常使用，換了一個瀏覽器之后就不支持了。 我同樣有這樣的困擾，在遇到過很多次這個問題之后，我開始牢記檢查瀏覽器兼容性的必要步驟。 舉一個例子：我的投資組合項目中的某項特性在Safari瀏覽器上并不受支持。 直到項目部署幾個月后我才知道這件事。

為了看看這款工具是怎么工作的，我們來檢查一下哪些瀏覽器支持WebP圖片格式。

如你所見，目前Safari和IE不支持。 這意味著你應該為不兼容的瀏覽器提供一個后備選項。