pretty-ts-errors示例代码：examples目录的错误演示案例

TypeScript错误美化工具pretty-ts-errors让开发者能够更轻松地理解和修复TypeScript错误。该项目通过examples目录提供了丰富的错误演示案例，帮助用户快速掌握工具的使用方法。💫

📁 examples目录概览

examples目录包含多个文件，展示了不同类型的TypeScript错误：

• errors.ts - 标准TypeScript错误示例
• errors.js - JSDoc注释中的TypeScript错误
• errors.vue - Vue单文件组件中的错误
• examples.type - 复杂类型定义错误

🔍 TypeScript错误美化前后对比

pretty-ts-errors能够显著改善TypeScript错误消息的可读性。让我们看看具体的示例：

错误美化效果：左边的图片展示了美化后的TypeScript错误，错误消息被清晰地分为实际类型和期望类型，并采用语法高亮显示。右边的图片展示了原始的TypeScript错误，信息混乱难以理解。

📝 TypeScript错误示例解析

接口属性缺失错误

在errors.ts文件中，可以看到一个典型的接口属性缺失错误：

interface Person {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

const john: Person = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
  },
};

这里缺少了country属性，pretty-ts-errors会将这个错误美化为清晰的提示信息。

函数类型不匹配错误

另一个常见错误是函数返回类型不匹配：

type GetUserFunction = () => {
  user: {
    name: string;
    email: `${string}@${string}.${string}`;
    age: number;
  };
};

const getPerson: GetUserFunction = () => ({
  person: {
    username: "usr",
    email: "[e-mail]",
  },
});

Vue组件中的类型错误

在errors.vue文件中，展示了Vue单文件组件中的类型错误：

<script setup lang="ts">
import { RouterView } from "vue-router";

const x = [1, 2, 3, "4"];

function y(param: number[]) {}

y(x);
</script>

这里数组x包含字符串"4"，但函数y期望的是number[]类型。

🎯 错误美化核心功能

pretty-ts-errors通过以下方式提升错误消息的可读性：

1. 语法高亮 - 使用主题颜色对类型进行高亮显示
2. 视觉分组 - 将实际类型和期望类型分别显示在独立的代码块中
3. 简化流程 - 去除冗余信息，突出核心问题
4. 上下文关联 - 显示错误发生的具体位置和相关代码

🚀 快速上手指南

要体验这些错误示例，只需：

1. 克隆项目：git clone https://gitcode.com/gh_mirrors/pr/pretty-ts-errors
2. 打开examples目录中的任意文件
3. 观察VSCode中显示的TypeScript错误消息

💡 使用技巧

• 悬停查看 - 将鼠标悬停在错误代码上查看美化后的错误信息
• 快速导航 - 使用提供的按钮快速跳转到相关类型声明
• 多格式支持 - 支持.ts、.js、.vue、.tsx等多种文件格式

通过examples目录的演示案例，开发者可以直观地感受到pretty-ts-errors如何将复杂难懂的TypeScript错误转化为清晰易懂的提示信息。🌟