关于#javascript#的问题：在lang=“ts”时为什么components.d.ts不生效了

Question

webpack5搭建vue3时，在lang=“ts”时为什么components.d.ts不生效了？去掉lang=“ts”就好了。

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

当您使用 ts 作为编译器语言时，tsconfig.json 文件中的 moduleType 属性设置为 esnext 或 commonjs。然而，在构建过程中，您需要将 moduleType 设置为 ts。这是因为使用 typescript 作为编译器会强制使用 TypeScript。

要在 webpack 中启用组件导出和导入的 tsd 版本，可以使用以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext.array如期"],
    "jsx": "react",
    "jsxFactory": function () { return function (props) { return <div>{props.children}</div>; } },
    " declaration": true,
    "strict": true,
    "esModuleInterop": true,
    "noEmit": false,
    "include": ["src"]
  }
}

在这个配置中，我们设置 moduleType 为 esnext 和 commonjs。同时，我们还包含 src 目录及其子目录下的所有文件以支持 TypeScript。这样，在构建项目时，webpack 将会生成对应的 dist 目录及其子目录下的 .d.ts 文件。

注意：如果没有安装 TypeScript，请先通过 npm 安装：

npm install --save-dev typescript

现在您可以按照上面的示例重新构建项目，即可确保组件导出和导入在 TsD 版本下正常工作。