TypeScript 是 JavaScript 的一个强大超集，能够在开发体验上引入静态类型和先进功能。虽然许多开发者已经掌握了基础知识，但作为资深开发者，应熟悉高级 TypeScript 概念，以编写出更加可维护、可扩展和高效的代码。以下是每位资深前端开发者都应该了解的七个高级 TypeScript 概念。
联合类型允许一个变量持有多个指定类型中的任意一个，提供了动态数据处理的灵活性，同时保持类型安全。这就像拥有一个可以适用不同场景的多功能工具一样。
例子：
let data: string | number;
data = "Hello, TypeScript!";
console.log(data); // "Hello, TypeScript!"
data = 2024;
console.log(data); // 2024
更实际的例子：
type Status = "draft" | "published" | "archived";
function getArticleStatus(status: Status): string {
switch (status) {
case "draft":
return "Article is in draft.";
case "published":
return "Article is live.";
case "archived":
return "Article has been archived.";
default:
return "Unknown status.";
}
}
交叉类型结合多个类型的属性，确保一个变量满足所有条件。它是一种合并不同实体身份的方法，有助于设计更复杂的类型。
例子：
interface User {
name: string;
email: string;
}
interface Admin {
adminLevel: number;
}
type SuperAdmin = User & Admin;
const admin: SuperAdmin = {
name: "John Doe",
email: "[email protected]",
adminLevel: 3
};
console.log(admin);
在这个例子中，SuperAdmin 类型确保用户同时兼具 User 和 Admin 的属性。
类型保护在代码中充当验证检查点，允许在运行时检查期间进行更安全的类型缩小。这类似于检查站，只允许特定类型通过，从而增强安全性和准确性。
例子：
function isNumber(value: unknown): value is number {
return typeof value === "number";
}
function displayValue(value: string | number) {
if (isNumber(value)) {
console.log(value.toFixed(2)); // 安全调用特定于数字的方法
} else {
console.log(value.toUpperCase()); // 安全调用字符串特定的方法
}
}
displayValue("Hello World"); // "HELLO WORLD"
displayValue(42); // "42.00"
条件类型根据特定条件提供强大的类型转换。它们能够动态操纵类型，类似于逻辑门在电路中控制路径。
例子：
type IsArray<T> = T extends any[] ? "Array" : "Not Array";
type Test1 = IsArray<string[]>; // "Array"
type Test2 = IsArray<number>; // "Not Array"
条件类型允许开发者构建可以根据其他类型自适应的类型，从而达到更具表现力和灵活的代码。
映射类型通过迭代每个属性来将现有类型转换为新结构，使得实现类型范围的修改变得更简单。
例子：
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
interface Task {
title: string;
completed: boolean;
}
const readonlyTask: Readonly<Task> = {
title: "Complete TypeScript tutorial",
completed: false
};
// readonlyTask.title = "New Title"; // 错误：无法为只读属性 'title' 赋值。
type Optional<T> = {
[K in keyof T]?: T[K];
};
type OptionalTask = Optional<Task>;
模板字面量类型使用字符串字面量来创建新类型，为命名约定提供一种强制执行的方法，或者组合字符串模式以确保类型安全。
例子：
type Size = "small" | "medium" | "large";
type Color = "red" | "blue" | "green";
type Style = `${Size}-${Color}`;
const validStyle: Style = "medium-red";
// const invalidStyle: Style = "extra-large-blue"; // 错误：类型 '"extra-large-blue"' 不能分配给类型 'Style'。
这些类型使您的类型定义更加具有表达性，提供了更清晰的代码模式指南。
递归类型对表示复杂数据结构如树、链表或深层嵌套对象非常重要。它们允许类型自我引用，提供了一种建模本质上递归的数据结构的方法。
例子：
interface CommentNode {
id: number;
text: string;
replies?: CommentNode[];
}
const comment: CommentNode = {
id: 1,
text: "This is the first comment",
replies: [
{
id: 2,
text: "This is a nested reply",
replies: [
{ id: 3, text: "This is a reply to the reply" }
]
}
]
};
递归类型就像积木，使您能够建模如家谱或文件目录般复杂的结构。
高级 TypeScript 概念如联合类型、交叉类型、类型保护、条件类型、映射类型、模板字面量类型和递归类型，是资深开发者工具箱中不可或缺的一部分。掌握这些特性确保您的代码具有类型安全、精简和可扩展性，为开发复杂应用奠定坚实基础。
