typeof 操作符

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

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

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

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

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

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

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

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

function f() {
    return { x: 10, y: 3 };
}
type P = ReturnType; // '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;

// type P = {
//    x: number;
//    y: number;
// }

在 JavaScript 中，所有的可以由我们自主命名的，都可以称为是标识符。例如：变量名、函数名、属性名都属于标识符。

标识符命名一个标识符时需要遵守如下的规则:

• 标识符中可以含有字母、数字、_、$。标识符不能以数字开头。
• 标识符不能是 ES 中的关键字或保留字。
• 标识符一般都采用驼峰命名法（首字母小写，每个单词开头大写，其余字母小写）。

限制

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

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

// Meant to use = ReturnType
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 对象

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

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

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

typeof 函数

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

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

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

type resultType = ReturnType);
// type resultType = Type

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"

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com