vue.js - Εισαγωγή εξωτερικού κώδικα JavaScript σε TypeScript - Δεν μπορεί να βρεθεί το module ή η αντίστοιχη δήλωση τύπου

Έχω αγοράσει ένα πρότυπο διαχείρισης VueJS που είναι γραμμένο σε JS και χρειάζεται να το ενσωματώσω στην τρέχουσα εφαρμογή μου σε TS. Όταν αντιγράφω τα components, τις προβολές και άλλα κομμάτια, λαμβάνω το παρακάτω σφάλμα. Είναι δυνατόν να το διορθώσω χωρίς να τροποποιήσω απευθείας τους εξωτερικούς κώδικες; Χρειάζεται να βρω έναν μόνιμο τρόπο που να παραμένει μετά από ενημερώσεις.

Εδώ είναι το σφάλμα:

ERROR in /Users/username/MyApplicationDirectory/src/main.ts(17,32):
17:32 Cannot find module './components/TroubledComponent' or its corresponding type declarations.
    15 | 
    16 | // Custom components
  > 17 | import TroubledComponent from './components/TroubledComponent'
       |                                ^
    18 | import X from '@/components/X'
    19 | import Y from '@/components/Y'
    20 | import Z from '@/components/Z'

Ιδού το περιεχόμενο του tsconfig.json μου:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should
    // only output d.ts files
    "emitDeclarationOnly": true,
    // Types should go into this directory.
    // Removing this would place the .d.ts files
    // next to the .js files
    "outDir": "dist"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ]
}

Εδώ είναι το περιεχόμενο του package.json μου:

{
  "name": "oneui-vue-edition",
  "version": "1.6.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-modern": "vue-cli-service build --modern",
    "lint-fix": "vue-cli-service lint --fix"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.31.1",
    "@typescript-eslint/parser": "^4.31.1",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^7.17.0",
    "fibers": "^5.0.0",
    "sass": "^1.40.1",
    "sass-loader": "^10.2.0",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier/@typescript-eslint"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    ">= 1%",
    "last 1 major version",
    "not dead",
    "Chrome >= 45",
    "Firefox >= 38",
    "Edge >= 12",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ]
}

Εδώ είναι η εισαγωγή του στοιχείου μου στο main.ts:

import TroubledComponent from '@/components/TroubledComponent'

Για αναφορά, εδώ είναι ο υψηλού επιπέδου κώδικας του συστατικού:

<template>
  <component
    ...stuff
  >
    <slot></slot>
  </component>
</template>

<script>
export default {
  name: 'TroubledComponent',
  props: {
    // props
  },
  methods: {
    // methods
  }
}
</script>

Έκδοση NodeJS: v14.17.6

Δοκίμασα τα εξής και εξακολουθώ να λαμβάνω το λάθος: 1- Πρόσθεσα τις γραμμές 29-40 στο αρχείο tsconfig.json για να προσθέτω αυτόματα δηλώσεις, αλλά εξακολουθώ να λαμβάνω το ίδιο λάθος.

Απάντηση #1

Τέλος κατάφερα να λύσω αυτό το πρόβλημα με

1. Εκτέλεση της εντολής vue add typescript για να βεβαιωθεί ότι όλα τα απαραίτητα αρχεία typescript υπάρχουν
2. Εξασφαλίζοντας ότι το αρχείο shims μου έχει τις σωστές πληροφορίες: VueJS/Typescript - Δεν μπορεί να βρεθεί το module './components/Navigation' ή οι αντίστοιχες δηλώσεις τύπων του
3. Στην εισαγωγή μου αλλαγή import TroubledComponent from ''@/components/TroubledComponent'' σε import TroubledComponent from ''@/components/TroubledComponent.vue''

Για άλλα αρχεία JavaScript, όπως οι οδηγίες, απλώς έπρεπε να προσθέσω "allowJs": true στο tsconfig.json μου.

Εύχομαι να υπήρχε ένας τρόπος να προσθέσω μια δήλωση στο modulename.d.ts για τις οδηγίες, αλλά συνέχιζε να μου λέει File ...../directives/mycrazydirective.d.ts' is not a module. Οπότε τα παράτησα προς το παρόν μέχρι να βρω μια καλύτερη λύση.