如何在TypeScript中創(chuàng)建自定義類型

介紹

TypeScript是JavaScript語言的擴(kuò)展，它使用JavaScript運(yùn)行時和編譯時類型檢查器。

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

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

準(zhǔn)備工作

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

1)、一個環(huán)境，我們可以在其中執(zhí)行TypeScript程序以跟隨示例。 要在本地計算機(jī)上進(jìn)行設(shè)置，我們將需要以下內(nèi)容。

2）、如果你不想在本地機(jī)器上創(chuàng)建TypeScript環(huán)境，你可以使用官方的TypeScriptPlayground來跟隨。

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

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

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

創(chuàng)建自定義類型

自定義類型語法

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

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

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

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

ada常量現(xiàn)在將通過類型檢查器而不會引發(fā)錯誤。

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

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

注釋描述現(xiàn)在將與字段建議一起出現(xiàn)：

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

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

TypeScript編譯器將給出錯誤2741：

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

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

嵌套自定義類型

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

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

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

以下不會引發(fā)錯誤：

我們甚至可以更進(jìn)一步，直接在company對象字面量中設(shè)置manager：

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

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

現(xiàn)在，我們已經(jīng)完成了一些使用固定數(shù)量的屬性創(chuàng)建我們自己的自定義類型的示例，接下來，我們將嘗試向我們的類型添加可選屬性。

可選屬性

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

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

這將毫無錯誤地通過。

既然，我們已經(jīng)知道如何向類型添加可選屬性，那么，現(xiàn)在該學(xué)習(xí)如何創(chuàng)建一個可以容納無限數(shù)量的字段的類型了。

可索引類型

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

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

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

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

這意味著數(shù)據(jù)類型對象必須有一個帶有布爾值的狀態(tài)鍵才能通過類型檢查器。

現(xiàn)在，我們可以創(chuàng)建具有不同數(shù)量元素的對象，我們可以繼續(xù)學(xué)習(xí)TypeScript中的數(shù)組，它可以具有自定義數(shù)量的元素或更多。

創(chuàng)建元素數(shù)量或更多的數(shù)組

使用TypeScript中可用的數(shù)組和元組基本類型，我們可以為應(yīng)該具有最少元素的數(shù)組創(chuàng)建自定義類型。 在本節(jié)中，我們將使用TypeScript剩余運(yùn)算符...來執(zhí)行此操作。

想象一下，我們有一個負(fù)責(zé)合并多個字符串的函數(shù)。 此函數(shù)將采用單個數(shù)組參數(shù)。 這個數(shù)組必須至少有兩個元素，每個元素都應(yīng)該是字符串。 我們可以使用以下內(nèi)容創(chuàng)建這樣的類型：

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

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

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

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

組合類型

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

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

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

unions類型可以從任何有效TypeScript類型的聯(lián)合中創(chuàng)建。

Intersections

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

例如，假設(shè)我們有一些公共字段始終出現(xiàn)在API調(diào)用的響應(yīng)中，然后是某些端點(diǎn)的特定字段：

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

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

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

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

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

使用模板字符串類型

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

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

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

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

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

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

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

UsingTypeAssertions

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

舉個例子：

value的類型為any，但是，使用as關(guān)鍵字，此代碼將value強(qiáng)制為string類型。

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

實用程序類型

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

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

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

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

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

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

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

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

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

假設(shè)我們有以下類型來表示數(shù)據(jù)庫中用戶行的類型：

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

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

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

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

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

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

假設(shè)我們只需要從數(shù)據(jù)庫行中選擇電子郵件鍵。我們可以像這樣使用Pick創(chuàng)建這樣的類型：

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

這將等同于以下內(nèi)容：

我們還可以使用字符串聯(lián)合來選擇多個字段：

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

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

我們現(xiàn)有的類型UserRow具有所需的所有屬性：

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

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

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

總結(jié)

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

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

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

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

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

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

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

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

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

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

“組件是你的設(shè)計系統(tǒng)。 共同打造更好的產(chǎn)品。 ”—

正如所提到的，這一組件平臺也適合用作毀悶設(shè)計系統(tǒng)構(gòu)建器。 它能讓你的開發(fā)人員和設(shè)計師團(tuán)隊共同工作，是從頭開始構(gòu)建設(shè)計系統(tǒng)的理想工具。

現(xiàn)在支持React、Vue、Angular、Node等JavaScript框架。

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

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

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

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