typeof 类型操作符

两种 typeof

JavaScript 里 typeof 是运行时操作符，返回值的类型字符串：

console.log(typeof "hello"); // "string"
console.log(typeof 42);      // "number"

TypeScript 在此基础上多了一层含义：当 typeof 出现在类型注解的位置（类型上下文）时，它不再是运行时操作符，而是类型操作符——从值的”形状”推导出类型。

const user = {
  name: "张三",
  age: 28,
  isAdmin: false
};

// 这是类型上下文中的 typeof：推导出 user 的结构类型
type User = typeof user;
// User = { name: string; age: number; isAdmin: boolean; }

typeof 用在类型位置能帮你避免重复写类型。值已经写了一遍了，类型就别再写第二遍了。

typeof 的典型场景

从变量提取类型

const colors = ["red", "green", "blue"] as const;
type Color = typeof colors[number];
// Color = "red" | "green" | "blue"

先用 typeof colors 拿到数组的类型，再用 [number] 索引访问拿到元素类型。这比手写 "red" | "green" | "blue" 更不容易出错——数组改了，类型自动跟着变。

与 ReturnType 联动

这是 typeof 最实用的搭配之一：拿到一个函数的类型，再提取它的返回值类型。

function createUser(name: string, age: number) {
  return {
    name,
    age,
    createdAt: new Date()
  };
}

// ReturnType 是内置工具类型，提取函数返回值的类型
// typeof createUser 是函数本身的类型
type User = ReturnType<typeof createUser>;
// User = { name: string; age: number; createdAt: Date; }

如果不用 typeof，你只能手动声明 User 类型，然后还要保证它和 createUser 的返回值同步——迟早会不一致。

从模块导入的类型

// settings.ts
export const defaultConfig = {
  port: 3000,
  host: "localhost",
  debug: false
};

// app.ts
import { defaultConfig } from "./settings";
type Config = typeof defaultConfig;
// Config = { port: number; host: string; debug: boolean; }

模块导出一个配置对象，别的文件想用它的类型，一行 typeof 就搞定了。

typeof 的限制

typeof 只能用在标识符或属性访问上，不能用于运行时计算出的值。换句话说，你不能 typeof 一个表达式的结果：

const msg = "hello";
type MsgType = typeof msg;           // ✅ 合法

// type Bad = typeof "hello";        // ❌ typeof 只能用于标识符
// type AlsoBad = typeof (1 + 1);    // ❌ 不能对表达式使用

// 属性的 typeof 是允许的
type LengthType = typeof msg.length; // ✅ number

你可以用一个枚举常量来解决：

const key = "age";
// type Age = Person[typeof key]; // ✅ 可以这样用

小结

• TypeScript 的 typeof 在类型上下文中使用，负责”值 → 类型”的推导
• typeof obj 获取对象的完整结构类型
• ReturnType<typeof fn> 是最经典的应用模式
• typeof 只能用于标识符和属性访问，不能用于表达式
• 有了 typeof，就不用把同一个结构写两遍了