NX 和 NextJS monorepo 中的全局类型声明

Question

我一直在网上寻找解决问题的好方法，但到目前为止我还没有。

我有一个带有 NextJS 的 NX monorepo，我正在尝试创建一个全局 types/ 文件夹，可供我的所有应用程序和库使用。

我原以为这会很简单，我会在根目录中添加一个文件夹并将我所有的 .d.ts 文件放在那里。然后在 tsconfig.base.json 我会添加

"typeRoots": [
  "node_modules/@types",
  "node_modules/next/types",
  "types/"
]

我希望它会这么简单。

允许我在 monorepo 中的任何地方使用我的输入，而无需导入它们。

很遗憾，这不起作用。经过大量的混乱，我确实设法让它工作，但前提是 types/ 文件夹位于应用程序内部，例如：

apps/
    /myApp/
          /types/            <- types here were detected
types/                       <- types here were not detected
tsconfig.base.json

这对我没有好处，因为这意味着我必须在所有应用程序和库中复制我的类型。

official recommendation from NX 是添加一个新库来存储您的类型，然后将其导入并在您的每个应用程序和库中使用它，但这对我来说真的很笨重。此外，这并不适用于将其添加到 tsbase.config.json 中的typeRoots 的想法

如果有人知道可以做到这一点的更好方法，我很想听听。

干杯。

Answer 1

现在正在与同样的问题作斗争。 到目前为止，这适用于我的项目，但它仍然不是一个理想的解决方案。我宁愿有一个全球供应商。

apps/
    /myApp/
          tsconfig.app.json
types/                       <- add your .d.ts files here
tsconfig.base.json

在每个应用的tsconfig.app.json 中添加以下内容：

"include": ["../../types/**/*.d.ts"]

这将导入存储在全局文件夹中的所有类型定义。但是配置仍然需要在每个库和应用程序中手动处理。

如果这有帮助或者您是否找到了更好的解决方案，请告诉我。

Answer 2

我以这种方式在我的 repo 中解决了这个问题： 在tsconfig.base.json 中添加"./types 到"typeRoots"。

"typeRoots": [..., "./types", ...]

您要引用的每个 type（在 tsconfig "types" 中）应位于 index.d.ts 文件中的单独文件夹中：

types/my-own-module/index.d.ts

然后您可以将类型添加到 tsconfigs (tsconfig.lib.json, `tsconfig.app.json 在每个项目中：

"types": [..., "my-own-module", ...]

唯一的缺点是，您需要将类型添加到您需要的每个项目中，它不能全局工作，因为通常每个项目都有不同的“类型”配置。

一个未经测试的想法是从所有配置中删除“类型”，然后将所有需要的类型添加到全局 tsconfig 中。

Answer 3

我找到了一个简单的解决方案... 在项目的根目录中创建您的 types.d.ts 文件。

对于每个应用程序和库，在 tsconfig.app.json 或 tsconfig.lib.json 中将其添加到“文件”部分：

"../../types.d.ts"

适用于我的 nx 版本 12.10.1

Answer 4

以下设置适用于所有应用，但不适用于库...

我在根目录中有 index.d.ts：

    // /index.d.ts
    declare global {
      namespace MyNamespace {
         interface MyInterface { ... }
      }
    }

在 tsconfig.base.json 中，我在 compilerOptions 中添加了 "esModuleInterop": true 和 "typeRoots": ["index.d.ts"]。 然后在每个 /apps/my-app/tsconfg.json 中，我在包含数组中添加了“../../index.d.ts”。

这允许我在应用程序中使用全局声明，而无需导入任何内容。

const myVar: MyNamespace.MyInterface = ...

我尝试对库做同样的事情，但它不起作用。

lib目录下有3个tsconfig.json：

• tsconfig.json（主）
• tsconfig.lib.json (lib)
• tsconfig.spec.json（规范）
• 如果我使用故事书作为库，那么还有第四个 /.storybook/tsconfig.json（故事书）。

lib、spec 和 storybook 配置扩展了主配置。

文件有错误：

Referenced project '/.../libs/shared-one/tsconfig.lib.json' must have setting "composite": true.

如果我将 lib、spec、storybook 配置的复合设置为 true，则会出现以下错误：

Composite projects may not disable declaration emit.

怎么了？如何在 nx 库之间共享全局类型声明？我希望这能开箱即用。

tsconfig.lib.json (lib) 示例

    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "composite": true,
        "outDir": "../../dist/out-tsc",
        "types": ["node"]
      },
      "files": [
        "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
        "../../node_modules/@nrwl/react/typings/image.d.ts"
      ],
      "exclude": [
        "**/*.spec.ts",
        "**/*.spec.tsx",
        "**/*.stories.ts",
        "**/*.stories.js",
        "**/*.stories.jsx",
        "**/*.stories.tsx"
      ],
      "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
    }

/libs/my-lib tsconfig.json（主）

    {
      "extends": "../../tsconfig.base.json",
      "compilerOptions": {
        "jsx": "react-jsx",
        "allowJs": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
      },
      "files": [],
      "include": ["../../index.d.ts"],
      "references": [
        {
          "path": "./tsconfig.lib.json"
        },
        {
          "path": "./tsconfig.spec.json"
        },
        {
          "path": "./.storybook/tsconfig.json"
        }
      ]
    }

tsconfig.base.json: (基础)

    {
      "compileOnSave": false,
      "compilerOptions": {
        "rootDir": ".",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "importHelpers": true,
        "target": "es2015",
        "module": "esnext",
        "lib": ["es2017", "dom"],
        "skipLibCheck": true,
        "skipDefaultLibCheck": true,
        "baseUrl": ".",
        "paths": {
          "@my-org/shared-one": ["libs/shared-one/src/index.ts"],
          "@my-org/shared-two": ["libs/shared-two/src/index.ts"]
        }
      },
      "exclude": ["node_modules", "tmp"],
      "include": ["index.d.ts"]
    }