在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' 。

全部做完。 消失了模塊未找到的錯誤。

快樂的編碼。