TypeScript 类型保护

在TypeScript中，类型保护（Type Guard）是一种用于在运行时检查变量类型的技术。它允许我们在代码中缩小变量的类型范围，从而确保在特定代码块中变量的类型是已知的。这对于处理联合类型（Union Types）尤其有用，因为它可以帮助我们避免类型错误并编写更安全的代码。

什么是类型保护？

类型保护是一种在运行时检查变量类型的方式。它通常用于处理联合类型，即一个变量可能是多种类型之一。通过类型保护，我们可以在代码中明确地检查变量的类型，并在确认类型后安全地使用该变量。

例如，假设我们有一个变量 value，它可能是 string 或 number 类型。我们可以使用类型保护来检查 value 的实际类型，并根据类型执行不同的操作。

类型保护的实现方式

TypeScript提供了多种方式来实现类型保护，包括：

typeof 类型保护
instanceof 类型保护
自定义类型保护函数
in 操作符类型保护

接下来，我们将逐一介绍这些方法，并通过代码示例展示它们的用法。

1. `typeof` 类型保护

typeof 是JavaScript中的一个操作符，用于返回变量的类型字符串。在TypeScript中，typeof 可以用作类型保护，特别是在处理基本类型（如 string、number、boolean 等）时。

typescript
function printValue(value: string | number) {
    if (typeof value === "string") {
        console.log(`The value is a string: ${value}`);
    } else {
        console.log(`The value is a number: ${value}`);
    }
}

printValue("Hello"); // 输出: The value is a string: Hello
printValue(42);      // 输出: The value is a number: 42

在上面的代码中，typeof value === "string" 是一个类型保护，它确保在 if 语句块中 value 的类型是 string。

2. `instanceof` 类型保护

instanceof 是JavaScript中的另一个操作符，用于检查一个对象是否是某个类的实例。在TypeScript中，instanceof 可以用作类型保护，特别是在处理自定义类时。

typescript
class Dog {
    bark() {
        console.log("Woof!");
    }
}

class Cat {
    meow() {
        console.log("Meow!");
    }
}

function makeSound(animal: Dog | Cat) {
    if (animal instanceof Dog) {
        animal.bark();
    } else {
        animal.meow();
    }
}

makeSound(new Dog()); // 输出: Woof!
makeSound(new Cat()); // 输出: Meow!

在这个例子中，animal instanceof Dog 是一个类型保护，它确保在 if 语句块中 animal 的类型是 Dog。

3. 自定义类型保护函数

有时，我们需要更复杂的逻辑来判断变量的类型。在这种情况下，我们可以定义一个自定义的类型保护函数。自定义类型保护函数的返回值必须是一个类型谓词（Type Predicate），即 parameterName is Type 的形式。

typescript
interface Bird {
    fly(): void;
}

interface Fish {
    swim(): void;
}

function isFish(pet: Bird | Fish): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

function move(pet: Bird | Fish) {
    if (isFish(pet)) {
        pet.swim();
    } else {
        pet.fly();
    }
}

在这个例子中，isFish 是一个自定义类型保护函数，它检查 pet 是否是 Fish 类型。如果是，pet 的类型在 if 语句块中被缩小为 Fish。

4. `in` 操作符类型保护

in 操作符用于检查对象中是否存在某个属性。在TypeScript中，in 可以用作类型保护，特别是在处理具有不同属性的对象时。

typescript
interface Car {
    drive(): void;
}

interface Boat {
    sail(): void;
}

function operate(vehicle: Car | Boat) {
    if ("drive" in vehicle) {
        vehicle.drive();
    } else {
        vehicle.sail();
    }
}

在这个例子中，"drive" in vehicle 是一个类型保护，它确保在 if 语句块中 vehicle 的类型是 Car。

实际应用场景

类型保护在实际开发中非常有用，尤其是在处理复杂的联合类型时。以下是一个实际应用场景：

假设我们正在开发一个电商网站，用户可以选择不同的支付方式（如信用卡、PayPal、银行转账）。我们可以使用类型保护来处理不同的支付方式：

typescript
interface CreditCard {
    cardNumber: string;
    expiryDate: string;
}

interface PayPal {
    email: string;
}

interface BankTransfer {
    accountNumber: string;
    bankName: string;
}

type PaymentMethod = CreditCard | PayPal | BankTransfer;

function processPayment(payment: PaymentMethod) {
    if ("cardNumber" in payment) {
        console.log(`Processing credit card payment: ${payment.cardNumber}`);
    } else if ("email" in payment) {
        console.log(`Processing PayPal payment: ${payment.email}`);
    } else {
        console.log(`Processing bank transfer: ${payment.accountNumber}`);
    }
}

在这个例子中，我们使用 in 操作符来检查 payment 的类型，并根据类型执行不同的支付处理逻辑。

总结

类型保护是TypeScript中一个强大的特性，它允许我们在运行时检查变量的类型，并根据类型执行不同的操作。通过使用 typeof、instanceof、自定义类型保护函数和 in 操作符，我们可以编写更安全、更易读的代码。

提示

在实际开发中，类型保护可以帮助我们避免类型错误，并提高代码的可维护性。建议在处理联合类型时，优先考虑使用类型保护来确保代码的安全性。

附加资源

练习

编写一个函数，接受一个 string | number 类型的参数，并使用 typeof 类型保护来分别处理字符串和数字。
创建一个自定义类型保护函数，用于检查一个对象是否是 Date 类型的实例。
使用 in 操作符类型保护来处理一个包含不同属性的对象联合类型。

通过完成这些练习，你将更好地理解TypeScript中的类型保护机制，并能够在实际项目中灵活运用。

什么是类型保护？​

类型保护的实现方式​

1. typeof 类型保护​

2. instanceof 类型保护​

3. 自定义类型保护函数​

4. in 操作符类型保护​

实际应用场景​

总结​

附加资源​

练习​