ts集成和使用

1、集成

进入到项目，执行下面的命令

vue add typescript

这里选择n，生成的组件就会和文档给的一样；y则组件是class类型

上面的程序运行完，typescript也就集成好啦！

2、使用

<template>
   <div class="red">
      {
    {
    name}}
      <home/>
   </div>
</template>


<script lang="ts">
import {
    defineComponents,toRefs,reactive} from "vue"
import home from "./components/home.vue";


// data数据的接口
interface User {
    
  name: string;
  age: number;
  get(): string;
}

export default defineComponent({
    
   name:"App",
   components:{
    },

   setup(){
    

   // ref只能用第二种写法

    // 实现接口的第一种方法 属性可增不可减
    // let data: User = reactive({
    
    // name: "张三",
    // age: 12,
    // get() {
    
    // return this.name;
    // },
    // set(){}
    // });


        // 实现接口的第二种方法 属性不可增减
    // let data = reactive<User>({
    
    // name: "张三",
    // age: 12,
    // get() {
    
    // return this.name;
    // },
    // });
    
        // 实现接口的第三种方法 属性可增不可减
    let data = reactive({
    
      name: "张三",
      age: 12,
      get() {
    
        return this.name;
      },
      set() {
    },
    }) as User;
   
    return {
    
      ...toRefs(data),
    };
   }
})
</script>

<style lang="scss">
</style>