vue3 有哪些主要的ts类型

在 Vue 3 中，TypeScript (TS) 的支持得到了显著增强，尤其是通过 Composition API 和 <script setup> 的引入，开发者可以更方便地使用 TS 来定义类型。以下是 Vue 3 中主要涉及的一些 TS 类型，涵盖组件、props、emit、ref、reactive 等核心概念：

---

1. 组件相关类型

• DefineComponent

  • 来自 vue 模块，用于定义一个 Vue 组件的类型。
  • 示例：

    import { defineComponent } from 'vue';
    const MyComponent = defineComponent({
      // 组件选项
    });
    

• ComponentPublicInstance

  • 表示组件实例的公共接口类型，通常用于访问组件的实例属性。

---

2. Props 类型

• PropType<T>

  • 用于指定 props 的具体类型，结合 defineProps 使用。
  • 示例：

    import { defineProps } from 'vue';
    import { PropType } from 'vue';
    
    const props = defineProps({
      name: String,
      age: Number,
      user: Object as PropType<{ id: number; name: string }>
    });
    

• defineProps 返回类型

  • 在 <script setup> 中，defineProps 会根据声明推断类型：

    const props = defineProps<{
      msg: string;
      count?: number;
    }>();
    

---

3. Emits 类型

• defineEmits 返回类型
  • 用于声明组件发出的事件及其参数类型。
  • 示例：

    const emit = defineEmits<{
      (e: 'update', value: string): void;
      (e: 'delete', id: number): void;
    }>();
    emit('update', 'new value'); // 类型安全
    

---

4. Ref 类型

• Ref<T>

  • 表示一个响应式引用，来自 @vue/reactivity 或 vue。
  • 示例：

    import { ref } from 'vue';
    const count: Ref<number> = ref(0);
    

• UnwrapRef<T>

  • 用于解包 ref 类型，获取其内部值的类型。

---

5. Reactive 类型

• Reactive<T>
  • 表示一个响应式对象。
  • 示例：

    import { reactive } from 'vue';
    const state: Reactive<{ count: number }> = reactive({ count: 0 });
    

---

6. Computed 类型

• ComputedRef<T>
  • 表示一个只读的计算属性引用。
  • 示例：

    import { computed } from 'vue';
    const double: ComputedRef<number> = computed(() => count.value * 2);
    

---

7. Slots 类型

• Slots
  • 表示插槽的类型，通常在 setup 函数中通过上下文获取。
  • 示例：

    import { Slots } from 'vue';
    const slots: Slots = useSlots();
    

---

8. 事件处理类型

• EventHandler
  • 用于定义事件处理函数的类型。
  • 示例：

    const handleClick = (event: MouseEvent) => {
      // ...
    };
    

---

9. 其他实用类型

• MaybeRef<T>
  • 表示可能是 Ref<T> 或直接是 T 的类型，常用于工具函数。
• Readonly<T>
  • 创建只读类型，常与 reactive 或 ref 结合使用。
• ExtractPropTypes<T>
  • 从组件的 props 定义中提取类型。

---

示例：综合使用

以下是一个完整的 Vue 3 组件示例，展示了多种类型的应用：

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue';

const props = defineProps<{
  title: string;
  initialCount: number;
}>();

const emit = defineEmits<{
  (e: 'change', value: number): void;
}>();

const count = ref(props.initialCount);
const doubled = computed(() => count.value * 2);

const increment = () => {
  count.value++;
  emit('change', count.value);
};
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

---

总结

Vue 3 的 TS 类型主要围绕响应式系统（Ref、Reactive、ComputedRef）、组件定义（DefineComponent）、props（PropType）、事件（defineEmits）和插槽（Slots）等核心功能展开。开发者可以通过这些类型实现类型安全的代码，同时利用 TS 的类型推断减少显式注解。