Vue3 组件 TS 类型声明实例代码示例

在 Vue3 开发中，使用 TypeScript 进行类型声明可以显著提高代码的可维护性和健壮性。下面通过一个简单的示例来展示如何为 Vue3 组件进行类型声明。

创建一个 Vue3 组件，比如一个计数器组件 Counter.vue：

<template>
  <div>
    <button @click="increment">Increment</button>
    <span>{{ count }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  setup() {
    const count = ref<number>(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
});
</script>

在上述代码中，我们使用 ref 函数创建了一个响应式的 count 变量，并指定其类型为 number。increment 函数用于增加 count 的值。

接下来，为组件的 props 进行类型声明。假设我们的计数器组件可以接收一个初始值作为 props：

<template>
  <div>
    <button @click="increment">Increment</button>
    <span>{{ count }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Props {
  initialValue: number;
}

export default defineComponent({
  name: 'Counter',
  props: ['initialValue'],
  setup(props: Props) {
    const count = ref<number>(props.initialValue);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
});
</script>

通过定义 Props 接口，明确了 initialValue 的类型为 number。

对于组件的 emits 事件，也可以进行类型声明。例如，当计数器达到某个值时触发一个事件：

<template>
  <div>
    <button @click="increment">Increment</button>
    <span>{{ count }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Props {
  initialValue: number;
}

interface Emits {
  ('reachLimit': number)
}

export default defineComponent({
  name: 'Counter',
  props: ['initialValue'],
  emits: ['reachLimit'],
  setup(props: Props, { emit }: { emit: Emit<Emits> }) {
    const count = ref<number>(props.initialValue);

    const increment = () => {
      count.value++;
      if (count.value === 10) {
        emit('reachLimit', count.value);
      }
    };

    return {
      count,
      increment
    };
  }
});
</script>

通过定义 Emits 接口，指定了 reachLimit 事件，并规定其参数类型为 number。

通过以上的类型声明，我们在开发 Vue3 组件时能够获得更好的类型检查和代码提示，减少错误的发生，提高开发效率和代码质量。希望这个实例代码示例能够帮助您更好地理解和应用 Vue3 组件的 TS 类型声明。