Subscribe on changes!

template ref compiled with any type

avatar
Sep 6th 2021

Version

3.2.9

Reproduction link

github.com

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

avatar
Sep 6th 2021

You are not giving the ref a type:

const hint = ref<HTMLElement | undefined>()
avatar
Sep 6th 2021

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

avatar
amw
Sep 21st 2021

I have ran same the same problem and can confirm that using ref<HTMLElement>() or ref<HTMLElement | undefined>() does not help.

@posva Please re-open this issue.