vue3.x集成typescript编程_定义数据的接口

吐过你看过vue3.x，那你一定知道vue3.x可以集成typescript进行编程，具体怎么操作呢？下面小编将方法简单介绍一下：

安装typescript

打开控制台执行命令

vue add typescript

在组件中编写typescript代码

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

<script lang="ts">
// 固定引入 defineComponent 
import { defineComponent } from "vue";

// 定义数据接口
interface Home {
  title: string;
  description: string;
  count: string;
  content?: string;
}

// 实现接口第一种方式
let newsData = {
  title: "北京",
  description: "1",
  count: "2"
} as Home

// 实现接口第二种方式
// let newsData: Home= {
//   title: "北京",
//   description: "1",
//   count: "2"
// } 

export default defineComponent({
  name: "HelloWorld",
  data() {
    return newsData
  },
  methods: {
    setTitle(){
      this.title = '上海'
    }
  },
  computed:{
    reversetTitle():string{
      return "456"
    }
  }
});
</script>

<style scoped>
</style>

以上就为大家简单讲解了vue中集成typescript以及用typescript写接口以及接口实现两种方式的简单案例，你看懂了吗？