找不到模块“vue-xxx”的声明文件

Posted

技术标签:

【中文标题】找不到模块“vue-xxx”的声明文件【英文标题】:Could not find a declaration file for module 'vue-xxx' 【发布时间】:2018-08-21 20:48:58 【问题描述】:

我尝试添加到我的项目中的任何第 3 方 Vue.js 库都会引发以下错误:

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

我尝试了 'vue-treeselect'、'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"    
  

【问题讨论】:

你能展示你的package.jsondependencies对象吗? 该包似乎没有定义 @Phiter 我已修改原帖添加package.json @TitianCernicova-Dragomir 我忘了说:确实没有@types/vue-treeselect。虽然据我了解this should not be an issue. 【参考方案1】:

这个错误是因为vue-xxxxxx已经在javascript中生成了。

方法一: 为了避免这个问题,我只是用标准 require() 替换它:

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

方法二: 为避免此问题,我只需将这些行替换为 tsconfig.json "noImplicitAny": false, "allowJs": true,

现在您可以按如下方式使用 import 语句: 从 'vue-xxxxxx' 导入 vue-xxxxxx

享受:)

【讨论】:

支持方法 2 FrancescoMussi 谢谢 :)【参考方案2】:

如果@types/vue-treeselect 不存在,那么您可以使用环境定义手动声明模块。

在您的项目某处创建一个.d.ts(警告:它不应使用importexport)并定义您的模块。如果您不想对其进行类型检查(使所有导入的内容都被推断为any):

declare module 'vue-treeselect'

如果你想对它进行类型检查:

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

【讨论】:

【参考方案3】:

因为任何给定的解决方案本身都没有帮助我,我不得不在我的项目根文件夹中创建一个专用的vendor.d.tsshims-vue.d.ts 不起作用)文件,然后放下面一行:

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

Source

【讨论】:

【参考方案4】:

事实证明问题是错误的,因为我想使用“@riophae/vue-treeselect”,但我的目标是“vue-treeselect”。

但这只是问题的一部分,将 3rd 方 npm 组件导入 Vue.js 打字稿项目仍然不是一件容易的事(至少对我而言)。

我就是这样解决的:


快速而肮脏的解决方案(当一个人不关心类型而只想导入库时)

步骤:

    更改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.

    导入模块并注册为'treeselect':

    import Treeselect from '@riophae/vue-treeselect';

    Vue.component('treeselect', Treeselect);

(如果没有这一步,您会收到一条错误消息:Unknown custom element: &lt;treeselect&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    在视图中使用它:

    &lt;treeselect v-model="value" :multiple="true" :options="source" /&gt;

    记住在.vue.html页面底部设置样式:

    &lt;style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"&gt;&lt;/style&gt;


如果你想把事情做好,我强烈推荐这篇文章:

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

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

【讨论】:

【参考方案5】:

如果你使用的是 vue,让我们在shims-vue.d.ts 文件中添加如下内容

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

【讨论】:

以上是关于找不到模块“vue-xxx”的声明文件的主要内容,如果未能解决你的问题,请参考以下文章

打字稿给出,“找不到模块'xmlhttprequest'的声明文件。”

错误:“找不到模块 'react-search-input' 的声明文件”

导入现有 .jsx 文件时“找不到模块的声明文件”

找不到模块“vuelidate”的声明文件

库的打字稿声明文件找不到模块

错误:找不到模块 VueJS 应用程序的声明文件