javascript 找不到模块'vue-xxx'的声明文件

jaxagkaj 于 2022-12-10 发布在 Java

关注(0)|答案(7)|浏览(283)

我尝试将任何第三方Vue.js库添加到我的项目时，都会抛出以下错误：

Could not find a declaration file for module 'vue-xxx'

我已经尝试了“vue-treesselect”、“vue-select”、“vue-multiselect”，结果大致相同（* 这些库不允许import Modulename from，但需要const Modulename = require）。
我把"dependencies": {下的那些加到package.json中。
我使用的是dotnet core提供的Vue.js的SPA模板。
'tree-select'的完整示例：

import Treeselect from 'vue-treeselect';

/* ... */

value = null;
source = [
    {
        id: 'node-1',
        label: 'Node 1',
        children: [
            {
                id: 'node-1-a',
                label: 'Node 1-A',
            }
      ]
    },
    {
        id: 'node-2',
        label: 'Node 2',
    }
  ];

/* ... */

<treeselect v-model="value"
                :multiple="true"
                :options="source" />

错误：

in [at-loader] ./ClientApp/components/mycomponent/mycomponent.ts:10:24 
    TS7016: Could not find a declaration file for module 'vue-treeselect'. 'path/to/project/node_modules/vue-treeselect/dist/vue-treeselect.js' implicitly has an 'any' type.

package.json

{
  "name": "MyProject",
  "private": true,
  "version": "0.0.0",
  "dependencies": {
    "dygraphs": "^2.1.0",
    "ol3-layerswitcher": "^1.1.2",
    "vue-treeselect": "^1.0.6"
  },
  "devDependencies": {
    "@types/dygraphs": "^1.1.6",
    "@types/webpack-env": "^1.13.0",
    "@types/vue": "^2.0.0",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "bootstrap": "^3.3.6",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.1.1",
    "style-loader": "^0.13.1",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.7",
    "vue": "^2.5.13",
    "vue-loader": "^14.2.1",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2"    
  }
}

JavaScript

来源：https://stackoverflow.com/questions/49258849/could-not-find-a-declaration-file-for-module-vue-xxx

7条答案

按热度按时间

k3bvogb11#

发生此错误的原因是JavaScript中生成了vue-xxxxxx。

*方法1：*为了避免这个问题，我只是将其替换为标准require（）：

const vue-xxxxxx = require('vue-xxxxxx');
// import { vue-xxxxxx } from 'vue-xxxxxx'

***方法2：***为了避免这个问题，我只需要在tsconfig.json中替换这些行

"noImplicitAny": false,
"allowJs": true,

现在您可以使用import陈述式，如下所示：

import { vue-xxxxxx } from 'vue-xxxxxx'

尽情享受吧：）😎

赞(0）回复(0）举报 2022-12-10

6mw9ycah2#

如果@types/vue-treeselect不存在，则可以使用环境定义手动声明该模块。
在项目中的某个位置创建一个.d.ts（警告：它不应该使用import或export）并定义您的模块。如果您不想对它进行类型检查（使导入的所有内容都被推断为any）：

declare module 'vue-treeselect'

如果要进行类型检查：

declare module 'vue-treeselect' {
  export function something(): void
}

赞(0）回复(0）举报 2022-12-10

rhfm7lfc3#

因为任何给定的解决方案本身都没有帮助我，我不得不在我的项目根文件夹中创建一个专用的vendor.d.ts（shims-vue.d.ts没有工作）文件，然后在那里放置以下行：

declare module 'my-module-name-here';

Source

赞(0）回复(0）举报 2022-12-10

zed5wv104#

事实证明，这个问题是错误的，因为我想使用“@riophae/vue-treeselect”，但我的目标是“vue-treeselect”。
但这只是问题的一部分，将第三方npm组件导入Vue.js typescript项目仍然不是小事（至少对我来说）。
我是这样解决的：
快速和肮脏的解决方案（当一个人不关心类型，只想导入库）

步骤：

1.更改tsconfig.json（项目的Typescript配置）以允许import Treeselect from '@riophae/vue-treeselect';：
"noImplicitAny": false

（如果不执行此步骤，则会出现以下错误：（单位：TS7016: Could not find a declaration file for module '@riophae/vue-treeselect'. 'path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js' implicitly has an 'any' type.）*

1.导入模块并注册为“treeselect”：
import Treeselect from '@riophae/vue-treeselect';
Vue.component('treeselect', Treeselect);

（如果不执行此步骤，则会出现以下错误：（x/m/n/x）*

1.在视图中使用它：
<treeselect v-model="value" :multiple="true" :options="source" />
1.请记住设置. vue.html页面底部的样式：
<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>
如果你想做正确的事情，我强烈推荐这篇文章：

“为第三方NPM模块编写声明文件”

https://medium.com/@chris_72272/migrating-to-typescript-write-a-declaration-file-for-a-third-party-npm-module-b1f75808ed2

赞(0）回复(0）举报 2022-12-10

6ojccjat5#

如果您使用的是vue，让我们将如下内容添加到shims-vue.d.ts文件中

declare module 'module-name-here' {
  import { ModuleNameHere } from 'module-name-here'
  export { ModuleNameHere }
}

赞(0）回复(0）举报 2022-12-10

xjreopfe6#

在tsconfig.json文件中简单地添加"allowJs": true,就替我解决了

赞(0）回复(0）举报 2022-12-10

2nc8po8w7#

在src中创建文件夹d，然后创建文件vue-treeselect.ts并将declare module 'vue-treeselect';写入文件vue-treeselect.ts

赞(0）回复(0）举报 2022-12-10

我来回答

javascript 找不到模块'vue-xxx'的声明文件

7条答案

相关问题

热门标签

最新问答