不要混淆 typeof 的值运算和类型运算

2024-05-29 12:01:58 浏览数 (1)

typeof 运算符

JavaScript 语言中,typeof 运算符是一个一元运算符,返回一个字符串,代表操作数的类型。

代码语言:javascript复制
typeof "foo"; // 'string'

上面示例中,typeof运算符返回字符串foo的类型是string。

注意,这时 typeof 的操作数是一个值。

JavaScript 里面,typeof运算符只可能返回八种结果,而且都是字符串。

代码语言:javascript复制
typeof undefined; // "undefined"
typeof true; // "boolean"
typeof 1337; // "number"
typeof "foo"; // "string"
typeof {}; // "object"
typeof parseInt; // "function"
typeof Symbol(); // "symbol"
typeof 127n; // "bigint"

上面示例是typeof运算符在 JavaScript 语言里面,可能返回的八种结果。

TypeScript 将typeof运算符移植到了类型运算,它的操作数依然是一个值,但是返回的不是字符串,而是该值的 TypeScript 类型。

代码语言:javascript复制
const a = { x: 0 };

type T0 = typeof a; // { x: number }
type T1 = typeof a.x; // number

上面示例中,typeof a表示返回变量a的 TypeScript 类型({ x: number })。同理,typeof a.x返回的是属性x的类型(number)。

这种用法的typeof返回的是 TypeScript 类型,所以只能用在类型运算之中(即跟类型相关的代码之中),不能用在值运算。

也就是说,同一段代码可能存在两种typeof运算符,一种用在值相关的 JavaScript 代码部分,另一种用在类型相关的 TypeScript 代码部分。

代码语言:javascript复制
let a = 1;
let b: typeof a;

if (typeof a === "number") {
  b = a;
}

上面示例中,用到了两个typeof,第一个是类型运算,第二个是值运算。它们是不一样的,不要混淆。

JavaScript 的 typeof 遵守 JavaScript 规则,TypeScript 的 typeof 遵守 TypeScript 规则。它们的一个重要区别在于,编译后,前者会保留,后者会被全部删除。

上例的代码编译结果如下。

代码语言:javascript复制
let a = 1;
let b;
if (typeof a === "number") {
  b = a;
}

上面示例中,只保留了原始代码的第二个 typeof,删除了第一个 typeof。

由于编译时不会进行 JavaScript 的值运算,所以 TypeScript 规定,typeof 的参数只能是标识符,不能是需要运算的表达式。

typescript type T = typeof Date(); // 报错 上面示例会报错,原因是 typeof 的参数不能是一个值的运算式,而Date()需要运算才知道结果。

另外,typeof命令的参数不能是类型。

代码语言:javascript复制
type Age = number;
type MyAge = typeof Age; // 报错

上面示例中,Age是一个类型别名,用作typeof命令的参数就会报错。

typeof 是一个很重要的 TypeScript 运算符,有些场合不知道某个变量foo的类型,这时使用typeof foo就可以获得它的类型。

在这里插入图片描述在这里插入图片描述

0 人点赞