vue中使用typescript与js语法区别，个人感觉

1、启用了变量语法校验，多类型可以加上问好

2、安装方式 vue add typescript

3、Ucc clasee-style component syntax?（是否使用class风格的组件语法，我不习惯）  选择NO，一起他一路yes

4、对象的定义，直接是interface  对象名称{对象属性：类型}；

      初始化的时候，var 变量名称：对象名称={初始化}

                                var变量名称={} as 对象名称

    在data(){

  return{  直接变量名称}

5、在页面script暴漏的时候直接 把自己也导出， import {自己} from ‘vue’

          export default 自己（{  }）

}

6、变量定义

<template>
    <div>
       News--{{title}}

       <br>
       <br>
       count={{count}}

       <br>
       <br>
       <button @click="setCount">改变Count</button>
       <br>
       <br>
       {{reverseTitle}}
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
//data数据的接口
interface News{
    title:string,
    description:string,
    count:number,
    content?:string
}
// let newsData:News={
//     title:"我是一个新闻",
//     description:"我是一个新闻的描述",
//     count:12
// }

let newsData={
    title:"我是一个新闻",
    description:"我是一个新闻的描述",
    count:12
} as News

export default defineComponent({
    data(){
        return newsData
    },methods:{
        setCount():void{
          this.count=123
        }
    },computed:{
        reverseTitle():string{
            return this.title.split("").reverse().join("")
        }
    }

})
</script>

<style lang="scss">
//cnpm install -D sass-loader node-sass

    
</style>

 

和初始化在暴漏自己在外面执行