vue3的ts

Vue 3对TypeScript的支持更加完善，提供了更多的类型推断和类型检查功能。以下是一些在Vue 3中使用TypeScript的常见用法：

定义组件的Props和类型：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  setup(props) {
    // props.name 和 props.age 的类型已经被推断为 string 和 number
    // ...
  }
});

定义组件的data和类型：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    // count 的类型已经被指定为 number
    // ...
  }
});

使用Composition API：

import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    const doubleCount = computed(() => count.value * 2);

    // 使用 count 和 doubleCount
    // ...
  }
});

定义组件的方法和类型：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref<number>(0);
    
    function increment() {
      count.value++;
    }

    // 使用 increment 方法
    // ...
  }
});

使用Vue的生命周期钩子：

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    onMounted(() => {
      // 组件被挂载后执行的逻辑
      // ...
    });

    // ...
  }
});

这些只是Vue 3中使用TypeScript的一些常见用法，还有很多其他高级用法和特性可以与TypeScript结合使用