Add Typescript for Vue references

[Joebayld]

Opening this issue so we can add typescript support for the reference object methods such as this.$refs.myObject.getNode() and it would ideally return a Node type from the Konva library. Here's my current workaround for how I'm achieving this:

import { Stage } from 'konva/types/Stage'
import { Layer } from 'konva/types/Layer'
import { Node } from 'konva/types/Node'

interface KonvaLayer extends Vue {
  getNode (): Layer
}

interface KonvaStage extends Vue {
  getStage (): Stage
}

interface KonvaTransformer extends Vue {
  getNode (): Transformer
}

$refs!: {
  stage: KonvaStage
  transformer: KonvaTransformer
  markLayer: KonvaLayer
}

Maybe it can be a generic so we'd define the type as: VueKonvaType<Layer>, VueKonvaType<Stage>, etc?

I'm new to defining type declarations but can help make this happen.

Thanks,
Joe

[cristianvasquez]

Thanks for this workaround!

[jez9999]

I would love to see this added too, it's a major omission in vue-konva. Right now we can't really use TypeScript when our code gets a ref to the v-stage, for instance:

const playfieldRef = ref<???>(null);
[...]
const stage = playfieldRef.value.getStage();

[...]

<template><v-stage ref="playfieldRef" :config="playfieldInitialConfig"></v-stage></template>

[NellLee]

Is there any Update on this? It would be awesome to have typed versions the refs.

[lavrton]

I am happy to apply a Pull Request if someone can do it.