在 TypeScript 这门为 JavaScript 添砖加瓦的编程语言中，typeof 是一个至关重要的类型操作符。它如同一位精准的 "类型侦探"，能够在编译阶段捕获变量的类型信息，为代码的类型安全保驾护航。无论是基础的数据类型判断，还是在复杂的类型推导场景中，typeof 都扮演着不可或缺的角色。接下来，我们将从多个维度深入剖析 typeof 的各种用法、应用场景以及进阶技巧，帮助你全面掌握这一强大的类型工具。
一、typeof 的基础用法：获取变量的类型标识
在 TypeScript 中，typeof 最基本的功能就是获取变量或表达式的类型，从而在类型注解或类型推导中使用该类型。它的语法形式非常简洁：typeof <变量或表达式>。下面我们通过一系列示例来理解其基础应用。
（一）对基本数据类型变量使用 typeof
对于 JavaScript 中的基本数据类型，typeof 能够准确地捕获其对应的 TypeScript 类型：
typescript
// 字符串类型
const str = 'TypeScript';
type StrType = typeof str; // 推导为 string 类型
// 数字类型
const num = 100;
type NumType = typeof num; // 推导为 number 类型
// 布尔类型
const isTrue = true;
type BoolType = typeof isTrue; // 推导为 boolean 类型
// null 类型
const n = null;
type NullType = typeof n; // 推导为 null 类型
// undefined 类型
let u;
type UndefinedType = typeof u; // 推导为 undefined 类型
// Symbol 类型
const sym = Symbol('unique');
type SymType = typeof sym; // 推导为 symbol 类型从上述示例可以看出，当对基本数据类型的变量使用 typeof 时，TypeScript 会推导出对应的基础类型。需要注意的是，null 和 undefined 在 TypeScript 中默认是可选的类型，这一点在使用时需要特别留意。
（二）对对象类型变量使用 typeof
除了基本数据类型，typeof 也能很好地处理对象类型的变量，捕获其具体的结构类型：
typescript
// 普通对象
const person = {
name: 'Alice',
age: 25,
isDeveloper: true
};
type PersonType = typeof person;
// 推导为 { name: string; age: number; isDeveloper: boolean; }
// 数组对象
const numbers = [1, 2, 3, 4];
type NumbersType = typeof numbers; // 推导为 number[]
// 函数对象
function add(a: number, b: number): number {
return a + b;
}
type AddFuncType = typeof add;
// 推导为 (a: number, b: number) => number
// Date 对象
const date = new Date();
type DateType = typeof date; // 推导为 Date在对象类型的场景中，typeof 会将对象的所有属性及其类型完整地推导出来，形成一个精确的结构类型。对于数组，它会推导出对应的数组类型；对于函数，则会推导出函数的参数类型和返回值类型组成的函数类型。
（三）在类型注解中使用 typeof
typeof 最常见的应用场景之一就是在类型注解中引用已有的变量类型，避免重复书写类型定义：
typescript
// 定义一个变量
const config = {
serverUrl: 'https://api.example.com',
timeout: 5000,
debug: false
};
// 使用 typeof 获取 config 的类型并用于其他变量的类型注解
let anotherConfig: typeof config = {
serverUrl: 'https://api.another.com',
timeout: 3000,
debug: true
};
// 函数参数使用 typeof 类型
function processConfig(config: typeof config) {
console.log(config.serverUrl);
// ...处理配置
}
// 函数返回值使用 typeof 类型
function getDefaultConfig(): typeof config {
return {
serverUrl: 'https://api.example.com',
timeout: 5000,
debug: false
};
}通过 typeof config，我们无需手动定义 config 对象的类型结构，直接复用其类型，这在代码维护和减少重复工作方面具有重要意义。特别是当对象结构复杂时，这种方式能大大提高代码的可读性和可维护性。
二、typeof 与类型推导：自动推断的强大助力
TypeScript 的类型推导机制能够根据上下文自动推断变量的类型，而 typeof 在这一过程中常常扮演着关键角色，尤其是在需要明确引用某个变量类型的场景中。
（一）联合类型中的 typeof 应用
当我们需要定义一个变量可以是多个已知变量的类型之一时，typeof 与联合类型结合使用会非常有效：
typescript
const primaryColor = 'red';
const secondaryColor = 'blue';
const neutralColor = 'gray';
// 定义颜色变量可以是上述三种颜色之一
let favoriteColor: typeof primaryColor | typeof secondaryColor | typeof neutralColor;
// 正确赋值
favoriteColor = primaryColor; // 正确
favoriteColor = secondaryColor; // 正确
favoriteColor = neutralColor; // 正确
// 错误赋值（不在联合类型中）
favoriteColor = 'green'; // 错误，'green' 不在联合类型中在这个例子中，typeof primaryColor 等获取了具体的字符串字面量类型，通过联合类型组合后，favoriteColor 变量只能被赋值为这三个具体的字符串值，这比单纯使用 string 类型提供了更严格的类型检查。
（二）在泛型中使用 typeof 推导类型
typeof 与泛型结合可以实现更灵活的类型推导，尤其是在函数返回值类型与参数类型相关联的场景中：
typescript
// 泛型函数，返回参数对象的拷贝
function createCopy<T>(obj: T): T {
return { ...obj };
}
// 使用 typeof 推导函数参数的类型
function getFirstItem<T extends any[]>(arr: T): typeof arr[0] {
return arr[0];
}
const numbers = [1, 2, 3];
const firstNum = getFirstItem(numbers); // firstNum 的类型为 number
const strings = ['a', 'b', 'c'];
const firstStr = getFirstItem(strings); // firstStr 的类型为 string
// 更复杂的例子：根据对象属性类型推导
function getProperty<T, K extends keyof T>(obj: T, key: K): typeof obj[K] {
return obj[key];
}
const person = {
name: 'Bob',
age: 30,
address: {
city: 'New York'
}
};
const name = getProperty(person, 'name'); // name 的类型为 string
const age = getProperty(person, 'age'); // age 的类型为 number
const city = getProperty(person.address, 'city'); // city 的类型为 string在泛型函数中，typeof 帮助我们从参数的类型中推导出返回值的类型，实现了类型的动态关联。特别是在最后一个例子中，typeof obj[K] 准确地推导出了对象属性的具体类型，使得函数在处理不同结构的对象时都能保持类型安全。
（三）typeof 在条件类型中的应用
条件类型结合 typeof 可以实现更复杂的类型逻辑，根据不同的条件推导出不同的类型：
typescript
// 判断类型是否为数组
type IsArray<T> = T extends any[] ? true : false;
// 根据类型是否为数组返回不同的类型
type ArrayOrOther<T> = IsArray<T> extends true ? 'array' : 'other';
// 使用 typeof 进行条件类型判断
function getTypeDescription<T>(value: T): ArrayOrOther<typeof value> {
if (Array.isArray(value)) {
return 'array' as ArrayOrOther<typeof value>;
} else {
return 'other' as ArrayOrOther<typeof value>;
}
}
const arr = [1, 2, 3];
const desc1 = getTypeDescription(arr); // desc1 的类型为 'array'
const num = 100;
const desc2 = getTypeDescription(num); // desc2 的类型为 'other'在这个例子中，typeof value 作为条件类型的判断依据，使得函数能够根据传入值的实际类型返回不同的描述类型，体现了 typeof 在动态类型推导中的强大能力。
三、typeof 的高级技巧：超越基础的类型操作
掌握了 typeof 的基础用法和类型推导应用后，我们可以进一步探索一些高级技巧，这些技巧能帮助我们在更复杂的场景中发挥 typeof 的威力，实现更精准的类型控制。
（一）typeof 与索引签名类型
当我们需要定义一个对象，其属性名和属性类型都基于某个已有变量时，typeof 与索引签名结合使用可以实现这一需求：
typescript
const baseConfig = {
env: 'production',
port: 8080,
debug: false
};
// 使用 typeof 获取 baseConfig 的类型，并通过索引签名定义新类型
type ConfigKeys = keyof typeof baseConfig; // 'env' | 'port' | 'debug'
type ReadonlyConfig = {
readonly [K in ConfigKeys]: typeof baseConfig[K];
};
// 创建只读配置对象
const readonlyConfig: ReadonlyConfig = {
env: 'production',
port: 8080,
debug: false
};
// 尝试修改只读属性会报错
readonlyConfig.env = 'development'; // 错误：无法分配到 "env"，因为它是只读属性在这个例子中，typeof baseConfig 首先获取了基础配置对象的类型，然后通过 keyof 操作符获取其所有属性名的联合类型，最后利用索引签名遍历这些属性名，创建了一个与原对象结构相同但所有属性都是只读的新类型。这种方式在需要创建配置对象的只读版本时非常有用。
（二）typeof 与映射类型
映射类型是 TypeScript 中用于创建新类型的强大工具，typeof 可以与映射类型结合，实现对已有类型的批量转换：
typescript
const user = {
id: 1,
name: 'Charlie',
email: '[email protected]',
isActive: true
};
// 将对象的所有属性转换为可选属性
type PartialUser = {
[K in keyof typeof user]?: typeof user[K];
};
// 将对象的所有属性转换为只读属性
type ReadonlyUser = {
readonly [K in keyof typeof user]: typeof user[K];
};
// 将对象的所有属性值转换为字符串类型
type StringifyUser = {
[K in keyof typeof user]: string;
};
// 创建不同类型的对象
const partialUser: PartialUser = {
name: 'Charlie'
};
const readonlyUser: ReadonlyUser = {
id: 1,
name: 'Charlie',
email: '[email protected]',
isActive: true
};
const stringifyUser: StringifyUser = {
id: '1',
name: 'Charlie',
email: '[email protected]',
isActive: 'true'
};通过映射类型与 typeof 的结合，我们可以基于已有对象的类型快速创建各种变体类型，如可选属性类型、只读属性类型、属性值类型转换等。这种方式大大提高了类型定义的效率，避免了重复书写相似的类型结构。
（三）typeof 在函数重载中的应用
在函数重载场景中，typeof 可以帮助我们根据不同的参数类型推导出对应的返回值类型，实现更精准的重载定义：
typescript
// 定义数据项
const item1 = { id: 1, name: 'Item 1' };
const item2 = { id: 2, name: 'Item 2' };
const items = [item1, item2];
// 使用 typeof 定义函数重载
function findItemById(id: typeof item1.id): typeof item1 | undefined;
function findItemById(id: typeof item2.id): typeof item2 | undefined;
function findItemById(id: number): { id: number; name: string } | undefined {
return items.find(item => item.id === id);
}
// 调用重载函数
const foundItem1 = findItemById(item1.id); // foundItem1 的类型为 typeof item1 | undefined
const foundItem2 = findItemById(item2.id); // foundItem2 的类型为 typeof item2 | undefined
const foundItem3 = findItemById(3); // foundItem3 的类型为 { id: number; name: string } | undefined在这个例子中，通过 typeof item1.id 和 typeof item2.id 获取了具体的数字字面量类型（实际上都是 number，但如果是不同的字面量值会更明显），然后在函数重载中使用这些类型，使得函数在接收不同的 id 值时能够返回更精确的类型，提高了代码的类型安全性和可读性。
（四）typeof 与 this 类型
在类的方法中，typeof 可以与 this 类型结合，实现更精准的链式调用类型推导：
typescript
class DataManager {
private data: any[] = [];
add(item: any): typeof this {
this.data.push(item);
return this;
}
remove(item: any): typeof this {
const index = this.data.indexOf(item);
if (index !== -1) {
this.data.splice(index, 1);
}
return this;
}
clear(): typeof this {
this.data = [];
return this;
}
getData(): any[] {
return this.data;
}
}
// 使用链式调用
const manager = new DataManager();
manager
.add(1)
.add(2)
.remove(1)
.clear();
const data = manager.getData(); // data 的类型为 any[]在类的方法中，返回 typeof this 可以确保链式调用时的类型正确性，即每个方法调用后返回的仍然是当前类的实例类型，从而允许继续调用其他方法。这种方式在构建支持链式调用的 API 时非常有用，能够保持类型系统的一致性。
四、typeof 的常见陷阱与最佳实践
虽然 typeof 是一个非常强大的类型操作符，但在使用过程中也存在一些需要注意的陷阱，同时也有一些最佳实践可以帮助我们更安全、高效地使用它。
（一）注意 typeof 在函数表达式中的类型推导差异
在使用函数表达式时，typeof 推导的类型可能与预期有所不同，需要特别注意：
typescript
// 函数声明
function fn1() {
return { name: 'fn1' };
}
type Fn1Type = typeof fn1; // 推导为 () => { name: string; }
// 函数表达式
const fn2 = function() {
return { name: 'fn2' };
};
type Fn2Type = typeof fn2; // 同样推导为 () => { name: string; }
// 箭头函数表达式
const fn3 = () => {
return { name: 'fn3' };
};
type Fn3Type = typeof fn3; // 推导为 () => { name: string; }
// 注意：当函数表达式有类型注解时
const fn4: () => { name: string } = function() {
return { name: 'fn4' };
};
type Fn4Type = typeof fn4; // 推导为 () => { name: string; }，与注解一致
// 陷阱：当函数表达式赋值给变量后，typeof 获取的是函数类型，而非调用后的返回值类型
const result = fn1();
type ResultType = typeof result; // 推导为 { name: string; }
// 错误示例：试图通过 typeof 函数来获取返回值类型（错误做法）
type WrongResultType = typeof fn1(); // 错误：不能在类型位置调用函数从上述示例可以看出，typeof 作用于函数本身时，获取的是函数类型，而不是函数调用后的返回值类型。如果需要获取函数的返回值类型，应该使用 ReturnType<typeof fn> 这样的工具类型，这是一个常见的容易混淆的点。
（二）避免在类型别名中过度使用 typeof 导致类型过于具体
虽然 typeof 能够获取非常具体的类型，但在某些情况下，过于具体的类型可能会限制代码的灵活性：
typescript
const specificConfig = {
env: 'production' as 'production',
port: 8080,
debug: false
};
// 错误