快捷導(dǎo)航

TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解

更新時(shí)間：2022年10月24日 08:37:25 作者：github_is_geeksKai

這篇文章主要為大家介紹了TypeScript?Typeof運(yùn)算符的5個(gè)實(shí)用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在 JavaScript 中，你可以通過操作符獲取變量的類型typeof，那么你知道typeofTypeScript 中使用的是什么操作符嗎？在本文中，我將介紹 typeof 運(yùn)算符的 5 個(gè)常見應(yīng)用場(chǎng)景，你可能會(huì)在以后的項(xiàng)目中使用它們。

1.獲取對(duì)象的類型

對(duì)象是一個(gè)普通的manJavaScript 對(duì)象，在 TypeScript 中你可以使用類型或接口來定義對(duì)象的類型。使用這種對(duì)象類型，您可以使用 TypeScript 的內(nèi)置實(shí)用程序類型，例如 Partial、Required、Pick 或 Readonly，來處理對(duì)象類型以滿足不同的需求。

對(duì)于簡(jiǎn)單的對(duì)象，這可能沒什么大不了的。但是對(duì)于嵌套層次更深的大型復(fù)雜對(duì)象，手動(dòng)定義它們的類型可能會(huì)讓人麻木。要解決這個(gè)問題，可以使用 typeof 運(yùn)算符。

type Person = typeof man;
type Address = Person["address"];

與之前手動(dòng)定義類型相比，使用 typeof 運(yùn)算符變得容易得多。Person["address"]是一種索引訪問類型，用于在另一種類型（Person 類型）上查找特定屬性（地址）。

2.獲取一個(gè)將所有枚舉鍵表示為字符串的類型

在 TypeScript 中，枚舉類型是編譯成常規(guī) JavaScript 對(duì)象的特殊類型：

因此，您也可以typeof在枚舉類型上使用運(yùn)算符。但這通常沒有太大的實(shí)際用途，在處理枚舉類型時(shí)，通常與keyof運(yùn)算符結(jié)合使用：

3.獲取函數(shù)對(duì)象的類型

還有另一種更常見的場(chǎng)景，在您的工作中使用 typeof 運(yùn)算符。獲取到對(duì)應(yīng)的函數(shù)類型后，可以繼續(xù)使用TypeScript內(nèi)置的ReturnType和Parameters實(shí)用類型分別獲取函數(shù)的返回值類型和參數(shù)類型。

4.獲取類對(duì)象的類型

既然typeof操作符可以處理函數(shù)對(duì)象，那么它可以處理Class對(duì)象嗎？答案是肯定的。

在上面的代碼中，createPoint是一個(gè)創(chuàng)建 Point 類實(shí)例的工廠函數(shù)。通過typeof操作符可以獲取Point類對(duì)應(yīng)的構(gòu)造簽名，從而實(shí)現(xiàn)對(duì)應(yīng)的類型校驗(yàn)。在定義Constructor的參數(shù)類型時(shí)，如果沒有使用typeof操作符，會(huì)出現(xiàn)如下錯(cuò)誤信息：