vue3 typescript 声明组件类型

在 Vue 3 中，推荐使用 `defineComponent` 方法来声明组件类型。使用 `defineComponent` 方法可以让 TypeScript 正确推断组件中的 props、data、methods 等属性的类型。

以下是一个使用 TypeScript 声明 Vue 3 组件类型的示例：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick(event: MouseEvent) {
      // do something
    }
  },
  computed: {
    doubleAge(): number {
      return this.age * 2;
    }
  },
  template: `
    <div>
      <p>Name: {{ name }}</p>
      <p>Age: {{ age }}</p>
      <p>Double Age: {{ doubleAge }}</p>
      <button @click="handleClick">Click</button>
    </div>
  `
});

上述代码中，我们使用 `defineComponent` 方法定义了一个名为 `MyComponent` 的组件类型，它包含 `props`、`data`、`methods`、`computed` 和 `template` 五个属性。其中，`props` 属性是一个对象，包含 `name` 和 `age` 两个属性；`data` 属性是一个函数，返回一个包含 `count` 属性的对象；`methods` 属性是一个对象，包含一个名为 `handleClick` 的方法，它的参数是一个 MouseEvent 类型的事件对象；`computed` 属性是一个对象，包含一个名为 `doubleAge` 的计算属性，它返回的值是 `age` 的两倍；`template` 属性是一个模板字符串，用于渲染组件的内容。

使用 `defineComponent` 方法声明组件类型时，需要先导入 `defineComponent` 方法，并使用它来定义一个包含组件属性的对象。在组件中，可以使用 `this` 访问组件实例，并根据需要调用 props、data、methods、computed 等属性。在模板中，可以使用插值语法和指令语法来渲染数据和绑定事件。