如何在 Vue3 项目中结合 TypeScript 使用 defineExpose 功能，以便让子组件暴露其方法供父组件调用？

在 Vue3 中，如果你想要结合 TypeScript 并利用 `defineExpose` 功能让子组件的方法能够被父组件直接访问，你可以按照以下步骤操作：

1. 首先，确保你的 Vue 应用已经配置了 TypeScript 支持。在 `main.ts` 或者其他入口文件中添加 TypeScript 的配置，并安装相应的依赖如 `@vue/compiler-sfc` 和 `typescript`。

// main.ts 或者 vue.config.js (如果使用 vue-cli)
import { createApp } from 'vue'
import App from './App.vue'
import { createInfernoApp } from '@vue/inferno-app'
import { defineComponent as h } from 'vue'

const app = createInfernoApp(App) // 如果使用 Inferno，替换为 createInfernoApp

app.use(h) // 对于 Vue 3.2 及以后，需要这个配置

app.component('MyComponent', MyComponent)
app.config.globalProperties.$root = app.root // 这样可以直接在全局使用 this.$root

app.mount('#app')

2. 然后，在子组件中，你需要将暴露给父组件的方法放在 `setup` 函数中，并使用 `defineExpose`。例如：

// MyComponent.vue
<script lang="ts">
export default defineComponent({
  setup(props, context) {
    const doSomething = () => {
      console.log('Doing something in the child component')
    }

    // 暴露给父组件的方法
    defineExpose({ doSomething })

    return {}
  }
})
</script>

3. 最后，在父组件里，你就可以通过 `this.$root` 或者 `this.$refs` 直接调用子组件的方法了：

<template>
  <div>
    <my-component ref="childComponent"></my-component>

    <!-- 父组件调用子组件的方法 -->
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  components: {
    MyComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.doSomething()
    },
  },
}
</script>