TypeScript 中的 typeof

一、TypeScript 中的 typeof

typeof 是 TypeScript 中的一个类型工具(本文章只讨论typeof在TypeScript中的用法，不讨论在JavaScript中的用法)，我认为最大的作用就是：在「值」和「类型」之间架起桥梁，让类型可以自动与真实数据保持同步。

特点：

1. 操作数仍是一个值（变量、常量）
2. 返回的是一个类型，而不是字符串
3. 只能用在类型位置（如 type 声明里）

举个栗子：

const user = { name: 'HopeBearer', age: 21 }// UserType 的类型等同于 { name: string; age: number }
type UserType = typeof user;const antherUser: UserType = {name: 'Retrouvailles',age: 21
}

二、使用场景

1. 从对象推导类型，避免重复

当我们写配置对象、接口返回值时，可以直接用 typeof 获取类型。

// config.ts
export const config = {host: 'localhost',port: 3306,username: 'HopeBearer',password: 'root123456'
}// db.ts
import { config } from './config'
function connectionToDatabase(Cfg: typeof config) {console.log('Conneting to:', Cfg.host, cfg.port)
}

这样写的好处就是避免手写冗长类型，config 改了类型也自动更新

2. 配合 keyof 做字段校验

想校验传入的key是否是对象里的合法字段

const userProfile = {id: 1,username: 'hopebearer',age: 21
}type UserProfileKeys = keyof typeof userProfile; // 'id' | 'username' | 'age'
function isValidKey(key: string): key is UserProfileKeys {return ['id', 'username', 'age'].includes(key);
}const testKey = 'username';
if (isValidKey(testKey)) {console.log(`key ${testKey} is valid!`)
}

3. 配合工具类型快速生成不同形态的类型

后端接口字段都可选，前端展示需要必填；有时需要只读视图。

const userFromAPI = {id: 1,name: 'hopebearer',age: 21
}
type User = typeof userFromAPI;// 可选参数：更新接口
type UserUpdatePayload = Partial<User>;// 只读参数：详情页视图
type ReadonlyUser = Readonly<User>;const payload: UserUpdatePayload = { name: 'newName' };
const readonlyUser: ReadonlyUser = userFromAPI;
// readonlyUser.name = 'test' // 报错 

4. 对类使用 typeof，拿到构造函数类型

想写一个工厂函数，根据传入的类动态创建实例。

class Dog {name: 'Dog';bark() { console.log('woof!') }
}type DogConstructor = typeof Dog; // 得到构造函数类型function createAnimal(Ctor: DogConstructor) {return new Ctor();
}const dog = createAnimal(Dog);
dog.bark();

5. 固定枚举值 + 字面量联合类型

有一个角色数组，只能使用固定值。

const roles = ['admin', 'editor', 'viewer'] as const;type Role = typeof roles[number]; // 'admin' | 'editor' | 'viewer'function setUserRole(role: Role) {console.log('Role set to:', role)
}setUserRole("admin"); // 正常执行
setUserRole("root");  // 报错

6. 自动推导 API 返回值类型

避免手写返回值类型，保证类型和真实数据一致。

async function fetchUser() {return {id: 1,name: "HopeBearer",age: 21}
}// 根据返回值类型type User = Awaited<ReturnType<typeof fetchUser>>;async function example() {const user: User = await fetchUser();console.log(user.name);
}

三、总结

搭配工具	用途
keyof	提取对象键名
Partial / Readonly / Required	动态生成可选、只读或必选类型
ReturnType / Awaited	提取函数返回值及 Promise 内部类型
as const + typeof + [number]	固定数组 → 联合类型（常用于枚举）
typeof 对类使用	得到构造函数类型（常用于工厂函数）