在Typescript Vue项目中使用Javascript模块

Question

The problem

I'm trying to use https://github.com/moonwave99/fretboard.js in my Vue project. I try to import the module in a component as follows:

<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>

This results in the following error:

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)

I've tried runing the npm install @types/moonwave99__fretboard.js command but that also resulted in an error, saying '@types/moonwave99__fretboard.js@latest' is not in the npm registry. .

I've been looking all over the place, but couldn't find a solution that worked for my project. Anybody out there who has a solution to my problem?

Things I've tried

1. Creating a declaration file containing declare module '@moonwave99/fretboard.js in the root of my project directory
2. Adding "allowJs": true to my tsconfig.ts file

Additional information

My tsconfig looks like:

{
  "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

The .d.ts file should be in one of the include paths configured in tsconfig.json , and according to the tsconfig.json you've posted, that's src or tests . These typings are typically stored in src root (you'll see src/shims.vue.d.ts in a Vue CLI-generated project).

You could add a src/fretboard.d.ts file, containing declare module '@moonwave99/fretboard.js' . Then, you'd have to restart VS Code , so that the typings are indexed properly, which would resolve the error.

Answer 2

Solved with on file src/.env.d.ts add declare module 'vue-image-zoomer' .

All done. Vanished the error of module not found.

Happy coding.