正文

从基础入门，轻松掌握 TypeScript 联合类型使用技巧与实例解析

/0 浏览量
0715

在 TypeScript 中，联合类型（Union Types）是一种类型，它可以表示一个变量可以是多种类型中的一种。这对于增强代码的类型安全性以及提高代码的可读性非常有帮助。本文将从基础入门的角度，带你轻松掌握 TypeScript 联合类型的用法，并通过实例进行解析。

一、联合类型的基本概念

在 TypeScript 中，可以使用 | 操作符来定义联合类型。例如，定义一个变量 a 可以是字符串或数字类型：

let a: string | number;
a = "Hello"; // 正确
a = 100;    // 正确

在这个例子中，变量 a 可以是字符串或数字，TypeScript 编译器会根据实际赋值来确定 a 的类型。

二、联合类型的技巧

1. 联合类型中的类型守卫

当使用联合类型时，我们需要告诉 TypeScript 编译器变量当前的类型。这可以通过类型守卫来实现。类型守卫包括以下几种：

  • typeof 类型守卫：使用 typeof 操作符检查变量的类型。
let a: string | number;
if (typeof a === "string") {
    console.log(a.toUpperCase()); // 正确，因为此时 a 类型是 string
} else {
    console.log(a.toFixed(2)); // 正确，因为此时 a 类型是 number
}
  • 字面量类型守卫：对于联合类型中的字面量类型，可以使用字面量类型守卫。
let b: "apple" | "banana" | "cherry";
if (b === "apple") {
    console.log("这是苹果");
}
  • in 操作符：使用 in 操作符检查变量是否具有某个属性。
interface Animal {
    name: string;
    eat(): void;
}
interface Dog extends Animal {
    bark(): void;
}
let pet: Animal | Dog;
if ("bark" in pet) {
    (pet as Dog).bark(); // 正确，因为此时 pet 类型是 Dog
}

2. 联合类型的别名

当联合类型在多个地方使用时，可以使用类型别名来简化代码。

type StringOrNumber = string | number;
let c: StringOrNumber;
c = "Hello"; // 正确
c = 100;    // 正确

3. 联合类型中的可选属性

在联合类型中，可选属性可以使用 ? 操作符来表示。

interface A {
    a: string;
}
interface B {
    b: number;
}
type C = A | B;
let c: C;
c = { a: "apple" }; // 正确
c = { b: 100 };    // 正确

三、实例解析

以下是一个使用联合类型的实际例子：

interface Person {
    name: string;
    age: number;
}

interface Animal {
    name: string;
    age: number;
    kind: string;
}

function describe(data: Person | Animal): void {
    if (data instanceof Person) {
        console.log(`这是一个人类，名字是：${data.name}，年龄是：${data.age}`);
    } else {
        console.log(`这是一个${data.kind}，名字是：${data.name}，年龄是：${data.age}`);
    }
}

describe({ name: "张三", age: 25 }); // 输出：这是一个人类，名字是：张三，年龄是：25
describe({ name: "狗", age: 3, kind: "狗" }); // 输出：这是一个狗，名字是：狗，年龄是：3

在这个例子中，describe 函数接受一个联合类型的参数 data，它可以是 Person 或 Animal 类型。函数内部通过判断 data 的实例类型来决定如何输出信息。

四、总结

本文从基础入门的角度，介绍了 TypeScript 联合类型的用法，并通过实例解析了如何使用联合类型。通过学习本文，相信你已经掌握了联合类型的使用技巧。在实际开发中，联合类型可以帮助我们更好地控制变量的类型，提高代码的质量和可维护性。

-- 展开阅读全文 --