template ref compiled with any type
Version
3.2.9
Reproduction link
Steps to reproduce
git clone https://github.com/LongJinCen/Vue3-TS-error
npm i
npm run build-without-webpack
the source file content:
<template>
<div ref="hint">
{{ props.value }}
</div>
</template>
<script lang="ts" setup>
import { ref } from "@vue/reactivity";
interface Props {
value?: number
}
const props = withDefaults(defineProps<Props>(), {
value: 1
})
const hint = ref()
</script>
when build finished, a App-compiled
file will generate at the root directory:
import { defineComponent as _defineComponent } from 'vue'
import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from "@vue/reactivity";
interface Props {
value?: number
}
export default /*#__PURE__*/_defineComponent({
props: {
value: { type: Number, required: false, default: 1 }
},
setup(__props: any) {
const props = __props as { value: number }
const hint = ref()
return (_ctx: any,_cache: any) => {
return (_openBlock(), _createElementBlock("div", {
// _value, _refs all have an any type, which will case an error
ref: (_value, _refs) => {
_refs['hint'] = _value
hint.value = _value
}
}, _toDisplayString(props.value), 513 /* TEXT, NEED_PATCH */))
}
}
})
What is expected?
ref has a correct type
What is actually happening?
if ref property is a function, the paramer's type are all any
You are not giving the ref a type:
const hint = ref<HTMLElement | undefined>()
That's not the problem. I looked at the type definition for
_createElementBlock
:
// the props's type definition is not correct, The result is that ref is of type any
export declare function createElementBlock(type: string | typeof Fragment, props?: Record<string, any> | null, children?: any, patchFlag?: number, dynamicProps?: string[], shapeFlag?: number): VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
not just createElementBlock
, such as createBlock
ect, also have the save problem
@posva please check