解决 TypeScript 中 typeof 使用的问题
在 TypeScript 中，我们通常使用 typeof 操作符来获取一个变量或值的类型信息。typeof 返回一个字符串表示该变量或值的类型，例如 "string"、"number"、"boolean" 等等。虽然 typeof 是一个非常有用的操作符，在一些情况下却会遇到一些问题。在本篇文章中，我将详细介绍 typeof 的问题，并提供解决方案。
问题描述
下面是一个简单的 TypeScript 代码：
-- -------------------- ---- ------- --------- --- - ----- ------- - ----- ---- --- - - ----- ------ -- ------------------ ----- -- --------
在上述代码中，我们使用了 typeof 来检查 foo 的类型。但是，输出结果却是 "object"，并没有返回我们期望的 "Foo" 类型。
这是因为在 JavaScript 中，所有的对象、数组、函数、null 等等都会被视为一个 "object" 类型。因此，在 TypeScript 中，使用 typeof 操作符来检查一个对象的类型时，只能得到一个泛化的类型信息，而不能得到更具体的类型信息。
解决方案一：问题的根源
为了更好的理解 typeof 的问题，我们需要知道 TypeScript 中的类型系统是如何工作的。在 TypeScript 中，存在两种类型：本质类型和对象类型。
本质类型包括原始类型（number、string、boolean、symbol、null、undefined）以及枚举类型。这些类型在编译时都会被转换成 JavaScript 的基本类型，不会产生任何运行时的开销。
对象类型包括类、接口、函数、数组等等。这些类型在编译时都会被转换为 JavaScript 中的对象类型，会产生运行时的开销。
当我们使用 typeof 操作符来检查一个变量的类型时，实际上是在获取该变量的值的本质类型。例如：
console.log(typeof "Hello World"); // "string" console.log(typeof 100); // "number" console.log(typeof true); // "boolean"
当我们使用 typeof 操作符来检查一个对象类型时，实际上是在获取该对象类型的构造函数名称。例如：
class Person {
name: string;
age: number;
}
console.log(typeof Person); // "function"
console.log(typeof new Person()); // "object"由于 JavaScript 中所有对象、数组、函数、null 等等都会被视为一个 "object" 类型，因此在 TypeScript 中，使用 typeof 操作符来检查一个对象类型时，只能得到 "object"。
解决方案二：使用类型查询操作符
为了得到一个对象类型的具体信息，在 TypeScript 中，我们可以使用类型查询操作符。类型查询操作符是一个 keyof 符号，后面跟着一个类型。它将返回该类型中所有可用的属性名称的联合类型。
例如：
interface Foo {
name: string;
}
type FooProperties = keyof Foo; // "name"上面的代码中，FooProperties 将会是一个类型为 "name" 的联合类型。这个联合类型可以被用在其它地方，例如：
-- -------------------- ---- ------- --------- --- - ----- ------- - ----- ---- --- - - ----- ------ -- ---- ------------- - ----- ---- -- ------ -------- ---------------- ---- ---- -------------- - ------ --------- - ---------------- -------- -- -----
在上述代码中，getProperty 函数接受一个对象和一个属性名称，并返回该对象中对应属性的值。使用 keyof 操作符，我们可以在编写该函数时，保证 key 参数的类型正确。
总结
在 TypeScript 中，typeof 操作符仅能返回变量的本质类型，而无法得到一个对象具体的类型信息。为了解决这个问题，我们可以使用类型查询操作符 keyof 来获取对象类型中的属性名称，进而得到有关对象的更确切信息。
以上是 TypeScript 中 typeof 操作符的问题及解决方案的介绍，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b25cd748841e9894e9b149