前言

TypeScript 的官方文档早已更新，但我能找到的中文文档都还停留在比较老的版本。所以对其中新增以及修订较多的一些章节进行了翻译整理。

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

本文并不严格按照原文翻译，对部分内容也做了解释补充。

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

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

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

而 TypeScript 添加的 typeof 方法可以在类型上下文（type context）中使用，用于获取一个变量或者属性的类型。

  1. let s = "hello";
  2. let n: typeof s;
  3. // let n: string

如果仅仅用来判断基本的类型，自然是没什么太大用，和其他的类型操作符搭配使用才能发挥它的作用。

举个例子：比如搭配 TypeScript 内置的 ReturnTypep<T>。你传入一个函数类型，ReturnTypep<T> 会返回该函数的返回值的类型：

  1. type Predicate = (x: unknown) => boolean;
  2. type K = ReturnType<Predicate>;
  3. /// type K = boolean

如果我们直接对一个函数名使用 ReturnType ，我们会看到这样一个报错：

  1. function f() {
  2.   return { x: 10, y: 3 };
  3. }
  4. type P = ReturnType<f>;
  6. // 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?

这是因为值（values）和类型（types）并不是一种东西。为了获取值 f 也就是函数 f 的类型，我们就需要使用 typeof：

  1. function f() {
  2.   return { x: 10, y: 3 };
  3. }
  4. type P = ReturnType<typeof f>;
  6. // type P = {
  7. //    x: number;
  8. //    y: number;
  9. // }

限制（Limitations）

TypeScript 有意的限制了可以使用 typeof 的表达式的种类。

在 TypeScript 中，只有对标识符（比如变量名）或者他们的属性使用 typeof 才是合法的。这可能会导致一些令人迷惑的问题：

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

我们本意是想获取 msgbox("Are you sure you want to continue?") 的返回值的类型，所以直接使用了 typeof msgbox("Are you sure you want to continue?")，看似能正常执行，但实际并不会，这是因为 typeof 只能对标识符和属性使用。而正确的写法应该是：

  1. ReturnType<typeof msgbox>

(注：原文到这里就结束了)

对对象使用 typeof

我们可以对一个对象使用 typeof：

  1. const person = { name: "kevin", age: "18" }
  2. type Kevin = typeof person;
  4. // type Kevin = {
  5. //         name: string;
  6. //         age: string;
  7. // }

对函数使用 typeof

我们也可以对一个函数使用 typeof：

  1. function identity<Type>(arg: Type): Type {
  2.   return arg;
  3. }
  5. type result = typeof identity;
  6. // type result = <Type>(arg: Type) => Type

对 enum 使用 typeof

在 TypeScript 中，enum 是一种新的数据类型，但在具体运行的时候，它会被编译成对象。

  1. enum UserResponse {
  2.   No = 0,
  3.   Yes = 1,
  4. }

对应编译的 JavaScript 代码为：

  1. var UserResponse;
  2. (function (UserResponse) {
  3.     UserResponse[UserResponse["No"] = 0] = "No";
  4.     UserResponse[UserResponse["Yes"] = 1] = "Yes";
  5. })(UserResponse || (UserResponse = {}));

如果我们打印一下 UserResponse：

  1. console.log(UserResponse);
  3. // [LOG]: {
  4. //   "0": "No",
  5. //   "1": "Yes",
  6. //   "No": 0,
  7. //   "Yes": 1
  8. // }

而如果我们对 UserResponse 使用 typeof：

  1. type result = typeof UserResponse;
  3. // ok
  4. const a: result = {
  5.       "No": 2,
  6.       "Yes": 3
  7. }
  9. result 类型类似于：
  11. // {
  12. //    "No": number,
  13. //  "YES": number
  14. // }

不过对一个 enum 类型只使用 typeof 一般没什么用，通常还会搭配 keyof 操作符用于获取属性名的联合字符串：

  1. type result = keyof typeof UserResponse;
  2. // 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，对作者也是一种鼓励。