typescript - 如何在 vs-code 中使用多个 tsconfig 文件？

Question

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

├── client/
│   ├── tsconfig.json
├── shared/
├── server/
│   ├── tsconfig.json
├── project.json

这两个 tsconfig 文件有不同的设置（例如，一个在client/目标 ES5 下，一个在server/目标 ES6 下）。注意根目录下没有tsconfig。

问题是我希望共享目录包含在两个项目中。我无法使用 tsconfig 执行此操作，因为该exclude选项不允许我包含位于比 tsconfig.json 更高目录中的文件夹，并且使用files我必须不断更新文件列表，因为它没有支持球体。

请注意，我可以通过将共享文件夹添加到 tsc 来很好地编译，我想要的是 Visual Studio Code IDE 能够识别智能感知等的共享代码。

是等待filesGlob的唯一选择吗？

Answer 1

如今，由于 vscode 对此提供了更好的支持，因此变得容易得多。

您可以使用此目录结构，因此所有代码都是独立的：

├── frontend/
│   ├── src/
│   │   ├── <frontend code>
│   ├── package.json
│   ├── tsconfig.json
├── shared/
│   ├── package.json
├── backend/
│   ├── src/
│   │   ├── <backend code>
│   ├── package.json
│   ├── tsconfig.json

然后在后端和前端tsconfig.json：

{
  "compilerOptions": {
    "paths": {
      "~shared/*": ["../shared/*"]
    },
    "rootDirs": [
      "./src",
      "../shared"
    ]
  }
}

允许访问共享代码，例如：

import { Foo } from '~shared/foo';

---

旧答案

使用单个tsconfig.json作为根。然后为每个项目（后端tsconfig.server.json，前端tsconfig.webpack.json）扩展它。

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

文件夹结构

├── 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.webpack.json

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

tsconfig.server.json

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

更多的

示例课

Answer 2

正如其他人所提到的，如果前端和后端具有不同的类型，现有的答案并不能解决问题——几乎在所有情况下，前端代码都支持，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 标准库。

{
  "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 3

我在这里回答了这个问题：tsconfig extension answer

答案的要点：

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

tsconfig 扩展

只是不要排除基础 tsconfig.json 中的目录，打字稿应该能够为你解析你的打字（知道这是真的，使用 node_modules/@types 或打字模块）

例如：

配置/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'
}

Answer 5

新版本的 VSCode 支持 Typescript 2，添加此include选项会在 tsconfig.json 中添加对 glob 的支持。见http://www.typescriptlang.org/docs/handbook/tsconfig-json.html