在Typescript Vue项目中使用Javascript模块

Question

问题

我正在尝试在我的 Vue 项目中使用https://github.com/moonwave99/fretboard.js 。 我尝试按如下方式在组件中导入模块：

<template>
  <div>
    <div id="fretboard" />
  </div>
</template>
<script lang="ts">
import { Fretboard } from '@moonwave99/fretboard.js';
const fretboard = new Fretboard({
  el: '#fretboard',
  fretColor: 'blue',
  dotFill: 'red'
});
fretboard.render([
  {
    string: 5,
    fret: 3
  },
  {
    string: 4,
    fret: 2
  },
  {
    string: 2,
    fret: 1
  }
]);
</script>

这会导致以下错误：

Could not find a declaration file for module '@moonwave99/fretboard.js'. '/Users/xxx/guitar-apps/node_modules/@moonwave99/fretboard.js/dist/fretboard.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/moonwave99__fretboard.js` if it exists or add a new declaration (.d.ts) file containing `declare module '@moonwave99/fretboard.js';`Vetur(7016)

我试过运行npm install @types/moonwave99__fretboard.js命令，但这也导致了一个错误，说'@types/moonwave99__fretboard.js@latest' is not in the npm registry. .

我一直在到处寻找，但找不到适合我的项目的解决方案。 有谁能解决我的问题吗？

我试过的事情

1. 在我的项目目录的根目录中创建一个包含declare module '@moonwave99/fretboard.js的声明文件
2. 添加"allowJs": true到我的 tsconfig.ts 文件

附加信息

我的 tsconfig 看起来像：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

.d.ts文件应该在tsconfig.json配置的include路径之一中，根据您发布的tsconfig.json ，这是src或tests 。 这些类型通常存储在src根目录中（您将在 Vue CLI 生成的项目中看到src/shims.vue.d.ts ）。

您可以添加一个src/fretboard.d.ts文件，其中包含declare module '@moonwave99/fretboard.js' 。 然后，您必须重新启动 VS Code ，以便正确索引类型，这将解决错误。

Answer 2

通过在文件src/.env.d.ts添加declare module 'vue-image-zoomer' 。

全部做完。 消失了模块未找到的错误。

快乐的编码。