vue-konva
vue-konva copied to clipboard
Add Typescript for Vue references
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
Thanks for this workaround!
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>
Is there any Update on this? It would be awesome to have typed versions the refs.
I am happy to apply a Pull Request if someone can do it.