vue3 +ts 集合api使用 setup resf com

<template>
  <div class="home">
    {{inf}}

    <button @click="getname('灰太狼')">点击变换形态</button>
    <div>vue3+ts {{com}}</div>
  </div>
</template>

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

interface user{
    inf:string;
    arr:[];
    getname(agr:string):void;//传入一个字符 返回类型任意
    getactive():string; //定义一个方法，必须返回字符串
}


export default defineComponent({
  setup(props) { 
//进行校验，方法和类型全部对应起来，不然会报错
     const user:user = reactive({
          inf:'喜洋洋',
          arr:[],
          getname(agr:string){
            this.inf=agr;
          },
          getactive(){
            return '123'
          }
      })

//三张类型的写法
      // const user:user = reactive({})
      // const user = reactive<user>({})
      // const user = reactive({}) as user

      //ref的定义 使用泛型

      let conu=ref<number| string>("20")

      //计算属性
      let com=computed<number>(()=>{
          return 1+2;
      })

//必须返回
 return {
   ...toRefs(user),
   conu,
   com
 }
  }



});
</script>