vue3 ＋ts 接口封装

对于Vue3和TypeScript，接口封装是一个很好的实践。通过使用接口，我们可以定义Vue组件的props、data、methods等属性和方法的类型，以提高代码的可读性和可维护性。

下面是一个简单的示例，展示如何在Vue3中使用TypeScript进行接口封装：

// 定义一个接口，用于指定组件的props类型
interface MyComponentProps {
  message: string;
}

// 定义Vue组件
const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props: MyComponentProps) {
    // 使用props.message
    console.log(props.message);
    
    // 返回渲染函数
    return () => {
      return h('div', props.message);
    };
  }
});

在上面的示例中，我们首先定义了一个接口`MyComponentProps`，用于指定组件`MyComponent`的props类型。然后，在组件的`props`选项中使用了这个接口来定义`message`属性的类型。在`setup`函数中，我们可以通过参数`props`来访问传入的props，并使用它们。

这只是一个简单的示例，你可以根据实际需求在接口中定义更多的属性类型。通过使用接口封装，你可以更好地利用TypeScript的类型检查功能，减少潜在的bug，并提高代码的可维护性。