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>
和初始化在暴漏自己在外面执行
分类:
Vue学习
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!