CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
前端工具链入门/课时/类型检查
RawBlame
课时目录12 节

前端工具链入门

  1. 01前端工具链概览
  2. 02npm 与 package.json
  3. 03Yarn 与 pnpm
  4. 04模块打包器
  5. 05Vite / esbuild / SWC
  6. 06Rollup 与 Parcel
  7. 07ESLint
  8. 08Prettier 与 Biome
  9. 09类型检查
  10. 10部署平台
  11. 11Bun 与 Rolldown
  12. 12综合练习

类型检查

type-checkers;衔接 typescript-essentials。

25 分钟

类型检查

TypeScript 的价值在 编译期类型检查——但现代框架常把 转译 交给 esbuild/SWC(快),把 类型检查 单独跑 tsc。本课对应路线图 type-checkers 节点,衔接 typescript-essentials。

学习目标

  • 区分「转译 TS」与「类型检查」两条流水线
  • 会配置 tsc --noEmit 与 tsconfig.json 关键项
  • 知道 CI 中 typecheck 与 build 的推荐顺序

两条流水线

开发保存
    → SWC/esbuild 去掉类型、转 JSX(快,可能跳过类型错误)
    → IDE tsserver 实时红线(开发反馈)

CI / 提交前
    → tsc --noEmit(全项目类型检查,不产出 js)
    → eslint(逻辑规则)
    → build(生产打包)

坑:本地 vite dev 能跑,但 CI tsc 失败——说明 不能只信 dev server。

tsconfig 要点

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}
选项含义
strict开启 null 检查等严格模式
noEmit只检查不输出(配合 Vite/Next 内置转译)
skipLibCheck跳过 .d.ts 检查,加快 CI

深入语法见 typescript-essentials 各课;本课聚焦 工程接入。

package.json scripts

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "build": "next build"
  }
}

Next.js 项目:next build 可能 含类型检查(视配置);显式 typecheck script 更清晰。

与 javascript-core 的关系

js-types 讲运行时 typeof;TypeScript 是 静态 类型层。未学 TS 也可先 JS 写 react-essentials,但 platform 与 nextjs-essentials 默认 TS——建议并行推进。

渐进迁移

老 JS 项目:

  1. allowJs: true 混用
  2. 关键模块改 .ts
  3. 开 strict 前用 临时标记技术债
// @ts-expect-error

练习

  • 在 TS 项目故意写错 props 类型,确认 IDE 与 tsc 都报错
  • CI 顺序草图:install → typecheck → lint → build
  • 读 tsconfig.json 解释 include 与 exclude 各一项

小结

快转译不等于类型安全;tsc --noEmit 是 TS 项目的门禁。 下一课讲构建产物如何部署到 Vercel、Netlify、Cloudflare Pages。

加载本节练习…
← 上一课Prettier 与 Biome下一课 →部署平台