开发者工具与源码扩展参考：WASM、TSX、GraphQL 等
现代开发者的工具箱中充满了专门的文件格式。从编译后的 WebAssembly 模块到类型定义文件以及数据库的特定领域语言，了解这些扩展名是驾驭任何现代代码库的关键。
本参考指南解释了常见开发特定文件扩展名的“是谁、是什么以及为什么”。
快速参考表：开发源码扩展名
| 扩展名 | 全称 | 生态系统 | 用途 |
|---|---|---|---|
.wasm |
WebAssembly Binary | Web / 边缘计算 | 用于高性能 Web 应用的编译代码 |
.wat |
WebAssembly Text | Web 开发 | WASM 的人类可读版本 |
.map |
Source Map | Web 开发 | 将压缩后的代码映射回源码以便调试 |
.d.ts |
Type Definition | TypeScript | 描述 JavaScript 库的形状 |
.tsx / .jsx |
TypeScript/JS XML | React / Solid | 在单个文件中结合逻辑和 UI |
.vue / .svelte |
Vue/Svelte Component | Vue / Svelte | 单文件组件 (SFC) |
.astro |
Astro Component | Astro 框架 | 基于群岛架构的 Web 组件 |
.mdx |
Markdown with JSX | 文档 | 带有 React 组件的交互式文档 |
.prisma |
Prisma Schema | 数据库 / ORM | 定义数据库模型和关系 |
.graphql / .gql |
GraphQL Query/Schema | APIs / GraphQL | 定义 API 模式和数据查询 |
1. 高性能 Web (.wasm, .wat)
WebAssembly (WASM) 允许使用 C++、Rust 或 Go 等语言编写的代码以接近原生的速度在浏览器中运行。
- WASM：浏览器执行的二进制文件。你不会直接编辑它。
- WAT：WASM 的人类可读文本格式。它看起来像 Lisp（很多括号），用于手动检查或学习 WebAssembly 的工作原理。
2. TypeScript 和 React (.d.ts, .tsx, .jsx)
随着 Web 向“基于组件”的 UI 发展，需要新的格式将类 HTML 标签与 JavaScript/TypeScript 逻辑混合。
- JSX / TSX：由 React 和类似框架使用。它允许你在函数内部直接编写
<div>标签。 - D.TS：这些是“声明”文件。它们不包含任何可执行代码；它们只是告诉 TypeScript 编译器 JavaScript 库中存在哪些函数和变量，从而为你提供更好的自动补全 (IntelliSense)。
3. 现代框架组件 (.vue, .svelte, .astro)
许多现代框架使用单文件组件 (SFC)，其中特定 UI 元素的 HTML、CSS 和逻辑共同存在于一个文件中。
- Vue & Svelte：为它们的组件逻辑使用特定的扩展名。
- Astro：一个较新的框架（本网站正是由它驱动！），允许你一起使用来自任何其他框架（React、Vue、Svelte）的组件。
4. 数据库和 API 模式 (.prisma, .graphql)
随着应用变得越来越复杂，我们需要专门的语言来定义数据结构和查询方式。
- Prisma：一个现代数据库工具包。你在
.prisma文件中定义表和关系，它会自动为你生成数据库。 - GraphQL：REST API 的一种替代方案。
.graphql文件定义“Schema”（有哪些可用数据）和“Queries”（你到底想获取哪些数据）。
5. 调试和文档 (.map, .mdx)
- Source Maps (.map)：当你部署代码时，它通常会被“压缩”成单个不可读的行以节省空间。
.map文件告诉浏览器的调试器压缩后的代码具体对应原始源码的哪一行，从而使在生产环境中调试应用成为可能。 - MDX：两全其美——它允许你编写标准 Markdown，但在文档内部导入并使用 React 组件。非常适合交互式技术文档。
常见问题 (FAQ)
问：为什么我不能直接运行 .wasm 文件？
**答：**WASM 是一种低级格式，旨在由虚拟机（通常在 Web 浏览器内部或像 Wasmtime 这样的运行时）执行。它需要一个“宿主”环境来管理内存和输入/输出。
问：我需要将 .map 文件提交到 Git 仓库吗？
**答：**通常不需要。Source Map 是在构建过程中生成的。但是，你应该将它们上传到错误追踪服务（如 Sentry），这样在发生错误时你就能看到可读的堆栈跟踪。
问：.gql 和 .graphql 之间有什么区别？
**答：**技术上没有区别。两者都用于 GraphQL 模式和查询。大多数 IDE 插件都能同等识别两者。