TSConfig推荐配置

最新推荐文章于 2025-04-28 15:25:59 发布

原创最新推荐文章于 2025-04-28 15:25:59 发布

· 3.3k 阅读

25 ·

版权

文章标签：

#vue.js #typescript #开发语言

安装使用

关于tsconfig.json配置，推荐使用下面方式

安装命令

npm install --save-dev @total-typescript/tsconfig

将其添加到tsconfig.json：

{
  // I'm building an app that runs in the DOM with an external bundler
  "extends": "@total-typescript/tsconfig/bundler/dom/app"
}

完整配置

示例

{
  "compilerOptions": {
    /* 基本配置 */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,

    /* 严格验证 */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,

    /* TypeScript编译 */
    "module": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,

    /* 使用 library: */
    "declaration": true,

    /* 使用单一代码库: */
    "composite": true,
    "declarationMap": true,

    /* 非TypeScript编译: */
    "module": "preserve",
    "noEmit": true,

    /* 代码在DOM中运行 */
    "lib": ["es2022", "dom", "dom.iterable"],

    /* 代码不在DOM中运行 */
    "lib": ["es2022"]
  }
}

其他配置

首先根据是否使用TS编译可选择下面两种配置方式

使用TS

使用tsc将 .ts 文件转换为 .js文件

{
  // My code runs in the DOM:
  "extends": "@total-typescript/tsconfig/tsc/dom/app", // For an app
  "extends": "@total-typescript/tsconfig/tsc/dom/library", // For a library
  "extends": "@total-typescript/tsconfig/tsc/dom/library-monorepo", // For a library in a monorepo

  // My code _doesn't_ run in the DOM (for instance, in Node.js):
  "extends": "@total-typescript/tsconfig/tsc/no-dom/app", // For an app
  "extends": "@total-typescript/tsconfig/tsc/no-dom/library", // For a library
  "extends": "@total-typescript/tsconfig/tsc/no-dom/library-monorepo" // For a library in a monorepo
}

非使用TS

大多数前端框架（如 Vite、Remix、Astro、Nuxt 等）都使用外部打包器，如果是这样，请使用以下配置选择：

{
  // My code runs in the DOM:
  "extends": "@total-typescript/tsconfig/bundler/dom/app", // For an app
  "extends": "@total-typescript/tsconfig/bundler/dom/library", // For a library
  "extends": "@total-typescript/tsconfig/bundler/dom/library-monorepo", // For a library in a monorepo

  // My code _doesn't_ run in the DOM (for instance, in Node.js):
  "extends": "@total-typescript/tsconfig/bundler/no-dom/app", // For an app
  "extends": "@total-typescript/tsconfig/bundler/no-dom/library", // For a library
  "extends": "@total-typescript/tsconfig/bundler/no-dom/library-monorepo" // For a library in a monorepo
}

jsx

如果你的应用程序有 JSX，你可以在你的应用程序jsx中设置选项：tsconfig.json

{
  "extends": "@total-typescript/tsconfig/bundler/dom/app",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

`outDir`

与您使用进行转译时最相关tsc。如果要更改编译文件的输出目录，您可以outDir在中设置选项tsconfig.json：

{
  "extends": "@total-typescript/tsconfig/tsc/no-dom/library",
  "compilerOptions": {
    "outDir": "dist"
  }
}

配置解析

基本选项

{
  "compilerOptions": {
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "es2022",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true
  }
}

esModuleInterop：帮助修复 CommonJS 和 ES 模块之间的一些缺陷。

skipLibCheck：跳过检查文件类型.d.ts。这对于性能很重要，因为否则node_modules将检查所有内容。

target：您目标的 JavaScript 版本。为了稳定，我建议es2022使用以上版本。
esnext

allowJs和resolveJsonModule：允许您导入.js和.json文件。总是有用的。

moduleDetection：此选项强制 TypeScript 将所有文件视为模块。这有助于避免“无法重新声明块范围变量”错误。

isolatedModules：此选项可防止一些将模块视为独立文件时不安全的 TS 功能。

verbatimModuleSyntax：此选项强制您使用import type和export type，从而实现更可预测的行为和更少的不必要的导入。使用module: NodeNext，它还会强制您使用正确的 ESM 或 CJS 导入语法。

严格性

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true
  }
}

strict：启用所有严格类型检查选项。不可或缺。

noUncheckedIndexedAccess：阻止您访问数组或对象，除非先检查其是否已定义。这是防止运行时错误的好方法，应该包含在内strict。

noImplicitOverride：使override关键字在实际中真正有用。

许多人推荐了中的严格性选项tsconfig/bases，这是一个很棒的 repo，它对 TSConfig 选项进行了分类。这些选项包括许多我认为太“嘈杂”的规则，例如noImplicitReturns、和noUnusedLocals。我建议您仅在需要时将这些规则添加到您的配置文件中。

noUnusedParameters noFallthroughCasesInSwitch tsconfig.json

使用TS转译

使用转换代码（创建 JavaScript 文件）tsc，需要这些选项

{
  "compilerOptions": {
    "module": "NodeNext",
    "outDir": "dist"
  }
}

module：告诉 TypeScript 使用什么模块语法。NodeNext是 Node 的最佳选项。moduleResolution: NodeNext是从此选项隐含的。

outDir：告诉 TypeScript 将编译后的 JavaScript 文件放在哪里。dist是我喜欢的惯例，但这取决于你。

资源库

使用资源库，需要设置 declaration: true

{
  "compilerOptions": {
    "declaration": true
  }
}

declaration：告诉 TypeScript 发出.d.ts文件。这是必需的，以便库可以自动完成 .js 正在创建的文件。

单一代码库

{
  "compilerOptions": {
    "declaration": true,
    "composite": true,
    "sourceMap": true,
    "declarationMap": true
  }
}

composite：告诉 TypeScript 发出.tsbuildinfo文件。这会告诉 TypeScript 您的项目是 monorepo 的一部分，并且还帮助它缓存构建以加快运行速度。

sourceMap和declarationMap：告诉 TypeScript 发出源映射和声明映射。这些是必需的，以便当您的库的使用者进行调试时，他们可以使用转到定义跳转到原始源代码。

不使用TS转译

不使用来转换代码tsc，即使用 TypeScript 作为 linter，那么您会需要这些选项。

{
  "compilerOptions": {
    "module": "preserve",
    "noEmit": true
  }
}

module：preserve是最好的选择，因为它最接近地模仿了捆绑器处理模块的方式。moduleResolution: Bundler是从此选项中隐含的。

noEmit：告诉 TypeScript 不要发出任何文件。当您使用捆绑器时，这很重要，这样您就不会发出无用的.js文件。

DOM中运行

{
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable"]
  }
}

lib：告诉 TypeScript 要包含哪些内置类型。es2022是稳定性的最佳选择。dom并dom.iterable为您提供window.document类型等

不在DOM中运行

{
  "compilerOptions": {
    "lib": ["es2022"]
  }
}

这些与上面的相同，但没有dom和dom.iterable类型。