vue3.x中setup实现接口的方法 调用接口的写法

vue3.x中setup实现接口的方法其实很简单，再次不做过多讲解，直接上代码

<template>
  <div class="hello">
    {{title}}
    <br/>
    {{reversetTitle}}
    <br>
    <button @click="setTitle('123')">改变title</button>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive } from "vue";

// 定义数据接口
interface Home {
  title: string;
  description: string;
  count?: string;
  getUserTitle(title:string):void
}

export default defineComponent({
  name: "HelloWorld",
  setup(){
      let user:Home=reactive({
          title:'我是home',
          description:'我是新闻'
          getUserTitle(title:string){
              this.title= title
          },
      })
  },
  data() {
    return newsData
  },
});
</script>

<style scoped>
</style>

实现接口的第二种写法

let user=reactive<Home>({
       title:'我是home',
       description:'我是新闻'
       getUserTitle(title:string){
        this.title= title
       },
      })

实现接口的第三种写法

let user=reactive({
          title:'我是home',
          description:'我是新闻'
          getUserTitle(title:string){
              this.title= title
          },
      }) as Home

上面就是关于在setup里面定义和调用接口的方法，你看懂了吗？