typescript声明组件类型

在 TypeScript 中声明组件类型，通常有两种方式。

### 1. 使用 interface 声明组件类型

使用 `interface` 可以定义一个接口来描述组件的 props、data、methods 等属性。

interface MyComponent {
  props: {
    name: string;
    age: number;
  };
  data: () => {
    count: number;
  };
  methods: {
    handleClick: (event: MouseEvent) => void;
  };
}

上述代码中，我们使用 `interface` 定义了一个名为 `MyComponent` 的接口，它包含 `props`、`data` 和 `methods` 三个属性。其中，`props` 属性是一个对象，包含 `name` 和 `age` 两个属性；`data` 属性是一个函数，返回一个包含 `count` 属性的对象；`methods` 属性是一个对象，包含一个名为 `handleClick` 的方法，它的参数是一个 MouseEvent 类型的事件对象，返回值为 void。

### 2. 使用 Vue.extend() 声明组件类型

除了使用 `interface`，还可以使用 Vue.js 提供的 `Vue.extend()` 方法来声明组件类型。

import Vue from 'vue';

const MyComponent = Vue.extend({
  props: {
    name: String,
    age: Number
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick(event: MouseEvent) {
      // do something
    }
  }
});

上述代码中，我们使用 Vue.extend() 方法定义了一个名为 `MyComponent` 的组件类型，它包含 `props`、`data` 和 `methods` 三个属性。其中，`props` 属性是一个对象，包含 `name` 和 `age` 两个属性；`data` 属性是一个函数，返回一个包含 `count` 属性的对象；`methods` 属性是一个对象，包含一个名为 `handleClick` 的方法，它的参数是一个 MouseEvent 类型的事件对象。

使用 `Vue.extend()` 定义组件类型时，需要先导入 Vue.js，并使用 `Vue.extend()` 方法来创建一个包含组件属性的对象，然后可以将该对象传递给 `Vue.component()` 方法来注册组件。