从引用的 tsconfig 项目导入不起作用

Question

我刚刚使用 Vite 创建了一个 React 应用程序，然后添加了 Electron 依赖项来生成桌面应用程序。因此，在我的项目中，我有一个“电子”文件夹和一个包含所有反应文件的“ui”文件夹。两者都有自己的 tsconfig 文件，并在根 tsconfig 中引用。 问题是我创建了一个应该在两者中使用的共享文件夹。但未检测到共享文件夹，并且导入在“ui”和“电子”文件夹中不起作用。

这是我的项目结构：

C:.
│   tsconfig.json
│
└───src
    ├───electron
    │       tsconfig.electron.json
    │
    ├───shared
    │       tsconfig.shared.json
    │       types.d.ts
    │
    └───ui
            tsconfig.app.json
            tsconfig.node.json                                                              

./tsconfig.json

{
    "compilerOptions": {},
    "files": [],
    "references": [
        { "path": "./src/ui/tsconfig.app.json" },
        { "path": "./src/ui/tsconfig.node.json" },
        { "path": "./src/electron/tsconfig.electron.json" },
        { "path": "./src/shared/tsconfig.shared.json" }
    ]
}

./src/电子/tsconfig. Electron.json：

{
    "compilerOptions": {
        "allowJs": true,
        "composite": true,
        "declarationMap": true,
        "esModuleInterop": true,
        "module": "CommonJS",
        "moduleResolution": "node",
        "outDir": "../../dist-electron",
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "target": "ESNext"
    },
    "references": [{ "path": "../shared/tsconfig.shared.json" }]
}

./src/ui/tsconfig.app.json：

{
    "compilerOptions": {
        "allowImportingTsExtensions": true,
        "composite": true,
        "declarationMap": true,
        "isolatedModules": true,
        "jsx": "react-jsx",
        "lib": ["ES2023", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "moduleDetection": "force",
        "moduleResolution": "Bundler",
        "noEmit": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "target": "ES2023",
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "useDefineForClassFields": true
    },
    "include": ["."],
    "exclude": ["src/electron"],
    "references": [{ "path": "../shared/tsconfig.shared.json" }]
}

./src/ui/tsconfig.node.json:

{
    "compilerOptions": {
        "allowImportingTsExtensions": true,
        "composite": true,
        "declarationMap": true,
        "esModuleInterop": true,
        "isolatedModules": true,
        "lib": ["ES2023"],
        "module": "ESNext",
        "moduleDetection": "force",
        "moduleResolution": "Bundler",
        "noEmit": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "target": "ES2023",
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
    },
    "include": ["vite.config.ts"],
    "references": [{ "path": "../shared/tsconfig.shared.json" }]
}

./src/shared/tsconfig.shared.json：

{
    "compilerOptions": {
        "composite": true,
        "declaration": true,
        "declarationMap": true,
        "rootDir": ".",
        "types": ["./types.d.ts"]
    },
    "include": ["."]
}

我尝试使用“引用”和“包含”，但不起作用。 我搜索了 stackOverflow 并尝试了该帖子中提出的解决方案：

• 从同级文件夹导入打字稿 - 找不到模块
• 在源文件夹之外引用 Typescript 项目
• 如何对具有单独 src 和 test 目录的项目使用 tsconfig 引用？

（我对创建路径别名不感兴趣）

Answer 1

要解决 React/Vite/Electron 项目中的“ui”和“electron”文件夹未检测到共享文件夹的问题，您需要在根

tsconfig.json

文件中配置 TypeScript 路径映射以明确包含共享文件夹作为路径别名。

打开根

tsconfig.json

文件。 将

"paths"

属性添加到

compilerOptions

部分，这将定义您的路径别名：

代码：

{
  "compilerOptions": {
    // ... other compiler options
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["src/shared/*"]
    }
  }
}

baseUrl:

这设置了用于解析非相对导入的基目录。在本例中，它是您项目的根。 路径： 这定义了路径别名。

@shared/*:

这是您将在导入中使用的别名（例如，从

'@shared/utils').

导入某些内容）

["src/shared/*"]:

这会将别名映射到共享文件夹的实际路径。

现在，在“ui”或“electron”文件夹中的任何文件中，您可以使用别名从共享文件夹导入：

打字稿：

import { someFunction } from '@shared/utils'; 

tsconfig.json

中的相对路径： 如果您的共享文件夹不是直接位于

src

目录下，请相应地调整

paths

对象中的路径。 TypeScript 编译器选项： 确保“ui”和“电子”文件夹中的

tsconfig.json

文件均配置为扩展根

tsconfig.json

文件，以便它们继承路径映射设置。

示例

tsconfig.json

“ui”和“电子”文件夹：

{
  "extends": "./tsconfig.json",
  // ... other options specific to 'ui' or 'electron'
}