深入理解TypeScript中的类型守卫

在TypeScript中，类型守卫是一个非常强大的工具，它允许我们在联合类型中区分不同的类型，并根据类型执行不同的逻辑。通过类型守卫，我们可以更安全地处理类型，避免运行时错误。本文将详细介绍类型守卫的几种常见用法，并通过实例展示它们的应用。
一、基本类型守卫
在JavaScript中，typeof操作符可以用来判断基本类型（如number、string、boolean等）。TypeScript利用这一特性，将typeof操作符作为基本类型的类型守卫。以下是一个简单的例子：
TypeScript复制
function show(x: number | string): void {
console.log("typeof x: " + typeof x);
if (typeof x == ‘number’) {
console.log("a number: " + x);
} else {
console.log("a string: " + x);
}
}
show(“test string”);
show(4);
输出结果如下：
复制
typeof x: string
a string: test string
typeof x: number
a number: 4
二、对象类型守卫
对于对象类型，typeof操作符总是返回’object’，因此我们需要其他方法来区分对象类型。一种常见的方法是通过检查对象的特定属性或方法是否存在。例如：
TypeScript复制
class Car {
drive() {
console.log(“car driving”);
}
}
class Bike {
ride() {
console.log(“Bike ridding”);
}
}
function move(vehicle: Bike | Car): void {
if ((vehicle as Car).drive) {
(vehicle as Car).drive();
} else {
(vehicle as Bike).ride();
}
}
move(new Bike());
输出结果为：
Bike ridding
在这个例子中，我们使用了类型断言vehicle as Car来告诉TypeScript，vehicle在某些情况下可以被视为Car类型。然而，这种方法在多个分支中使用时会显得冗余。
三、自定义类型守卫
为了避免频繁使用类型断言，TypeScript允许我们定义自己的类型守卫函数。这种函数返回一个类型谓词，例如parameterName is Type。以下是一个改进的例子：
TypeScript复制
class Car {
drive() {
console.log(“car driving”);
}
}
class Bike {
ride() {
console.log(“Bike ridding”);
}
}
function isCar(vehicle: Bike | Car): vehicle is Car {
return (vehicle as Car).drive !== undefined;
}
function move(vehicle: Bike | Car): void {
if (isCar(vehicle)) {
vehicle.drive();
} else {
vehicle.ride();
}
}
move(new Bike());
输出结果为：
Bike ridding
在这个例子中，isCar函数是一个自定义类型守卫，它通过检查drive方法是否存在来判断vehicle是否为Car类型。这种类型守卫在编译时就能提供类型信息，而不仅仅是运行时的布尔值。
四、instanceof类型守卫
TypeScript还支持使用JavaScript的instanceof操作符作为类型守卫。这种方法无需自定义类型守卫函数或类型断言，非常直观。例如：
TypeScript复制
class Car {
drive() {
console.log(“car driving”);
}
}
class Bike {
ride() {
console.log(“Bike ridding”);
}
}
function move(vehicle: Bike | Car): void {
if (vehicle instanceof Car) {
vehicle.drive();
} else {
vehicle.ride();
}
}
move(new Bike());
输出结果为：
Bike ridding
instanceof类型守卫利用了JavaScript的原型链机制，能够准确地判断对象的类型。
五、总结
类型守卫是TypeScript中处理联合类型的重要工具。通过typeof、自定义类型守卫函数和instanceof，我们可以安全地区分和操作不同类型的变量。合理使用类型守卫，可以显著提高代码的可读性和安全性，同时减少运行时错误。
希望本文的介绍和实例能帮助你更好地理解和使用TypeScript中的类型守卫。