如何让 VS Code 识别 mono-repo 包之间的打字稿声明？

Question

我有一个配置了独立库包（仅限 TS）和另一个 Web UI 包（TS + React）的单库项目。

我正在从消费者 (web UI) 包中导入已编译的库包。为此，我使用 yarn link 包和 parcel 来生成库包的分发文件。

Parcel 正在库包的 dist 文件夹中自动生成一个 d.ts 文件。

我将 VS Code 用作 IDE，当我打开导入库并使用它的消费者包文件时，VS Code 无法识别库包 [= 中声明的类型13=] 文件.

这是包的结构：

rootPackage
|- library
|- web-ui

在library包中，我有一个types.ts文件和一个index.ts文件。只有一种类型被导出：

export type ParamType = "a" | "b" | "c";

我在这个包上使用 parcel watch 以在更改某些内容时自动刷新 dist 文件。

Parcel 正在生成 main.d.ts 文件，并且此文件正被 package.json 的 types 属性引用。

当我尝试通过 web-ui 包的代码使用此 ParamType 类型时，我在类型中得到以下 IDE 错误突出显示：

Cannot find name 'ParamType'.ts(2304)

当我运行包裹在 web-ui 包中时，它编译得很好并且浏览器加载时没有 problems/warnings.

我认为这是一个与 VS Code 完全相关的问题，我不确定如何解决它。

编辑 1

我创建了一个 public repository on GitHub 来演示这个问题。如果您知道如何修复它，请随时创建拉取请求，这将非常有帮助。

Answer 1

根据您的 example repo，您的 library 包的根目录如下所示：

/shared/lib/src/index.ts

import { ParamType } from "./types";

const Library = {
  typedParamMethod(param: ParamType) {
    console.log(param);
  },
};

export default Library;

您在 web-ui 包中使用 library 包的方式是这样的：

/ui/web/src/App.tsx

import React from 'react';
import Library from 'library';

function App() {
  React.useEffect(() => {
    const typedParam: ParamType = 'b'; // VSCode and tsc throw the error "Cannot find name 'ParamType'." 
    Library.typedParamMethod(typedParam);
  }, []);

  return (
    <div className="web-ui">Web UI</div>
  );
}

export default App;

问题是您既没有将 ParamType 从 library 包的根目录导出，也没有将其导入 web-ui 包。现代 JavaScript 和 Typescript 模块彼此隔离 - library 包根目录中的 import { ParamType } from "./types" 行使 ParamType 在该文件 中可用 ，但它不会影响（或污染）某些东西的全局命名空间，这些东西恰好从 library 包中导入 其他东西 （例如默认导出）。

要解决这个问题，请将此行添加到 library 包根目录（例如 /shared/lib/src/index.ts）：

export { ParamType } from "./types.ts";

然后修改从您的 web-ui 包导入（在 /ui/web/src/App.tsx 中修改为：

import Library, { ParamType } from 'library';

（问题和解决方案与 VSCode 无关 - 任何尝试对 web-ui 包进行类型检查的东西都会发出相同的错误，但没有这些更改）

如何让 VS Code 识别 mono-repo 包之间的打字稿声明？

How can I make VS Code recognize typescript declarations between mono-repo packages?

typescript

visual-studio-code

yarnpkg

parceljs

编辑 1