vue3 + ts

1.创建ts项目

- 安装vuecli: npm install -g @vue/cli@next
- 创建项目： vue create demo
- 进入项目文件夹： cd demo
- 添加typescript: vue add typescript

配置选择如下：

2.非组合式中定义接口，方法

<script lang="ts">
import { defineComponent } from 'vue'
//定义接口
interface News {
  title:string,
  description: string,
  count: Number | string,
  content?:string
}
//实现接口的两种方法
// let newsData:News = {
//   title: "我是一个新闻",
//   description: "我是一个新闻描述符",
//   count: 12
// }
let newsData = {
  title: "我是一个新闻",
  description: "我是一个新闻描述符",
  count: 12
} as News
export default defineComponent({
  name:'News',
  data() {
    return newsData
  },
  methods: {
    setCount():void {
      this.count = 111;
    },
    setTitle(value:string):void {
      this.title = value;
    }
  },
  computed: {
    reveraetitle():string{
      return this.title.split("").reverse().join("")
    }
  }

3.组合式中定义接口，方法，计算属性等

<script lang="ts">
import { defineComponent } from 'vue'
import {toRefs,reactive,ref,computed} from 'vue'
//定义接口
interface User {
  username:string,
  age: Number
}
export default defineComponent({
  name:'News',
  setup() {
    //定义接口的方法1
    // let user:User = reactive({
    //   username: 'chengxuyuan',
    //   age: 20
    // })
    //定义接口的方法2
    // let user = reactive<User>({
    //   username: 'chengxuyuan',
    //   age: 20
    // })
    //定义接口的方法3
    let user = reactive({
      username: 'chengxuyuan',
      age: 20
    }) as User

    let count = ref<string|Number>(10);
    let reverseName = computed(():string=>{
      return user.username.split("").reverse().join("")
    })
    return {
      ...toRefs(user),
      count,
      reverseName
    }
  }
})
</script>