如何让 VS Code 识别单回购包之间的打字稿声明？

Posted 2023-02-16

【中文标题】如何让 VS Code 识别单回购包之间的打字稿声明？

【英文标题】：How can I make VS Code recognize typescript declarations between mono-repo packages?

【发布时间】：2022-01-03 06:08:46

【问题描述】：

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

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

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

我使用 VS Code 作为 IDE，当我打开导入库并使用它的消费者包文件时，VS Code 无法识别库包的 d.ts 文件中声明的类型。

这是包的结构：

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 包中运行 parcel 时，它编译得很好，并且浏览器加载时没有问题/警告。

我认为这是一个与 VS Code 相关的问题，我不知道如何解决。

---

编辑 1

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

【问题讨论】：

你能在 github repo 中分享一个简化的复制品吗？需要注意的一件事是 Parcel 默认情况下不进行类型检查，除非您配置 @parcel/validator-typescript plugin - 所以它可能不是特定于 VSCode 的问题。当您尝试使用 tsc 对 web-ui 项目进行类型检查时会发生什么？

嗨@AndrewStegmaier，我刚刚编辑了添加对存储库的引用的问题。关于运行 tsc，我还没有创建 tsconfig.json 文件。快速尝试后，报错：src/App.tsx:6:23 - error TS2304: Cannot find name 'ParamType'.

【参考方案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 包进行类型检查的内容都会发出相同的错误，而无需进行这些更改）

【讨论】：

感谢您澄清这一点！我不知道我需要像这样导出所有类型。