VueJs + TypeScript + Splitpanes 导入错误

Question

我有一个 VueJS 视图，最初是用 JavaScript 编写的，并使用组件“splitpanes”(https://www.npmjs.com/package/splitpanes)。它工作正常，看起来像这样：

<template>
 <div>
  <Splitpanes :dbl-click-splitter="false" :horizontal="horizontal">
   <Pane id="pane-video" class="d-flex flex-column">
    ...
   </Pane>
  </Splitpanes>
 </div>
</template>
<script>
import Vue from "vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default Vue.extend({
  components: {
    Splitpanes,
    Pane
  },
...
</script>

我把代码改成了 TypeScript：

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import Splitpanes from "splitpanes";
import Pane from "splitpanes";
@Component({
  components: { Splitpanes, Pane }
})
export default class VideoConf extends Vue {

之后我得到了这个错误（在 VS Code 中）：

找不到模块“splitpanes”的声明文件。 'client-vue/node_modules/splitpanes/dist/splitpanes.common.js' 隐含了一个 'any' 类型。尝试npm install @types/splitpanes（如果存在）或添加包含declare module 'splitpanes';Vetur(7016) 的新声明（.d.ts）文件

我尝试了两个：npm install @types/splitpanes，或者我创建了一个带有“声明模块'splitpanes'”的 shims-splitpanes.d.ts 文件。在这两种情况下，语法检查错误都会消失（在 VS Code 中），我可以执行 npm run serve，但是当我在浏览器中打开页面时，我得到：

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。 （对于 Pane 也是同样的错误）。

如果我将鼠标悬停在行上的这个“拆分窗格”上：

import Splitpanes from "splitpanes"; 

我可以看到它是如何指向 node_modules 中的 @types 文件夹的：

模块“/Users/lisandro/tmp/aws-chime/client-vue/node_modules/@types/splitpanes/index”

但我错过了一些东西，我不知道它是什么。也许这是因为我对 @types 的工作原理以及它们应该如何在 TypeScript 项目中使用缺乏了解？

任何想法都将受到高度赞赏。谢谢！！！

Answer 1

我已经通过删除@types/splitpanes 并改用以下类型声明（使用最新的splitpanes package）来解决我的错误。

splitpanes.d.ts:

declare module 'splitpanes' {
    let Splitpanes : any;
    let Pane : any;

    export { Splitpanes, Pane }
}

示例App.vue（显示v-model 工作）：

<template>
    <splitpanes class="default-theme">
        <pane min-size="25">
            <input type="text" v-model="text" />
        </pane>
        <pane min-size="35">
            <p>"{{ text }}"</p>
        </pane>
    </splitpanes>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';

@Component({
    components: {
        Splitpanes,
        Pane
    }
})
export default class App extends Vue {
    text : string = "";
}
</script>

<style>
.splitpanes {
    height: 5em;
}
.splitpanes__pane {
    text-align: center;
}
</style>

我还会在这里放一个最小的tsconfig.json（修改自Vue.js docs）：

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "moduleResolution": "node",
        "experimentalDecorators": true
    }
}