Error on bound SVG attributes
jaredmcateer opened this issue · 3 comments
jaredmcateer commented
It seems that there is a problem detecting that Ref<string>
is compatible with the Numbish
type in the @vue/runtime-dom
.
Minimal test case:
<script setup lang="ts">
import { ref } from "@vue/composition-api";
// `Numberish` in @vue/runtime-dom is `string | number` so these should work
const width = ref("100%");
const height = ref(100);
</script>
<template>
<svg :width="width" :height="height"></svg>
</template>
Error produced:
Type 'Ref<string>' is not assignable to type 'Numberish'.ts(2322)
runtime-dom.d.ts(917, 3): The expected type comes from property 'width' which is declared here on type 'ElementAttrs<SVGAttributes>'
Using the defineComponent
method there is no error:
<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
export default defineComponent({
setup() {
const width = ref("100%");
const height = ref(100);
return { width, height };
},
});
</script>
<template>
<svg :width="width" :height="height"></svg>
</template>
xiaoxiangmoe commented
jaredmcateer commented
Yes that resolves the issue, thanks. I hadn't looked at that example as we're not using vue-cli, just a home rolled webpack config.
xiaoxiangmoe commented
If you are using vite, you also need add this
https://github.com/antfu/unplugin-vue2-script-setup/blob/main/playground/src/shims-vue.d.ts#L1