概述与安装

约 979 字大约 3 分钟

2026-02-09

TypeScript 是 JavaScript 的超集。其通过在编译期阶段就够发现类型错误，从而减少代码的运行时错误。因此 TypeScript 只存在于开发和编译阶段，最终运行的还是 JavaScript 代码

安装

优先使用项目内安装

install.sh

pnpm add -D typescript

init.sh

pnpx tsc --init

浏览器或 Node 环境下无法直接识别 TypeScript 代码，任何 TS 代码都需要经过 TSC 编译转换为 JS 后运行，经过编译后的代码同时也满足了对不同浏览器以及版本的兼容性需求

pnpx tsc ./src/index.ts

ts-node

如果想要在编译转换完成后直接运行，则需安装 ts-node

install.sh

pnpm add -D ts-node

package.json

"scripts": {
  "dev": "nodemon --watch src -e ts --exec ts-node ./src/index.ts"
}

tsconfig

tsconfig.json 是 TypeScript 项目的核心配置文件，告诉 TypeScript 编译器（tsc）应该如何编译这个项目

简单来说，它回答了下面这些问题

哪些文件要被当作 TypeScript 文件来编译
编译出来的 JavaScript 应该是什么语法（ES5/ES6/ESNext...）
支持哪些新的 JavaScript 特性
是否开启严格类型检查
要不要生成 .d.ts 声明文件
输出文件放在哪里 -是否允许使用 CommonJS、ES Module、UMD 等模块格式

可以直接使用 tsc 命令生成一个基础的 tsconfig.json 文件

init.sh

pnpx tsc --init

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

常见的 compilerOptions 配置项

选项	含义	常见建议
`target`	编译目标 JS 版本	现代项目常用 `ES2020+`
`module`	输出模块格式	前端工程一般 `ESNext`
`moduleResolution`	模块解析策略	常用 `Bundler`，Node 场景常用 `NodeNext`
`strict`	开启严格模式总开关	建议开启
`noImplicitAny`	禁止隐式 `any`	建议开启
`strictNullChecks`	区分 `null/undefined`	建议开启
`skipLibCheck`	跳过依赖库类型检查	大多数项目可开启提升速度
`baseUrl`	基础路径	用于配置路径别名
`paths`	路径别名	用于配置路径别名
`lib`	库文件	用于指定库文件

还有 include 和 exclude 配置项，用于指定哪些文件需要被编译，哪些文件不需要被编译。但他们不属于 compilerOptions 配置项，而是属于 tsconfig.json 的根配置项

`moduleResolution`

用于告诉 TypeScript 当看到 import xxx from "yyy" 的时候，应该去哪里、用什么规则来找这个模块

常用选项

选项	含义	是否允许无扩展名	是否允许导入 `.ts/.tsx`	典型使用场景
`Bundler`	按现代打包工具的解析规则解析模块	是	是	前端项目
`NodeNext`	按 Node.js ESM + CJS 双模式的规则解析模块	否（ESM 需要写扩展名）	是	Node.js ESM 项目
`Node`	按旧版 Node.js CommonJS 的规则解析模块	是	不支持	老 Node 项目
`Classic`	TypeScript 早期的解析策略，不考虑 Node 的 `node_modules` 规则	是	是	几乎已废弃

`lib`

告诉 TypeScript 编译器：在这个项目里，可以假定运行时环境已经内置了哪些 JavaScript 的 API 和类型定义

常用选项

选项	包含的主要新特性 / API
`DOM`	浏览器环境的核心类型定义，例如 `window`、`document`、`HTMLElement`、`Event`、`fetch`、`setTimeout` 等
`DOM.Iterable`	为 DOM 集合补充可迭代能力，例如 `NodeList`、`HTMLCollection` 可被 `for...of`、展开运算符等语法遍历
`WebWorker`	Web Worker 运行时的全局类型，例如 `self`、`postMessage`、`onmessage` 等
`ES6`	ES2015 的标准库类型，例如 `Promise`、`Map`、`Set`、`Symbol`、`Iterator`、`Proxy` 等
`ESNext`	当前 TypeScript 已支持的 "最新 ECMAScript 提案/标准" 类型集合，适合希望尽早获得新 API 类型支持的项目

常用写法

"lib": ["ESNext", "DOM", "DOM.Iterable"]