Vue3通透教程初探TypeScript

// 定义一个简单的Vue组件选项对象
const HelloWorld = {
  // 使用 TypeScript 的类型声明来指定 props 的结构
  props: {
    msg: String
  },
  // setup 函数是一个新的组合式 API 入口点
  setup(props) {
    // 使用 TypeScript 来定义一个响应式的计数器变量
    const count = ref<number>(0);
 
    // 定义一个方法用于点击时增加计数器
    function increment() {
      count.value++;
    }
 
    // 返回一个包含模板需要用到的属性和方法的对象
    return {
      count,
      increment
    };
  },
  // 模板部分是标准的 HTML 和 Vue 指令
  template: `<button @click="increment">{{ msg }} {{ count }}</button>`
};
 
// 在 Vue 应用中注册这个组件
createApp(HelloWorld).mount('#app');

这个示例展示了如何在Vue3中结合TypeScript使用组合式API来创建一个响应式的计数器组件。代码中定义了props的类型、响应式变量的声明和一个方法。最后，通过createApp函数和.mount方法将组件挂载到DOM中。