概述与安装
约 979 字大约 3 分钟
2026-02-09
TypeScript 是 JavaScript 的超集。其通过在编译期阶段就够发现类型错误,从而减少代码的运行时错误。因此 TypeScript 只存在于开发和编译阶段,最终运行的还是 JavaScript 代码
安装
优先使用项目内安装
install.sh
pnpm add -D typescriptinit.sh
pnpx tsc --init浏览器或 Node 环境下无法直接识别 TypeScript 代码,任何 TS 代码都需要经过 TSC 编译转换为 JS 后运行,经过编译后的代码同时也满足了对不同浏览器以及版本的兼容性需求
pnpx tsc ./src/index.tsts-node
如果想要在编译转换完成后直接运行,则需安装 ts-node
install.sh
pnpm add -D ts-nodepackage.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 --inittsconfig.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"]