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>
和初始化在暴漏自己在外面执行