在处理庞大的代码库时，这个功能尤其方便。因为我最不想做的事情就是打开另一个文件，逐个查看属性和条件，确认自己可以访问哪些属性。而即使我认为可以访问某个属性，也希望在生产环境中确保这个假设不会给我带来麻烦。
让我们通过这篇文章，深入了解如何从判别联合类型中提取类型，进一步提升我们的编码效率和代码可靠性。
什么是判别联合类型？TypeScript中的魔法衣橱整理术
在TypeScript中，判别联合类型（Discriminated Unions）使用一个共同的属性，称为判别属性（discriminant），来区分联合类型中的不同类型。简单来说，想象一下你打开衣柜，看到各种类型的衣物。你有上衣和下装。如果没有判别联合类型，我们可能会这样组织：
代码语言：javascript复制type Clothing = {
material: string;
sleeveLength?: 'short' | 'long';
length?: 'short' | 'long';
type?: 'top' | 'bottom';
};
这种方法在你只需要处理一次条件时是可行的。然而，当你再次处理这些类型时，很快就会发现问题重重。这就像一个你不想打开的混乱衣柜。“妈，告诉我怎么整理这个乱七八糟的衣柜，这样下次我就能找到我的运动裤了！”
如果你没有问这个问题，你还没有准备好接受答案。
有了判别联合类型，你可以恢复衣柜的秩序。现在，你可以这样分类你的衣服：
代码语言：javascript复制type Top = {
type: 'top';
material: string;
sleeveLength: 'short' | 'long';
};
type Bottom = {
type: 'bottom';
material: string;
length: 'short' | 'long';
};
type Clothing = Top | Bottom;
在这个例子中，type属性就是判别属性。它清楚地标识了一件衣物是“上衣”还是“下装”。当你使用Clothing类型时，TypeScript的类型系统可以使用这个判别属性来缩小类型范围，并根据是Top还是Bottom提供更具体的信息或检查。
例如，如果你从Clothing联合类型中访问一个项目，TypeScript会知道如果type是'top'，那么这个项目还会有sleeveLength属性；如果type是'bottom'，它将有length属性。这简化了不同类型的管理，增强了代码的安全性和清晰度。
现在，你可以轻松找到你的时尚短裤，它们在标有“Bottom: short”的第三个抽屉里。
通过这种方式，判别联合类型不仅让代码更加简洁明了，也让你在处理复杂类型时更加得心应手。
基础示例：消息应用程序中的判别联合类型
好吧，现在我们来点正经的。我们想要构建解决方案，而不仅仅是整理衣柜。考虑一个消息应用程序的场景，其中消息可以是文本、图片或系统通知。我们使用type属性作为判别属性，以清晰地区分这些消息类型：
代码语言：javascript复制type Message =
| { type: 'text'; content: string; sender: string }
| { type: 'image'; src: string; caption?: string }
| { type: 'system'; event: string };
当处理消息时，如果我们能立刻识别出正在处理的消息类型，是不是很方便？让我们看看使用判别联合类型能做些什么：
代码语言：javascript复制function displayTextMessage(content: string, sender: string) {
console.log(`来自${sender}的文本消息: ${content}`);
}
function displayImageMessage(src: string, caption?: string) {
console.log(`图片来源: ${src}`, `图片描述: ${caption ?? '无描述'}`);
}
function handleSystemEvent(event: string) {
console.log(`系统事件: ${event}`);
}
function handleMessage(message: Message) {
switch (message.type) {
case 'text':
// TypeScript 现在知道 `message` 是 `{ type: 'text'; content: string; sender: string }` 类型
displayTextMessage(message.content, message.sender);
break;
case 'image':
// `message` 现在是 `{ type: 'image'; src: string; caption?: string }` 类型
displayImageMessage(message.src, message.caption);
break;
case 'system':
// `message` 是 `{ type: 'system'; event: string }` 类型
handleSystemEvent(message.event);
break;
}
}
正确用法：
代码语言：javascript复制const sampleMessage: Message = { type: 'text', content: '你好，TypeScript！', sender: 'User123' };
handleMessage(sampleMessage);
// "来自User123的文本消息: 你好，TypeScript！"
错误用法：
代码语言：javascript复制handleMessage({ type: 'text', sender: 'User123' });
// TypeScript 类型错误：参数 `{ type: "text"; sender: string; }` 不可赋值给 `Message` 类型。
再举一个错误用法的例子：
代码语言：javascript复制handleMessage({ type: 'system', src: 'image.png', caption?: '看这张不同的裤子' });
// TypeScript 类型错误：对象文字可能只能指定已知属性，且 `src` 不存在于 `{ type: "system"; event: string; }` 类型中。
在第一个用法中，TypeScript不会报错，因为参数完全符合Message类型。然而，在第二个用法中，TypeScript会报错，因为缺少content属性，而content属性对于文本消息来说是必需的。最后，在第三个例子中，我们错误地将系统消息的属性与图片消息的属性混淆，导致类型错误。
在handleMessage函数中，TypeScript像一个敏锐的分类器。它检查每种情况下的消息类型，整齐地分类它们。这就像把你的消息分到不同的文件夹中：文本、图片、系统警报，确保我们只操作每种消息类型所对应的属性，准确地避免那些常见的运行时错误。就像确保你不会意外地给照片加上文字描述或给文本消息加上图片描述一样，保持整洁和无错误！
进阶示例：服务器端错误处理
现在，让我们看看一个更高级的解决方案：在服务器端应用程序中的错误处理。这是一个简化的示例，但其概念来自于我目前正在开发的真实应用程序。问题简述如下：随着最近Next.js的开发，我们需要对应用程序的服务器端逻辑进行一些重构。这次重构带来了一个独特的挑战，特别是在处理不同类型的错误方面。所以，我认为可以用这个例子来展示判别联合类型在实际场景中的实用性。
在像Next.js这样的服务器应用程序中，处理不同类型的错误（如ConflictError、UnauthorizedError和ValidationError）是至关重要的。判别联合类型允许我们以结构化和类型安全的方式管理这些错误。
代码语言：javascript复制interface ConflictError extends Error {
type: 'ConflictError';
}
interface UnauthorizedError extends Error {
type: 'UnauthorizedError';
}
interface ValidationError extends Error {
type: 'ValidationError';
details: string;
}
// 服务器错误的联合类型
type ServerError = ConflictError | UnauthorizedError | ValidationError;
const createConflictError = (message: string): ConflictError => {
const error = new Error(message) as ConflictError;
error.type = 'ConflictError';
return error;
};
const createUnauthorizedError = (message: string): UnauthorizedError => {
const error = new Error(message) as UnauthorizedError;
error.type = 'UnauthorizedError';
return error;
};
const createValidationError = (message: string, details: string): ValidationError => {
const error = new Error(message) as ValidationError;
error.type = 'ValidationError';
error.details = details;
return error;
};
function handleServerError(error: ServerError) {
switch (error.type) {
case 'ConflictError':
console.error(`冲突错误: ${error.message}`);
break;
case 'UnauthorizedError':
console.error(`未授权错误: ${error.message}`);
break;
case 'ValidationError':
console.error(`验证错误: ${error.message}, 详情: ${error.details}`);
break;
default:
console.error(`未处理的服务器错误: ${error}`);
}
}
// 模拟服务器操作
function simulateServerAction(action: string): void {
switch (action) {
case 'updateUsername':
throw createValidationError('无效的用户名', '用户名太短');
case 'deleteUser':
throw createUnauthorizedError('用户无权删除此账户');
default:
throw createConflictError('用户已存在');
}
}
// 测试服务器操作中的错误处理
try {
simulateServerAction('updateUsername');
} catch (error) {
if (error instanceof Error && 'type' in error) {
handleServerError(error as ServerError);
} else {
console.error('发生未知错误', error);
}
}
这个高级示例展示了在服务器应用程序中使用判别联合类型进行错误处理的有效方法。通过定义不同的服务器错误类型并使用工厂函数，我们创建了一种结构化且易于管理的错误处理方法。
handleServerError函数利用TypeScript的类型检查来准确处理不同的错误类型，从而提高代码的可读性和可维护性。
这个示例不仅展示了判别联合类型在处理复杂逻辑时的强大功能，也强调了TypeScript在提高代码质量方面的重要作用。
