在TypeScript中导入外部JavaScript代码-找不到模块或其相应的类型声明

我购买了一个用JS编写的VueJS管理模板,需要将其注入我当前的TS应用程序中。当我复制组件、视图和其他部分时,我会得到以下错误。是否可以在不直接修改外部代码的情况下修复此问题?我需要想出一种在更新后持久的永久方法。

错误如下:

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 文件自动添加声明,但仍然会收到相同的错误。