vue3 ts自定义标签

Vue.js 3.x 版本引入了 TypeScript 支持，使得在 Vue 项目中使用 TypeScript 更加方便和类型安全。要创建一个自定义的 Vue 组件并使用 TypeScript，你可以按照以下步骤操作：

1. **设置项目配置**:
首先，确保你的项目已经安装了 Vue CLI 3 或更高版本，并配置了 TypeScript。运行 `vue create your-project` 并选择 TypeScript 作为构建工具。

2. **创建组件文件**:
在 `src/components` 目录下，创建一个新的 TypeScript 文件，例如 `MyCustomTag.vue.ts`。这里使用`.ts`后缀表示这是一个 TypeScript 文件。

3. **组件接口声明**:
在组件文件顶部，声明组件的接口。这有助于类型检查：

   import { Component, Prop } from 'vue';
   
   export interface MyCustomTagProps {
     // 定义 props（属性）
     message: string;
   }
   
   export default class MyCustomTag extends Component<MyCustomTagProps> {
     // ...
   }

4. **定义组件结构**:
在组件内部，你可以定义模板、数据以及方法。注意在模板中使用 prop 的时候要加上类型提示：

   <template>
     <div :message="message" class="my-custom-tag">{{ message }}</div>
   </template>

   <script lang="ts">
   // ...
   export default {
     // ...
     props: {
       message: {
         type: String,
         required: true,
       },
     },
     // ...
   };
   </script>

5. **编译和使用**:
保存文件后，Vue CLI 会自动编译 TypeScript 代码。在其他 Vue 文件中，你可以像使用标准组件一样导入并使用这个自定义标签：

   <template>
     <my-custom-tag :message="customMessage" />
   </template>

   <script>
   import MyCustomTag from '@/components/MyCustomTag.vue';

   export default {
     components: {
       MyCustomTag,
     },
     data() {
       return {
         customMessage: 'Hello, Vue3 with TypeScript!',
       };
     },
   };
   </script>