如何使用多个tsconfig文件？

Question

我正在使用Visual Studio Code并且具有相当常见的项目结构:

??? client/
?   ??? tsconfig.json
??? shared/
??? server/
?   ??? tsconfig.json
??? project.json

这两个tsconfig文件具有不同的设置(例如,client/目标ES5 下的设置,server/目标ES6下的设置).

问题是我希望共享目录包含在两个项目中.我不能使用tsconfig这样做,因为该exclude选项不允许我包含一个比tsconfig.json更高的目录中的文件夹,并且使用files我必须不断保持文件列表是最新的,因为它不支持全球.

请注意,我可以通过将共享文件夹添加到tsc中来编译,我想要的是Visual Studio Code IDE识别intellisense的共享代码等.

是等待filesGlob的唯一选择吗？

Answer 1

正如其他人所提到的，如果前端和后端具有不同的类型，现有的答案并不能解决问题——几乎在所有情况下都是如此，因为前端代码支持dom而后端代码通常不支持。

拥有顶级tsconfig.json意味着dom代码将在前端代码（如果dom是 lib）中显示为错误，或者dom在后端代码中允许该代码（如果dom省略）。

这是一个有效的解决方案：

文件夹结构

我们的项目往往是“默认后端”，带有一个特定的前端代码文件夹。

??? src/
?   ??? frontend/ < Frontend
?   ?     ??? `tsconfig.json` (extends frontend framework defaults, eg Svelte)
?   ??? http/ < Backend
?   ??? events/ < Backend
??? tsconfig.json `tsconfig.json` (backend tsconfig)

后端 tsconfig.json

这通常是相当小的。我们jest用于测试和es2019JS stdlib。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es2019"],    
    "types": ["jest"],
  },
  "exclude": [
    "node_modules",
    "public/*",
    "src/frontend/*"
  ],
  "include": ["src/**/*"]
}

前端 tsconfig.json

这适用于 Svelte，但在旧框架中的工作方式类似。前端有不同的类型，因为它支持.svelte文件和dom

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // Default included above is es2017
    "target": "es2019",
  },
  "lib": ["es2019", "dom"],
}

前端特定工具

使用单独的 tsconfig 文件进行汇总：

export default {
  input: ...
  output: ...
  plugins: [
    ...
    typescript({
      tsconfig: "src/frontend/tsconfig.json",
      sourceMap: isDevelopment,
      inlineSources: isDevelopment,
    }),
    ...
  ],
   ...
};

Answer 2

tsconfig.json根使用单个。然后将其扩展到每个项目（backend tsconfig.server.json，frontend tsconfig.webpack.json）。

• 根tsconfig.json include: ['src']确保在IDE中对所有文件进行类型检查
• 后端tsconfig.server.json exclude: ['src/app']前端文件
• 前端：tsconfig.webpack.json exclude: ['src/backend']后端文件

资料夹结构

??? src/
?   ??? app/    < Frontend
?   ??? server/ < Backend
?   ??? common/ < Shared
??? tsconfig.json
??? tsconfig.server.json
??? tsconfig.webpack.json

配置文件

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src"
  ]
}

tsconfig.server.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/app"
  ]
}

tsconfig.webpack.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/server"
  ]
}

更多

范例课

Answer 3

我在这里回答:tsconfig扩展答案

答案的要点:

你可以通过扩展你的基本tsconfig.json文件来做到这一点:

tsconfig扩展名

只是不要排除基础tsconfig.json中的目录,打字稿应该能够为你解决你的打字(使用node_modules/@ types或者typings模块知道这是真的)

例如:

CONFIGS/base.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

tsconfig.json:

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

tsconfig.nostrictnull.json:

{
   "extends": "./tsconfig",
   "compilerOptions": {
     "strictNullChecks": false
   }
}

Answer 4

作为另一种变体，将npm命令与下一次运行绑定：

{
   'start': '...',
   'buildFront': 'tsc -p tsconfig.someName.json'
}