创建 TypeScript 的配置文件 tsconfig.json
npx tsc --init
tsconfig.json 文件基础结构
{"compilerOptions": {"target": "ES2022","module": "ES2022","moduleResolution": "node10","strict": true,"esModuleInterop": true,"forceConsistentCasingInFileNames": true,"outDir": "./dist","rootDir": "./src","sourceMap": true,"skipLibCheck": true},"include": ["src"],"exclude": ["node_modules", "dist"]
}
主要配置说明:
配置 | 说明 |
---|---|
target | 生成的 JavaScript 版本,选项如下: ES3:适用于老旧浏览器,如 IE6-IE8。 ES5:兼容性好,适用于大多数现代浏览器(IE9+)。 ES6 / ES2015、ES2016、ES2017、ES2018...ES2024等。 ESNext:始终使用最新的 ECMAScript 版本。 |
module | 指定模块化的方式,选项如下: None: 不使用模块化。 如果你是Node.js+TypeScript+ES6+(例如ES2022)环境,那么就选择ES2022 |
strict | 是否使用TypeScript 的严格类型检查。true:启用,false:不启用。 |
esModuleInterop | 是否允许 TypeScript 兼容 CommonJS 模块与 ECMAScript 模块的导入。 |
forceConsistentCasingInFileNames | 是否强制确保文件名的大小写一致。 |
outDir | 指定编译后的 JavaScript 文件存放的目录。 |
rootDir | 指定 TypeScript 编译器查找输入文件的根目录。它定义了源代码的根目录,编译器会相对于这个目录编译文件并保持目录结构。编译时会以该目录为基准,生成对应的输出文件。 |
sourceMap | 生成源映射文件。启用该选项后,编译器会生成 .map 文件,这些文件将 JavaScript 代码与原始 TypeScript 代码关联起来,有助于调试。这样,在浏览器或调试器中调试时,可以直接查看 TypeScript 源代码,而不是编译后的 JavaScript 代码。 |
skipLibCheck | 跳过对库文件(如 node_modules 中的声明文件)进行类型检查。这可以加速编译过程,尤其是在大型项目中,尽管这可能会导致某些库文件的类型错误无法被检测到。除非你有性能需求,不然建议关闭这个选项。 |
include | 指定哪些文件或目录应该被 TypeScript 编译。它是一个包含文件路径的数组,可以指定具体的文件或文件夹。 |
exclude | 指定哪些文件或目录应该从编译过程中排除。与 include 相反,exclude 列出了不需要编译的文件或目录。 |
baseUrl | 指定模块解析的根目录。设置了 baseUrl 后,你可以使用相对路径的方式导入模块,避免过多的 ../../ 这样的路径。 |
paths | 指定模块的别名或路径映射。通过与 baseUrl 配合使用,允许你为模块指定更简洁的导入路径,而不是使用相对路径。 |
moduleResolution | 控制 TypeScript 如何解析模块,选项如下: node:遵循 Node.js 模块解析规则。 |
resolveJsonModule | 导入 JSON 文件,true:允许,false:不允许 |
noUnusedLocals | 检测未使用的局部变量,true:检测,false:不检测 |
noUnusedParameters | 检测未使用的函数参数,true:检测,false:不检测 |
strictPropertyInitialization | 确保类属性在构造函数中被正确初始化,true:检测,false:不检测 |
TypeScript 编译
在 tsconfig.json 配置完成后,可以使用 tsc 进行编译,会读取 tsconfig.json 并进行编译,生成 .js 文件
npx tsc
如果想让 TypeScript 自动编译,可以使用 --watch 模式,TypeScript 代码一旦修改,编译器会自动重新编译。
# 自动编译
npx tsc --watch