什么是TypeScript？非开发者的通俗指南

TypeScript是带有类型的JavaScript。你可以添加标签，说明每个值应该是哪种数据，例如数字、文本或订单列表，TypeScript会在代码运行之前检查是否存在不匹配的情况。TypeScript官网将其描述为“带有类型语法的JavaScript”。在转换为普通JavaScript时，类型会被去除，而转换后的JavaScript可以在任何支持JavaScript的环境中运行。

用AI搭建时，它为什么重要

AI模型编写代码很快，但快速生成的代码也会出错：一个文件中叫customerName的字段，在另一个文件中却叫customer_name；价格以文本而非数字的形式传入；函数调用时缺少某个值。在普通JavaScript中，许多此类错误只有在有人点错按钮时才会暴露。

TypeScript会在编写代码的阶段更早地发现其中许多问题：

• AI能即时获得反馈。 类型错误会指出具体有问题的那一行，因此智能体可以在你看到之前就修复它。
• 修改更安全。 重命名一个字段时，TypeScript会标出每一处仍在使用旧名称的地方。
• 代码本身就能说明意图。 类型记录了函数需要什么输入、返回什么结果，这对你、AI以及之后维护它的任何开发者都有帮助。
• 编辑器更智能。 自动补全和“跳转到定义”的功能效果更好，因为编辑器知道每个值的类型。

这也是许多AI应用搭建工具默认使用TypeScript的重要原因。

一个日常类比

可以把它想象成一个带标签货位的仓库。每个货位都有标牌：“仅限托盘货物”“冷藏”“最大承重500公斤”。货物送达时，门口的检查员会将货物与标牌进行比对。本应进入干货区的冷冻鱼会在门口就被拦下，而不是等到一周后散发出异味才被发现。

TypeScript就是门口的检查员。类型就是那些标牌。检查发生在货物（即你的代码）投入使用之前。而一切就位之后，标牌就会被取下：运行中的JavaScript里已经没有任何类型。

TypeScript的工作原理

1. 你（或AI）编写.ts或.tsx文件：即带有类型标签的TypeScript。
2. 类型检查器读取代码，并在编辑器或构建过程中把不匹配的地方报告为错误。
3. 构建步骤去除类型，生成普通的JavaScript。
4. JavaScript在浏览器或服务器（Node.js、Deno、Bun）中运行。

一个重要的结果是：TypeScript检查的是你编写的代码，而不是应用运行时到达的数据。如果外部API返回了意外的内容，除非你添加运行时验证，否则TypeScript无法察觉。

实例：一个预约表单

假设你正在为一家理发店构建预约应用。下面是描述一条预约的类型：

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // 问号表示可选
};

以及一个计算定金的函数：

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

现在看看TypeScript能发现什么。

字段拼写错误。

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript会报告prise不是已知属性，并且缺少price。在普通JavaScript中，这段代码会悄悄算出一个NaN（非数字）的定金。

类型错误的值。

const booking: Booking = { ...otherFields, price: "40" };

TypeScript会报告字符串不能用于需要数字的地方。没有它时，"40" * 0.2恰好能算出结果，但"40" + 5会得到"405"，这种错误会出现在发票上。

不存在的服务项目。

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript会报告"perm"不是允许的服务项目之一。之后如果理发店新增了烫发，你只需把它加入类型定义，TypeScript就会标出每一处需要更新的地方，包括价格表、表单和日历颜色。

它无法发现的问题。 如果预约表单从浏览器向服务器发送price: "40"，服务器上的TypeScript在运行时看不到这一点。这就是为什么设计良好的应用还会验证传入的数据，通常借助验证库检查数据结构，并将其转换为正确的Booking。

TypeScript与JavaScript对比

常用术语解释

常见错误与误解

• “TypeScript能让代码没有bug。” 它只能发现数据结构上的不匹配，发现不了错误的逻辑。把2%的费率写成了20%，类型检查照样通过。
• “类型能保护我免受错误输入的影响。” 类型在运行时会消失。请对来自用户、表单和API的数据进行验证。
• 到处使用any。 AI遇到卡点时，可能会使用any或// @ts-ignore来压制错误。这是在掩盖问题，而不是解决问题。
• 因为预览能运行就忽略类型错误。 有些工具仍会运行带有类型错误的代码。这些错误依然是潜伏的bug。
• “TypeScript更慢。” 类型在运行前就已被去除；实际运行的JavaScript基本相同。
• “它只适合大团队。” 独立开发者同样受益，尤其是当AI承担了大部分编辑工作时。

向你的AI搭建工具提出什么要求

• “使用TypeScript并开启严格模式。”
• “为我们的主要记录（如Customer、Booking、Invoice）定义共享类型，并同时在前端和后端使用。”
• “不要用any或@ts-ignore来绕过错误；请修复根本问题，并告诉我问题是什么。”
• “不要只依赖类型，服务器上要验证所有传入的数据。”
• “在告诉我完成之前，先运行类型检查器并修复所有错误。”
• “重命名字段时，更新TypeScript标出的每一处。”
• “用平实的语言解释这个类型错误。”

关于如何检查AI生成的内容，可参阅如何审查AI生成的代码和如何调试AI搭建的应用。

Mythex中的TypeScript

如果你没有特别要求，Mythex的新项目会使用Vite + React + TypeScript + Tailwind。代码编辑器包含语言智能功能，例如针对TypeScript和JavaScript（以及其他语言）的代码补全、诊断和跳转到定义，因此类型错误会直接显示在代码中，而不仅仅出现在预览里。免费版中编辑器为只读，Pro版中可完全编辑。你仍可以在第一条提示中要求其他配置；技术选型方式的文档页面说明了操作方法，代码编辑器文档则介绍编辑器显示的内容。

常见问题