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

Eho*_*ret 1 typescript vue.js tabulator

我正在尝试在一个简单的 Vue 应用程序中使用 vue-tabulator 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')
Run Code Online (Sandbox Code Playgroud)

App.ts

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

@Component
export default class App extends Vue {}
Run Code Online (Sandbox Code Playgroud)

App.vue

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

<style scoped>
</style>

<script lang="ts" src="./App.ts">
</script>
Run Code Online (Sandbox Code Playgroud)

运行我的应用程序时,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
Run Code Online (Sandbox Code Playgroud)

最后但并非最不重要的是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"
  ]
}
Run Code Online (Sandbox Code Playgroud)

我检查了这里给出的答案:找不到模块的声明文件

但我看不出该线程中给出的解决方案如何真正帮助我。

我能怎么做?

[编辑 1]

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

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.
Run Code Online (Sandbox Code Playgroud)

[编辑 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
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
Run Code Online (Sandbox Code Playgroud)

小智 5

首先尝试为'vue-tabulator'包安装@types,如果它不存在,那么你可以为'vue-tabulator'的类型声明添加一个垫片文件

发生这种情况是因为您在项目中使用了 TS,但“vue-tabulator”包不支持 TS。它只有该包的 JS 版本

如何添加垫片

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