关于javascript:TypeScript-之-Typeof-Type-Operator

前言

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，对作者也是一种激励。