深入探索 TypeScript 运算符【TypeScript 系列】

文章目录

一、TypeScript 运算符

二、TypeScript 算术运算符

1. 基本算术运算

2. 复合赋值运算符

3. 自增和自减运算符

4. 幂运算符

三、TypeScript 关系运算符

四、TypeScript 逻辑运算符

五、TypeScript 位运算符

六、TypeScript 赋值运算符

七、相关链接

一、TypeScript 运算符

TypeScript 是 JavaScript 的一个超集，它增加了类型系统和编译时类型检查。然而，在运算符方面，TypeScript 继承了 JavaScript 的大部分运算符。以下是一些在 TypeScript（和 JavaScript）中常见的运算符：

1. 算术运算符

+ 加法

- 减法

* 乘法

/ 除法

% 取余（模运算）

** 幂运算（ES2016+）

++ 自增

-- 自减

+=、-=、*=、/=、%=、**= 复合赋值运算符

2. 比较运算符

== 等于（会进行类型转换）

=== 严格等于（不会进行类型转换）

!= 不等于（会进行类型转换）

!== 严格不等于（不会进行类型转换）

< 小于

> 大于

<= 小于或等于

>= 大于或等于

in 检查属性是否存在于对象中

instanceof 检查对象是否是某个类的实例

3. 逻辑运算符

&& 逻辑与

|| 逻辑或

! 逻辑非

4. 位运算符

& 按位与

| 按位或

^ 按位异或

~ 按位非

<< 左移

>> 右移

>>> 无符号右移（ES2015+）

5. 字符串运算符

+ 用于连接两个或多个字符串（或者连接字符串和数字）

6. 条件（三元）运算符

condition ? value_if_true : value_if_false

7. 赋值运算符

= 赋值

复合赋值运算符（如上面算术运算符中提到的那些）

8. 类型运算符

typeof 返回操作数的类型（在 TypeScript 中，这更多地与 JavaScript 相关，但在某些上下文中仍然有用）

as 类型断言（TypeScript 特有的）

<Type>value 类型断言（另一种 TypeScript 语法，与 as 等效）

9. 指数运算符

** 幂运算（ES2016+）

10. 扩展运算符

... 用于函数参数（收集剩余参数）或数组（展开数组）

11. 可选链运算符

?. 尝试获取对象属性或调用函数，如果左侧为 null 或 undefined 则立即返回 undefined，而不会抛出错误（ES2020+）

12. 空值合并运算符

?? 如果左侧操作数为 null 或 undefined，则返回其右侧操作数；否则返回左侧操作数（ES2020+）

注意：一些运算符（如 **、**=、?? 和 ?.）是 ES2016 或更新版本的标准中引入的，但在 TypeScript 中通常也可以使用，因为 TypeScript 支持这些较新的 JavaScript 功能。

二、TypeScript 算术运算符

TypeScript 的算术运算符与 JavaScript 中的算术运算符是相同的，因为 TypeScript 是 JavaScript 的一个超集。以下是一些使用 TypeScript 算术运算符的示例：

1. 基本算术运算

let a: number = 10;
let b: number = 2;

let sum: number = a + b;  // 加法
console.log(sum);  // 输出 12

let difference: number = a - b;  // 减法
console.log(difference);  // 输出 8

let product: number = a * b;  // 乘法
console.log(product);  // 输出 20

let quotient: number = a / b;  // 除法
console.log(quotient);  // 输出 5

let remainder: number = a % b;  // 取余
console.log(remainder);  // 输出 0

2. 复合赋值运算符

let x: number = 5;

x += 3;  // 等同于 x = x + 3
console.log(x);  // 输出 8

x -= 2;  // 等同于 x = x - 2
console.log(x);  // 输出 6

x *= 2;  // 等同于 x = x * 2
console.log(x);  // 输出 12

x /= 2;  // 等同于 x = x / 2
console.log(x);  // 输出 6

x %= 3;  // 等同于 x = x % 3
console.log(x);  // 输出 0

3. 自增和自减运算符

let y: number = 5;

y++;  // 等同于 y = y + 1
console.log(y);  // 输出 6

++y;  // 等同于 y = y + 1
console.log(y);  // 输出 7

y--;  // 等同于 y = y - 1
console.log(y);  // 输出 6

--y;  // 等同于 y = y - 1
console.log(y);  // 输出 5

4. 幂运算符

虽然幂运算符 (**) 是 ES2016 引入的，但 TypeScript 也支持它。

let base: number = 2;
let exponent: number = 3;

let result: number = base ** exponent;  // 幂运算
console.log(result);  // 输出 8

在编写这些示例时，请确保您有一个可以运行 TypeScript 代码的环境，比如使用 TypeScript 编译器 (tsc) 将 TypeScript 代码编译为 JavaScript，然后在支持这些运算符的 JavaScript 环境中运行生成的 JavaScript 代码。如果您使用的是现代的开发环境（如 Node.js、Angular、React 等），这些环境通常已经内置了对 TypeScript 的支持。

三、TypeScript 关系运算符

TypeScript 的关系运算符（也称为比较运算符）用于比较两个值的大小或检查它们是否相等。以下是一些使用 TypeScript 关系运算符的示例代码：

let a: number = 10;
let b: number = 5;
let c: string = "hello";
let d: string = "world";

// 相等性比较
console.log(a == b);  // 宽松相等，输出 false
console.log(a === b); // 严格相等，输出 false
console.log(c == d);  // 宽松相等（会进行类型转换尝试），输出 false
console.log(c === d); // 严格相等，输出 false

// 不等性比较
console.log(a != b);  // 宽松不等，输出 true
console.log(a !== b); // 严格不等，输出 true

// 数值比较
console.log(a > b);    // 大于，输出 true
console.log(a < b);    // 小于，输出 false
console.log(a >= b);   // 大于或等于，输出 true
console.log(a <= b);   // 小于或等于，输出 false

// 字符串比较（按字符顺序比较）
console.log(c < d);    // 按字符顺序比较，输出 true（因为 'h' 在 'w' 前面）
console.log(c > d);    // 按字符顺序比较，输出 false

// in 运算符（用于检查属性是否存在于对象中）
let obj: { prop: number } = { prop: 15 };
console.log("prop" in obj); // 输出 true

// instanceof 运算符（用于检查对象是否是某个类的实例）
class MyClass {}
let instance: MyClass = new MyClass();
console.log(instance instanceof MyClass); // 输出 true

// 注意：'in' 和 'instanceof' 不是严格意义上的关系运算符，但它们在比较场景中很常见

这些示例展示了如何在 TypeScript 中使用关系运算符来比较数值和字符串，以及如何使用 in 和 instanceof 运算符来检查对象属性和类的实例。请注意，in 和 instanceof 不是传统意义上的关系运算符，但它们在比较操作中也起着重要的作用。

四、TypeScript 逻辑运算符

TypeScript 的逻辑运算符用于根据操作数的逻辑值（真或假）返回一个新的逻辑值。这些运算符在 TypeScript 中与 JavaScript 中的用法相同。以下是使用 TypeScript 逻辑运算符的示例代码：

let isRaining: boolean = true;
let haveUmbrella: boolean = false;
let shouldWearRainBoots: boolean;

// 逻辑与（&&）
// 如果两个操作数都为真，则条件为真
shouldWearRainBoots = isRaining && !haveUmbrella; // 如果没有伞并且下雨，则应该穿雨靴
console.log(shouldWearRainBoots); // 输出 true

// 逻辑或（||）
// 如果任一操作数为真，则条件为真
haveUmbrella = true; // 假设我们现在有一把伞
shouldWearRainBoots = isRaining || !haveUmbrella; // 如果下雨或没有伞，则应该穿雨靴
console.log(shouldWearRainBoots); // 输出 true（因为下雨）

// 逻辑非（!）
// 反转操作数的逻辑值
isRaining = !isRaining; // 如果之前下雨，现在就不下了
console.log(isRaining); // 输出 false

// 复杂逻辑表达式
let age: number = 18;
let isAdult: boolean = age >= 18; // 判断是否成年
let canVote: boolean = isAdult && isRaining; // 假设只有成年且下雨时才能投票（这是一个不符合实际的假设）
console.log(canVote); // 输出 false（因为现在没有下雨）

// 使用括号来明确优先级
let canDrinkAlcohol: boolean = (age >= 21) && isRaining; // 假设只有年龄大于等于 21 且下雨时才能喝酒
console.log(canDrinkAlcohol); // 输出 false（因为现在没有下雨）

在这个示例中，我们使用了 &&（逻辑与）、||（逻辑或）和 !（逻辑非）运算符来根据变量的逻辑值计算结果。我们还使用了括号来明确运算符的优先级，这在处理复杂的逻辑表达式时非常重要。

请注意，在 TypeScript（以及 JavaScript）中，逻辑运算符的操作数通常是布尔值（true 或 false），但也可以是非布尔值。非布尔值会被隐式转换为布尔值（也称为“真值化”或“假值化”），其中 0、null、undefined、NaN 和空字符串（""）被视为 false，而其他所有值都被视为 true。

五、TypeScript 位运算符

TypeScript 中的位运算符用于在二进制位级别上操作数字。这些运算符在处理整数和底层系统编程时特别有用。以下是一些使用 TypeScript 位运算符的示例代码：

let a: number = 60; // 二进制表示为 0011 1100
let b: number = 13; // 二进制表示为 0000 1101

// 位与（&）
let c: number = a & b; // 只保留两个数都为 1 的位，结果为 12（0000 1100）
console.log(c); // 输出 12

// 位或（|）
let d: number = a | b; // 只要两个数中任一数为 1 的位，结果就是 1，结果为 61（0011 1101）
console.log(d); // 输出 61

// 位异或（^）
let e: number = a ^ b; // 当两个数相应位不同时结果为 1，相同则为 0，结果为 49（0011 0001）
console.log(e); // 输出 49

// 位非（~）
let f: number = ~a; // 反转每一位，结果取决于数字的长度和表示方式（通常是有符号 32 位整数），这里可能是 -61
console.log(f); // 输出 -61，具体值取决于系统的位表示和整数大小

// 左移（<<）
let g: number = a << 2; // 将 a 的所有位向左移动 2 位，相当于乘以 2^2（4），结果为 240（1111 0000）
console.log(g); // 输出 240

// 右移（>>）
let h: number = a >> 1; // 将 a 的所有位向右移动 1 位，相当于除以 2（并向下取整），结果为 30（0001 1110）
console.log(h); // 输出 30

// 无符号右移（>>>）
let i: number = a >>> 2; // 将 a 的所有位向右移动 2 位，但左侧填充 0 而不是符号位，对于正数等同于 >>
console.log(i); // 输出 15（0000 1111），对于负数，符号位会被丢弃，然后填充 0

请注意，位运算符只能用于整数类型（在 TypeScript 和 JavaScript 中通常是 number 类型，但实际上是按照 32 位或 64 位整数来处理的，具体取决于实现）。

此外，由于位运算符在二进制层面操作，因此结果可能会受到 JavaScript 数字表示的限制（通常是 IEEE 754 双精度浮点数，但在位操作中会被当作 32 位有符号整数处理）。对于非常大的数字或负数，结果可能不符合直观的数学期望。

对于无符号右移运算符 >>>，它总是用 0 来填充左侧空位，不考虑原始数字的符号。这在处理无符号整数或需要保持正数结果时特别有用。

六、TypeScript 赋值运算符

在 TypeScript 中，赋值运算符（=）是最基本的运算符，用于将值赋给变量。但是，除了基本的赋值运算符外，还有一些复合赋值运算符，如 +=、-=、*=、/= 和 %= 等，它们允许在赋值的同时执行一些基本的算术操作。

以下是一些使用 TypeScript 赋值运算符的示例代码：

// 基本的赋值运算符
let a: number;
a = 10;
console.log(a); // 输出 10

// 复合赋值运算符
let b: number = 5;
b += 3; // 相当于 b = b + 3
console.log(b); // 输出 8

let c: number = 10;
c -= 2; // 相当于 c = c - 2
console.log(c); // 输出 8

let d: number = 2;
d *= 3; // 相当于 d = d * 3
console.log(d); // 输出 6

let e: number = 10;
e /= 2; // 相当于 e = e / 2
console.log(e); // 输出 5

let f: number = 10;
f %= 3; // 相当于 f = f % 3
console.log(f); // 输出 1

// 字符串连接赋值运算符（虽然它不是一个标准的算术运算符，但也是一种赋值）
let g: string = "Hello";
g += " World!"; // 相当于 g = g + " World!"
console.log(g); // 输出 "Hello World!"

// 递增和递减赋值运算符（虽然不是复合赋值运算符，但它们是赋值相关的）
let h: number = 5;
h++; // 相当于 h = h + 1
console.log(h); // 输出 6

let i: number = 10;
i--; // 相当于 i = i - 1
console.log(i); // 输出 9

// 链式赋值
let j: number = 10;
let k: number;
let l: number;
k = l = j; // j 的值被赋给 l，然后 l 的值（现在是 j 的值）被赋给 k
console.log(k); // 输出 10
console.log(l); // 输出 10

在这个示例中，我们展示了如何使用基本的赋值运算符（=）和复合赋值运算符（+=、-=、*=、/=、%=）来修改变量的值。我们还展示了如何使用字符串连接赋值（通过 +=）以及递增（++）和递减（--）赋值运算符。最后，我们展示了链式赋值，其中多个变量可以连续地被赋予相同的值。

七、相关链接

1. TypeScript中文网
2. TypeScript下载
3. TypeScript文档
4. 「TypeScript系列」TypeScript 简介及基础语法
5. 「TypeScript系列」TypeScript 基础类型
6. 「TypeScript系列」TypeScript 变量声明

作者：雪梅零落