Typing component refs

[蓝月萧枫]

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>
  }
})

[ZHAO Jin-Xiang]

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

[蓝月萧枫]

Oh, ok.