vue.js - VueJs + TypeScript + Splitpanes importfel

Jag har en VueJS-vy som ursprungligen är skriven i JavaScript och använder komponenten "splitpanes" (https://www.npmjs.com/package/splitpanes). Den fungerade bra och såg ut så här:

<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>

Jag ändrade koden till 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 {

Efter det fick jag detta fel (i VS Code):

Det gick inte att hitta en deklarationsfil för modulen 'splitpanes'. 'client-vue/node_modules/splitpanes/dist/splitpanes.common.js' har implicit typen 'any'. Prova npm install @types/splitpanes om den finns eller lägg till en ny deklarationsfil (.d.ts) som innehåller declare module 'splitpanes'; Vetur(7016)

Jag provade båda: npm install @types/splitpanes och alternativt skapade jag en fil shims-splitpanes.d.ts med "declare module 'splitpanes'". I båda fallen försvinner syntaxkontrollfelet (i VS Code) och jag kan köra npm run serve, men när jag öppnar sidan i webbläsaren får jag:

Okänt anpassat element: - registrerade du komponenten korrekt? För rekursiva komponenter, se till att ange alternativet "name". (och samma fel för Pane).

Om jag hovrar över denna "splitpanes" på raden:

import Splitpanes from "splitpanes"; 

Jag kan se hur det pekar på @types-mappen i node_modules:

modul "/Users/lisandro/tmp/aws-chime/client-vue/node_modules/@types/splitpanes/index"

Men jag saknar något och jag vet inte vad det är. Kanske beror det på min brist på förståelse för hur @types fungerar och hur de bör användas i ett TypeScript-projekt?

Alla idéer skulle uppskattas mycket. Tack !!!

Svar #1

Jag har lyckats lösa mina fel genom att ta bort @types/splitpanes och använda följande typdeklaration istället (med det senaste splitpanes-paketet).

splitpanes.d.ts:

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

    export { Splitpanes, Pane }
}

Exempel App.vue (visar v-model fungerar):

<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>

Jag kommer också att lägga till en minimal tsconfig.json här (modifierad från Vue.js-dokumentationen):

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