Typing component refs

[mengdu]

package.json

{
    "name": "demo",
    "version": "0.1.0",
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^5.25.0",
        "@typescript-eslint/parser": "^5.25.0",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vitejs/plugin-vue-jsx": "^1.3.10",
        "eslint": "^8.16.0",
        "eslint-plugin-vue": "^9.0.1",
        "typescript": "^4.5.4",
        "vite": "^2.9.9",
        "vue": "^3.2.35",
        "vue-tsc": "^0.34.7"
    }
}

// Demo.tsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup (props, { expose }) {
    expose({
      doDemo () {
        // xxx
      }
    })

    return () => <div>Demo</div>
  }
})

// app.tsx
import { defineComponent, onMounted } from 'vue'
import Demo from './demo'

export default defineComponent({
  setup (props, { expose }) {
    const el = ref<InstanceType<typeof Demo>>()

    onMounted(() => {
      console.log(el.value)
      el.value?.doDemo() // Uncaught TypeError: t.value.doSome is not a function
    })

    return () => <Demo ref={el}></Demo>
  }
})

[xiaoxiangmoe]

Only <script setup> with defineExpose support it. If you really need it. You can create an issue in vue3 repo.

[mengdu]

Oh, ok.