在为第三方库进行模块增强时，如何在 VSCode 中为 JavaScript 代码库启用 TypeScript 智能感知？

Question

在标准create-react-app配置中，有\xe2\x80\x99s一个第三方组件，我可以在需要时导入：

\n

import { Button } from \'@mui/material\'\n\n// [\xe2\x80\xa6]\n<Button variant="|"></Button>\n

\n

该库是完全类型化的，因​​此当光标位于 处时，在 VSCode 中点击Ctrl+将会显示我可以使用的可能的字符串变体列表。我可以通过创建一个包装的本地组件来添加另一个变体：Space|@mui/material/Button

\n

// LocalComponent.js\nimport React from \'react\'\nimport { Button } from \'@mui/material\'\n\n// Do something to actually add a variant called `new`.\n\nexport const LocalComponent = React.forwardRef((props, ref) => {\n  return (\n    <Button ref={ref} {...props}>\n      {props.children}\n    </Button>\n  )\n})\n

\n

// LocalComponent.d.ts\nimport type { ButtonProps } from \'@mui/material\'\n\ninterface Props extends ButtonProps {\n  /** @default \'text\' */\n  variant?: \'text\' | \'outlined\' | \'contained\' | \'new\'\n}\n\nexport declare function LocalComponent(props: Props): React.FunctionComponent\n

\n

如果我 import LocalComponent，我可以获得新变体的智能感知，以及原始的Button\xe2\x80\x99s 属性。该库还有一个功能，允许我创建新的变体，而不必包装库 \xe2\x80\x99s 组件，但我 \xe2\x80\x99m 在使用它时遇到智能感知问题 \xe2\x80\x94 即使该new变体已实现，我只看到原始变体。该库公开了一个专门用于模块增强的接口，所以我应该这样做：

\n

declare module \'@mui/material/Button\' {\n  interface ButtonPropsVariantOverrides {\n    new: true;\n  }\n}\n

\n

ButtonPropsVariantOverrides应该与variant定义 的所有属性的接口属性合并Button，本质上将其转换为variant?: \'text\' | \'outlined\' | \'contained\' | \'new\'，但 TypeScript 似乎没有\xe2\x80\x99 看到此模块增强。我尝试了以下设置：

\n

// jsconfig.json\n{\n  "compilerOptions": {\n    "baseUrl": "src",\n    "typeRoots": [\n      "./src/types", "node_modules/@types"\n    ]\n  },\n  "include": ["src"]\n}\n

\n

不确定\xe2\x80\x94it\xe2\x80\x99stypeRoots中是否有任何jsconfig未列为可用选项的内容compilerOptions，但由于jsconfig几乎是tsconfig，我还是尝试了它。

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 types/\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 @mui/\n\xe2\x94\x82           \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 material/\n\xe2\x94\x82               \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Button/\n\xe2\x94\x82                   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.d.ts // Contains the module augmentation from above.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 jsconfig.json\n

\n

还有这个：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 types/\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.d.ts // Contains the module augmentation from above.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 jsonfig.json\n

\n

我还确保每次更改某些内容后都重新启动 TS 服务器。一般来说，模块增强应该放在哪里？我的设置方式有什么问题吗jsconfig.json？这里\xe2\ x80\x99是我刚才描述的CodeSandbox 。

\n

感谢您的时间。

\n

Answer 1

似乎当带有模块增强的文件没有\xe2\x80\x99t 具有import/export语句时，您\xe2\x80\x99 正在定义一个没有实现\xe2\x80\x94 的环境模块\xe2\x80\x94a 形状您必须在需要时手动导入。要扩充模块并使其全局可用，声明文件应包含importorexport语句。

\n

\xe2\x80\x99s 奇怪的是，唯一重要的是声明文件是一个至少有一个import/export语句的模块，它绝对可以是任何 \xe2\x80\x94if I\xe2\x80\x99m 增强@mui/material/Button，我不需要\xe2\x80\x99t具体import \'@mui/material/Button\'，我可以写一些无用的任意导出，比如export default true，并且 TypeScript 无论如何都会识别该文件。

\n

我在 CodeSandbox 上做了一个快速测试，看看这是否同样适用于 TypeScript 项目 \xe2\x80\x94 ，它似乎确实如此。它可以在 CodeSandbox 上运行，无需typeRoots中的属性tsconfig.json，但在出现问题时添加它。

\n

\n

一般来说，模块增强应该放在哪里？我的设置方式有什么问题吗jsconfig.json？

\n

\n

模块扩充可以位于您喜欢的任何文件夹中，但该目录（或其祖先）应位于jsconfig\xe2\x80\x99sinclude属性中，如果其祖先已添加到include，则 \xe2\x80\x99s 无需添加分别列出目录和类型。虽然没有必要，但您可能希望将扩展包分离到包含index.d.ts\xe2\x80\x94 的文件夹中，不要以不同的方式命名声明文件，否则 TypeScript 将忽略它们。以我的问题为例，一种选择是将模块增强放入./src/types/@mui/Button/index.d.ts. 最后，该typeRoots属性在添加到 时确实不执行任何操作jsconfig.json，因此 \xe2\x80\x99s 无需使用它。

\n