TypeScript 之 Typeof Type Operator

冴羽發表於2021-11-30
TypeScript

前言

TypeScript 的官方文件早已更新，但我能找到的中文文件都還停留在比較老的版本。所以對其中新增以及修訂較多的一些章節進行了翻譯整理。

本篇整理自 TypeScript Handbook 中 「Typeof Type Operator」 章節。

本文並不嚴格按照原文翻譯，對部分內容也做了解釋補充。

typeof 型別操作符（The typeof type operator）

JavaScript 本身就有 typeof 操作符，你可以在表示式上下文中（expression context）使用：

// Prints "string"
console.log(typeof "Hello world");

而 TypeScript 新增的 typeof 方法可以在型別上下文（type context）中使用，用於獲取一個變數或者屬性的型別。

let s = "hello";
let n: typeof s;
// let n: string

如果僅僅用來判斷基本的型別，自然是沒什麼太大用，和其他的型別操作符搭配使用才能發揮它的作用。

舉個例子：比如搭配 TypeScript 內建的 ReturnTypep<T>。你傳入一個函式型別，ReturnTypep<T> 會返回該函式的返回值的型別：

type Predicate = (x: unknown) => boolean;
type K = ReturnType<Predicate>;
/// type K = boolean

如果我們直接對一個函式名使用 ReturnType ，我們會看到這樣一個報錯：

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<f>;

// 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

這是因為值（values）和型別（types）並不是一種東西。為了獲取值 f 也就是函式 f 的型別，我們就需要使用 typeof：

function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;
                    
// type P = {
//    x: number;
//    y: number;
// }

限制（Limitations）

TypeScript 有意的限制了可以使用 typeof 的表示式的種類。

在 TypeScript 中，只有對識別符號（比如變數名）或者他們的屬性使用 typeof 才是合法的。這可能會導致一些令人迷惑的問題：

// Meant to use = ReturnType<typeof msgbox>
let shouldContinue: typeof msgbox("Are you sure you want to continue?");
// ',' expected.

我們本意是想獲取 msgbox("Are you sure you want to continue?") 的返回值的型別，所以直接使用了 typeof msgbox("Are you sure you want to continue?")，看似能正常執行，但實際並不會，這是因為 typeof 只能對識別符號和屬性使用。而正確的寫法應該是：

ReturnType<typeof msgbox>

(注：原文到這裡就結束了)

對物件使用 typeof

我們可以對一個物件使用 typeof：

const person = { name: "kevin", age: "18" }
type Kevin = typeof person;

// type Kevin = {
//         name: string;
//         age: string;
// }

對函式使用 typeof

我們也可以對一個函式使用 typeof：

function identity<Type>(arg: Type): Type {
  return arg;
}

type result = typeof identity;
// type result = <Type>(arg: Type) => Type

對 enum 使用 typeof

在 TypeScript 中，enum 是一種新的資料型別，但在具體執行的時候，它會被編譯成物件。

enum UserResponse {
  No = 0,
  Yes = 1,
}

對應編譯的 JavaScript 程式碼為：

var UserResponse;
(function (UserResponse) {
    UserResponse[UserResponse["No"] = 0] = "No";
    UserResponse[UserResponse["Yes"] = 1] = "Yes";
})(UserResponse || (UserResponse = {}));

如果我們列印一下 UserResponse：

console.log(UserResponse);

// [LOG]: {
//   "0": "No",
//   "1": "Yes",
//   "No": 0,
//   "Yes": 1
// }

而如果我們對 UserResponse 使用 typeof：

type result = typeof UserResponse;

// ok
const a: result = {
      "No": 2,
      "Yes": 3
}

result 型別類似於：

// {
//    "No": number,
//  "YES": number
// }

不過對一個 enum 型別只使用 typeof 一般沒什麼用，通常還會搭配 keyof 操作符用於獲取屬性名的聯合字串：

type result = keyof typeof UserResponse;
// type result = "No" | "Yes"

TypeScript 系列

  1. TypeScript 之 Narrowing
  2. TypeScript 之 More on Functions
  3. TypeScript 之 Object Type
  4. TypeScript 之 Generics
  5. TypeScript 之 Keyof Type Operator

如果你對於 TypeScript 有什麼困惑或者其他想要了解的內容，歡迎與我交流，微信：「mqyqingfeng」，公眾號搜尋：「yayujs」或者「冴羽的JavaScript部落格」

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章