【TS】1355- TS typeof 操作符原來(lái)有這 5 種用途！
阿寶哥精心準(zhǔn)備的《輕松學(xué) TypeScript》 視頻教程已經(jīng)更新到第十八期了，合集播放量已達(dá) 13.3W+。通過(guò)形象生動(dòng)的動(dòng)畫(huà)，讓你輕松搞懂 TypeScript 的難點(diǎn)和核心知識(shí)點(diǎn)！
在 JavaScript 中你可以通過(guò) typeof 操作符來(lái)獲取變量的類型，那么你知道在 TypeScript 中 typeof 操作符有哪些用途么？
本文阿寶哥將介紹 typeof 操作符的幾種常見(jiàn)的應(yīng)用場(chǎng)景，在以后的項(xiàng)目中，也許你就可以用得上了。
這是一個(gè)普通的 JavaScript 對(duì)象，在 TypeScript 中你可以使用 type 或 interface 來(lái)定義該對(duì)象的類型。有了該對(duì)象類型之后，你就可以利用 TypeScript 內(nèi)置的工具類型，比如 Partial、Required、Pick 或 Readonly 等來(lái)處理對(duì)象類型，從而滿足不同的業(yè)務(wù)需求。
const lolo = {
name: "lolo",
age: 7,
address: {
province: "福建",
city: "廈門",
},
};
interface Person {
name: string;
age: number;
address: {
province: string;
city: string;
};
}
對(duì)于簡(jiǎn)單的對(duì)象來(lái)說(shuō)，這也許不算什么。但對(duì)于嵌套層級(jí)比較深的復(fù)雜大對(duì)象來(lái)說(shuō)，手動(dòng)定義其類型會(huì)令人腦殼疼。針對(duì)這個(gè)問(wèn)題，你可以使用 typeof 操作符：
type Person = typeof lolo;
type Address = typeof lolo["address"];
相比前面手動(dòng)定義類型，使用 typeof 操作符之后是不是覺(jué)得簡(jiǎn)單很多。在 TypeScript 中，枚舉類型是一種特殊的類型，它會(huì)被編譯成普通的 JavaScript 對(duì)象：
enum HttpMethod {
Get,
Post,
}
"use strict";
var HttpMethod;
(function (HttpMethod) {
HttpMethod[HttpMethod["Get"] = 0] = "Get";
HttpMethod[HttpMethod["Post"] = 1] = "Post";
})(HttpMethod || (HttpMethod = {}));
因此，你也可以對(duì)枚舉類型使用 typeof 操作符。但這往往沒(méi)有多大的實(shí)際用途，處理枚舉類型時(shí)，一般還會(huì)搭配 keyof 操作符：
const method: typeof HttpMethod = {
Get: 0,
Post: 1,
};
type Method = keyof typeof HttpMethod; // "Get" | "Post"
由以上結(jié)果可知，利用 keyof 和 typeof 操作符，你就可以獲取枚舉類型的所有屬性名。
在日常工作中，typeof 操作符還有另一個(gè)比較常見(jiàn)的使用場(chǎng)景。即利用它來(lái)獲取函數(shù)對(duì)象的類型，在獲取對(duì)應(yīng)的函數(shù)類型之后，你可以繼續(xù)利用 TypeScript 內(nèi)置的 ReturnType 和 Parameters 工具類型來(lái)分別獲取函數(shù)的返回值類型和參數(shù)類型：
function add(a: number, b: number) {
return a + b;
}
type AddType = typeof add; // (a: number, b: number) => number
type AddReturnType = ReturnType<AddType> // number
type AddParamsType = Parameters<AddType> // [a: number, b: number]
既然 typeof 操作符可以處理函數(shù)對(duì)象，那么它可以處理 Class 么？答案是可以的。
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
// new (x: number, y: number) => Point
function createPoint(Constructor: typeof Point, x: number, y: number) {
return new Constructor(x, y);
}
在以上代碼中，createPoint 是一個(gè)工廠函數(shù)，用于快速創(chuàng)建 Point 類的實(shí)例。通過(guò) typeof 操作符，你就可以獲取 Point 類對(duì)應(yīng)的構(gòu)造簽名，從而實(shí)現(xiàn)相應(yīng)的類型校驗(yàn)。在定義 Constructor 參數(shù)類型時(shí)，如果不使用 typeof 操作符的話，將會(huì)出現(xiàn)以下錯(cuò)誤信息：
function createPoint(Constructor: Point, x: number, y: number) {
return new Constructor(x, y); // Error：類型 "Point" 沒(méi)有構(gòu)造簽名。ts(2351)
}
此外，在使用 typeof 操作符的過(guò)程中，如果你想要獲取更精確的類型，那么你可以結(jié)合 TypeScript 3.4 版本中引入的 const 斷言。具體的使用方式如下：
let requestMethod = "Get";
let requestMethod2 = "Get" as const;
type R0 = typeof requestMethod; // string
type R1 = typeof requestMethod2; // "Get"
let user = {
id: 666,
name: "阿寶哥",
};
let user2 = {
id: 666,
name: "阿寶哥",
} as const;
// { id: number; name: string; }
type U0 = typeof user;
// type U1 = { readonly id: 666; readonly name: "阿寶哥"; }
type U1 = typeof user2;
由以上結(jié)果可知，使用 const 斷言之后，再利用 typeof 操作符，我們就可以獲得更精確的類型。
關(guān)于 const 斷言相關(guān)的知識(shí)點(diǎn)，感興趣的話，你可以自行了解一下。而如果你對(duì)前面使用過(guò)的 keyof 操作符還不了解的話，可以觀看 “TS 內(nèi)置工具類型中的 keyof 操作符有啥用？” 這篇文章。
掃碼查看 輕松學(xué) TypeScript 系列視頻教程
（目前已更新 18 期）
你喜歡以這種形式學(xué) TS 么？喜歡的話，記得點(diǎn)贊與收藏喲。