0Pricing
TypeScript Academy · 课时

将 TypeScript 编译为 JavaScript

了解 TypeScript 编译器及其输出。

将 TypeScript 编译为 JavaScript 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

TypeScript 不能直接在 Node.js 或浏览器中运行，必须先编译为 JavaScript。本课将介绍 TypeScript 编译器的工作方式。

安装 TypeScript 编译器

请将 TypeScript 作为项目中的开发依赖进行安装。安装后，`tsc` 命令就可以在本地脚本中使用了。
npm install --save-dev typescript
npx tsc --version

首次进行编译

运行 `tsc hello.ts` 可以编译单个文件。它会在同一目录中生成 `hello.js`，并移除其中的所有类型。
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json：项目配置

实际项目需要一个 `tsconfig.json`。运行 `tsc --init` 可以生成该文件。它用于控制目标版本、模块格式、严格程度、输出目录等设置。
npx tsc --init
// Creates tsconfig.json with defaults and comments

配置文件的关键选项

最重要的配置项包括目标版本（输出的 ES 版本）、模块格式、outDir（输出文件夹）以及严格检查设置。
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

使用监视模式自动编译

运行 `tsc --watch` 后，每当您保存 TypeScript 文件，系统都会自动重新编译。这可以加快开发循环。
npx tsc --watch
// Watches for changes and recompiles on save

noEmit：只进行类型检查而不生成文件

启用 `noEmit` 标志后，类型检查器会运行，但不会写入任何输出文件。这对于使用捆绑工具（例如实际负责编译的工具）的持续集成流水线很有用。
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

更快的替代方案

在开发过程中，您可以使用 `ts-node` 或速度更快的 `tsx` 工具直接运行 TypeScript，而不需要单独的编译步骤。
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

用于调试的源映射

启用 `sourceMap: true`，让浏览器开发者工具和 Node.js 调试器能够将编译后的 JS 行映射回原始 TypeScript 源代码。
{ "compilerOptions": { "sourceMap": true } }

声明文件（.d.ts）

启用 `declaration: true` 后，编译器还会生成 `.d.ts` 文件。这些文件允许其他 TypeScript 项目使用您的库，并获得完整的类型信息。
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

编译器错误默认不会阻止输出

默认情况下，即使 TypeScript 存在类型错误，`tsc` 仍会输出 JavaScript，但会以非零代码退出。使用 `noEmitOnError: true` 可以在发生错误时停止输出。
{ "compilerOptions": { "noEmitOnError": true } }

快速检查

运行 `tsc --noEmit` 可以实现什么效果？

回顾

TypeScript 编译器会将 TypeScript 文件转换为 JavaScript。使用配置文件进行配置，开发时使用监视模式，仅进行类型检查时使用 `--noEmit`，还可以使用直接运行 TypeScript 的工具。

常见问题解答

「将 TypeScript 编译为 JavaScript」课时是免费的吗？

是的 — 「将 TypeScript 编译为 JavaScript」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「将 TypeScript 编译为 JavaScript」这节课中我会学到什么？

了解 TypeScript 编译器及其输出。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「将 TypeScript 编译为 JavaScript」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. JavaScript 的痛点：运行时错误
  2. TypeScript 为 JavaScript 带来了什么
  3. 将 TypeScript 编译为 JavaScript
  4. 何时在项目中使用 TypeScript
← 返回 TypeScript Academy