node.js - Javascript მოდულის გამოყენება Typescript Vue პროექტში

პრობლემა

მეც ვცდილობ ვიყო https://github.com/moonwave99/fretboard.js ჩემს Vue პროექტში. ვცდილობ მოდულის იმპორტირება კომპონენტში შემდეგნაირად:

<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' npm რეგისტრში არ არის.

მე ყველგან ვეძებე, მაგრამ ვერ ვიპოვნე ისეთი გადაწყვეტილება, რომელიც ჩემს პროექტზე ვარგიანობდა. არის ვინმე იქ, ვისაც აქვს ჩემი პრობლემის გადაწყვეტა?

რაღაცეები, რასაც მოვინახულე

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"
  ]
}

პასუხი #1

.d.ts ფაილი აუცილებლად უნდა იყოს tsconfig.json-ში კონფიგურირებული რომელიმე include ბილიკში, და თქვენი გამოქვეყნებული tsconfig.json-ის მიხედვით, ეს არის src ან tests. ეს ტიპები ჩვეულებრივ ინახება src ფოლდერის ძირეულ დირექტორიაში (თქვენ დაინახავთ src/shims.vue.d.ts Vue CLI-თი შექმნილ პროექტში).

თქვენ შეგიძლიათ დაამატოთ src/fretboard.d.ts ფაილი, რომელიც შეიცავს declare module '@moonwave99/fretboard.js'. შემდეგ, თქვენ გიწევთ VS Code-ის გადატვირთვა, რათა ტიპები სწორად იქნას ინდექსირებული, რაც გამოასწორებს შეცდომას.

პასუხი #2

გაჭრა ფაილში src/.env.d.ts დაამატეთ declare module 'vue-image-zoomer'.

ყველაფერი დასრულებულია. გაქრა მოდულის არ არსებობს შეცდომა.

ბედნიერი კოდირება.