前端 TypeScript 学习 Day03 - TS 高级类型

在 TypeScript 中，高级类型为我们提供了更强大、更灵活的数据结构。通过使用高级类型，我们可以更精确地定义变量的类型，从而提高代码的可维护性和可读性。这次我们将深入探讨 TypeScript 的一些高级类型，主要包含联合类型、交叉类型、映射类型以及条件类型。

1. 联合类型

联合类型允许一个变量可以是多种类型中的任意一种。在 TypeScript 中，可以使用竖线 | 来表示联合类型。例如：

function printId(id: number | string) {
    console.log(`Your ID is: ${id}`);
}

printId(101); // 输出: Your ID is: 101
printId('202'); // 输出: Your ID is: 202

在上述代码中，id 可以是 number 或 string 类型，这使得我们的函数更加灵活。

2. 交叉类型

交叉类型用于将多个类型合并为一个类型。它可以将这些类型所包含的所有属性整合到一起。交叉类型使用 & 符号来表示。例如：

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

interface Contact {
    email: string;
    phone: string;
}

type Employee = Person & Contact;

const emp: Employee = {
    name: 'Alice',
    age: 30,
    email: 'alice@example.com',
    phone: '123-456-7890'
};

console.log(emp);

在这个例子中，Employee 结合了 Person 和 Contact 的所有属性，使得我们的对象 emp 同时拥有 name、age、email 和 phone。

3. 映射类型

映射类型是从已有的类型中生成新类型。这允许我们对类型进行变换和扩展。常用的映射类型有 Partial、Required、Readonly 和 Record。下面是一个使用 Partial 的例子：

interface User {
    id: number;
    name: string;
    age: number;
}

type PartialUser = Partial<User>;

const user: PartialUser = {
    id: 1,
    name: 'Bob'
    // age 属性可以省略
};

console.log(user);

Partial 将 User 类型的所有属性变为可选属性，方便我们在需要时只传递部分属性。

4. 条件类型

条件类型使我们能够根据条件动态选择类型。格式如下：T extends U ? X : Y，表示如果 T 是 U 的子类型，则类型为 X，否则为 Y。示例：

type IsString<T> = T extends string ? '是字符串' : '不是字符串';

type Result1 = IsString<string>; // 类型为 '是字符串'
type Result2 = IsString<number>; // 类型为 '不是字符串'

console.log(Result1); // 输出: 是字符串
console.log(Result2); // 输出: 不是字符串

在这个例子中，IsString 是一个条件类型，它检查传入的类型是否为 string，并据此返回相应的字符串。

总结

以上是 TypeScript 高级类型的一些基本应用。通过熟练掌握这些类型，我们能够编写出更加健壮、易于维护的代码。掌握它们的关键在于多实践，灵活运用。在实际开发中，高级类型能够帮助我们处理复杂的数据结构，实现更灵活的类型定义。希望大家能够继续深入学习并在项目中应用这些知识。