Не удалось найти файл объявления для модуля 'vue-tabulator' - PullRequest
Новая
       35

Не удалось найти файл объявления для модуля 'vue-tabulator'

0 голосов
/ 07 ноября 2019

Я пытаюсь использовать компонент Vue Vue-tabulator: https://github.com/angeliski/vue-tabulator в простом приложении Vue, которое кодируется в 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"
  ]
}

Я проверяю ответ, приведенный здесь: Не удалось найти файл объявления для модуля

Но я не знаюЯ не вижу, как решение, данное в этом потоке, может реально помочь мне.

Как я могу это сделать?

[EDIT 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.

[EDIT 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 Ответ

1 голос
/ 07 ноября 2019

Сначала попробуйте установить @types для пакета 'vue-tabulator', и если он не существует, вы можете добавить файл shim для объявления типа для 'vue-tabulator'

, это происходит потому, что выиспользуют TS для вашего проекта, но пакет vue-tabulator не поддерживает TS. он имеет только JS-версию этого пакета

как добавить shims

  1. в вашей папке src вашего проекта должна быть папка с именем 'shims'
  2. создатьновый файл с именем и расширением, например 'shims-tabulator.d.ts'
  3. , скопируйте и вставьте следующий код в этот файл 'объявите модуль' vue-tabulator ';'(объявите модуль 'vue-tabulator';)
  4. перезапустите ваш проект
...