ts实现的vue组件
使用 TypeScript 实现 Vue 组件
在 Vue 3 中结合 TypeScript 可以显著提升类型安全性和开发体验。以下是实现 Vue 组件的核心方法和示例代码。
定义组件的基本结构
通过 <script setup> 语法糖和 TypeScript 结合，可以简化组件定义：
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0) // 显式定义ref类型
const message: string = 'Hello TS' // 直接类型标注
</script>
<template>
<button @click="count++">{{ count }}</button>
<p>{{ message }}</p>
</template>定义组件Props
使用 defineProps 时可以通过泛型或运行时声明两种方式指定类型：
<script setup lang="ts">
interface Props {
title: string
size?: 'small' | 'medium' | 'large'
disabled?: boolean
}
const props = defineProps<Props>()
</script>或使用运行时声明：
<script setup lang="ts">
const props = defineProps({
title: { type: String, required: true },
size: { type: String as PropType<'small' | 'medium' | 'large'> }
})
</script>定义组件事件
通过 defineEmits 声明类型化的事件：
<script setup lang="ts">
const emit = defineEmits<{
(e: 'update', value: number): void
(e: 'submit'): void
}>()
function onClick() {
emit('update', 10)
}
</script>使用Composition API
在setup中使用TypeScript的类型推断：
<script setup lang="ts">
import { computed, ref } from 'vue'
const count = ref(0)
const doubleCount = computed<number>(() => count.value * 2)
function increment(step: number = 1): void {
count.value += step
}
</script>泛型组件的实现
对于需要泛型的场景，可以通过渲染函数或h()实现：
import { defineComponent, h } from 'vue'
function useGenericComponent<T>() {
return defineComponent({
setup(props, { slots }) {
return () => h('div', slots.default?.())
}
})
}类型导入与扩展
可以创建types文件夹集中管理类型：
// types/components.d.ts
declare module 'vue' {
interface GlobalComponents {
MyButton: typeof import('./components/MyButton.vue')['default']
}
}最佳实践
为组件添加name属性时，推荐使用unplugin-vue-define-options插件：
<script setup lang="ts">
defineOptions({
name: 'MyComponent'
})
</script>这些方法覆盖了Vue组件开发中TypeScript的主要应用场景，从基础类型定义到高级模式都能提供类型安全保障。实际开发时应根据项目复杂度选择适当的类型声明方式。
