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

时间:2019-11-07 13:30:02

标签: typescript vue.js tabulator

我正在尝试在一个简单的Vue应用程序中使用vue制表器Vue组件https://github.com/angeliski/vue-tabulator,该应用程序恰好是用TypeScript编码的。

main.ts

import Vue from 'vue'
import VueTabulator from 'vue-tabulator'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueTabulator)

new Vue({
  render: h => h(App)
}).$mount('#app')

App.ts

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {}

App.vue

<template>
  <div id="app">
    <h1>Kewl</h1>
  </div>
</template>

<style scoped>
</style>

<script lang="ts" src="./App.ts">
</script>

使用npm run serve运行我的应用程序时,我具有以下内容:

 ERROR  Failed to compile with 1 errors                                                                                                                     2:23:19 PM
This dependency was not found:

* tabulator-tables in ./node_modules/vue-tabulator/dist/vue-tabulator.common.js

To install it, you can run: npm install --save tabulator-tables
Type checking in progress...
ERROR in C:/Users/eperret/Desktop/tabulator-tests/src/main.ts(2,26):
2:26 Could not find a declaration file for module 'vue-tabulator'. 'C:/Users/eperret/Desktop/tabulator-tests/node_modules/vue-tabulator/dist/vue-tabulator.umd.js' implicitly has an 'any' type.
  Try `npm install @types/vue-tabulator` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-tabulator';`
    1 | import Vue from 'vue'
  > 2 | import VueTabulator from 'vue-tabulator'
      |                          ^
    3 | import App from './App.vue'
    4 | 
    5 | Vue.config.productionTip = false
Version: typescript 3.5.3
Time: 3055ms

最后但并非最不重要的packages.json

{
  "name": "tabulator-tests",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-tabulator": "^1.2.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-plugin-typescript": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "typescript": "~3.5.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard",
      "@vue/typescript"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

我检查了这里给出的答案:Could not find a declaration file for module

但是我看不出该线程中给出的解决方案如何对我有所帮助。

我该怎么办?

[编辑1]

我尝试为vue-tabulator安装TypeScript类型,但似乎没有这样的软件包:

npm install @types/vue-tabulator
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-tabulator - Not found
npm ERR! 404
npm ERR! 404  '@types/vue-tabulator@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

[编辑2]

关于垫片,我的src文件夹中有两个相关文件:

shims-tsx.d.ts

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

1 个答案:

答案 0 :(得分:2)

首先尝试为'vue-tabulator'软件包安装@types,如果不存在,则 您可以为“ vue-tabulator”的类型声明添加填充文件

之所以发生这种情况,是因为您正在为项目使用TS,但是'vue-tabulator'软件包不支持TS。它只有该程序包的JS版本

如何添加垫片

  1. 在您项目的src文件夹中,应该有一个名为“ shims”的文件夹
  2. 创建一个名称和扩展名为“ shims-tabulator.d.ts”的新文件
  3. 将以下代码复制并粘贴到该文件“声明模块” vue-tabulator”中;” (声明模块'vue-tabulator';)
  4. 重新启动项目