Composition-api: Property 'refs' does not exist on type 'SetupContext'

[gokhantaskan]

I just started to use TypeScript and Composition API in my project. For "defineComponent" function, I get an error Property 'refs' does not exist on type 'SetupContext'.

export default defineComponent({
  props: {
    solarData: {
        type: Array,
        default: () => [],
        required: true
    },
    ...
    setup(props, vm) {
        ...
        vm.refs.chart.updateSeries([
            ...series,
            { name: vm.root.$i18n.t("labels.unmatched"), data: unmatchedType(), type: "area" }
        ]);
});

When I hover over refs, it says:

Property 'refs' does not exist on type 'SetupContext'. Vetur(2339)

[pikax]

You don't have access to the vm in the setup*

You need to do something like this:

setup(_, ctx){
  const chart = ref(null); // this will hold your $refs.chart

  // wait for mounted to `chart` be set
  onMounted(()=>{
     chart.value.updateSeries([
            ...series,
            { name: ctx.root.$i18n.t("labels.unmatched"), data: unmatchedType(), type: "area" }
        ]);
  })

  return {
    chart
  }
}

[gokhantaskan]

You don't have access to the vm in the setup*

You need to do something like this:

setup(_, ctx){
  const chart = ref(null); // this will hold your $refs.chart

  // wait for mounted to `chart` be set
  onMounted(()=>{
     chart.value.updateSeries([
            ...series,
            { name: ctx.root.$i18n.t("labels.unmatched"), data: unmatchedType(), type: "area" }
        ]);
  })

  return {
    chart
  }
}

const chart: Ref<null>
Object is possibly 'null'.

I can do (chart.value as any).updateSeries(...) but is it logical?

[pikax]

You can
You can type it

ref<MyRefType>() 

[jacekkarczmarczyk]

ctx.refs is required if you're returning render function

<script lang="ts">
import { createElement, defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  setup (_, ctx) {
    return () => createElement('div', [
      createElement('input', {
        ref: 'inputRef',
        attrs: {
          value: 'foo',
        },
      }),
      createElement('div', {
        on: {
          click: () => (ctx as any).refs.inputRef.value && (ctx as any).refs.inputRef.select(),
        },
      }, ['click']),
    ]);
  },
});
</script>

[542154968]

使用 vue 2.6 + composition-API 确实无法使用 ref 作为Dom的引用，打印的是null.

const root = ref(null);

onMounted(()=>{
  console.log(root.value) // null
})

return ()=><div ref={root}>1111</div>

只能通过 ctx.refs来获取Dom的引用

setup(props, ctx){

  onMounted(()=>{
    console.log(ctx.refs.elDom) // 但是这里会有个类型错误
  })

  return () => <div ref="elDom">111</div>
}

有必要给SetupContext 加上refs的ts描述

[antfu]

You have to make declarations on your own, as this API is only a workaround which will not be compatible with Vue 3.

declare module '@vue/composition-api' {
  interface SetupContext {
    readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] }
  }
}

This is documented in README.