非你网

用了 ts 的 vue3 项目，会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。

组件类型声明

无论是第三方库，还是自定义组件，都可以通过这种方式来搞定。

这里分别以 element plus 中的组件和自定义组件为例。

# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
    <el-table-column property="nickname" label="昵称" />
</el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";

const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>

下边是自定义组件。

<template>
<MediaPlayer ref="mediaPlayer" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'

const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>

最后

定义好了类型后，代码提示就很友好了。