Frontend Academy · 课时

编译 TS 与 tsconfig.json

运行 tsc 编译 TypeScript，使用 tsconfig.json 中的 strict、target 和 outDir 等选项配置编译器。

第 4 / 4 课13 个步骤

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

安装 TypeScript 编译器

请将 TypeScript 安装为开发依赖项。tsc CLI 用于编译 TypeScript 文件。使用 Vite 或 Next.js 时，打包工具会处理编译，但仍会使用 tsc 进行类型检查。

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

初始化 tsconfig.json

运行 npx tsc --init，即可生成一个所有选项都被注释掉并带有合理默认值的 tsconfig.json。这个文件是 TypeScript 编译器的唯一配置文件。

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

tsconfig.json 的结构

主要部分包括：compilerOptions（编译器行为）、include（要编译的文件）和 exclude（要跳过的文件）。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target——输出 JavaScript 版本

target 指定 tsc 输出的 JavaScript 版本。现代环境使用 ES2022 或 ESNext。为了最大限度地兼容旧环境，可以使用 ES5（通常改由 Babel 处理）。

module——模块系统

module 控制输出的模块格式。Node.js 使用 CommonJS。打包工具（Vite、webpack）使用 ESNext 或 ES2022。使用 package.json 中 type:module 的现代 Node.js 项目使用 NodeNext。

strict——严格性标志

"strict": true 会启用一组严格检查，包括 strictNullChecks、noImplicitAny、strictFunctionTypes 等。新项目应始终启用它，因为它能捕获最多的错误。

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks——消除空值错误

启用 strictNullChecks 后，除非在联合类型中明确包含 null 和 undefined，否则它们不能赋值给其他类型。这会强制您处理空值情况。

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir 和 rootDir

outDir 指定编译后的 JS 文件存放位置。rootDir 设置 TypeScript 源文件的根目录。两者结合使用，可以在 dist/ 下保留源代码结构。

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths——模块别名

请使用 paths 选项（以及 baseUrl）配置路径别名。这样就可以导入 @/components/Button，而不必使用 ../../components/Button。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

监视模式与仅类型检查

tsc --watch 会在文件发生变化时重新编译。tsc --noEmit 会在不输出文件的情况下执行类型检查——这对于持续集成很有用，可以验证类型，同时避免重复打包工具的工作。

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

扩展 tsconfig.json

请使用 extends 继承基础配置。共享基础配置（例如 @tsconfig/strictest）提供了社区认可的最佳实践。

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

快速检查

哪个 tsconfig 选项可以启用完整的严格类型检查？

在交互式课程中回答

回顾：tsconfig.json

tsc 会将 TypeScript 编译为 JavaScript。tsconfig.json 控制 target（输出 ES 版本）、module（模块系统）、outDir、strict 和 paths。strict: true 能捕获最多的错误。在持续集成中使用 --noEmit，执行纯类型检查。请扩展社区基础配置，以采用最佳实践。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「编译 TS 与 tsconfig.json」课时是免费的吗？

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

「编译 TS 与 tsconfig.json」这节课中我会学到什么？

运行 tsc 编译 TypeScript，使用 tsconfig.json 中的 strict、target 和 outDir 等选项配置编译器。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「编译 TS 与 tsconfig.json」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy