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

Question

我购买了一个用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-我在tsconfig.json文件中添加了29-40行，以自动添加声明，但仍然得到相同的错误。

Answer 1

我终于解决了这个问题

1. 运行vue add typescript命令确保所有需要的typescript文件都存在
2. 确保我的shims文件VueJS/Typescript - Cannot find 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。所以我现在放弃了，直到我找到一个更好的解决方案。