.text-color{color:var(--color);}TypeScript是JS的超集，主要提供类型系统和对ES6的支持。使用TypeScript可以增加代码的可读性和可维护性。在react和vue社区中越来越多的人开始使用TypeScript。从最近发布的Vue3正式版来看，Vue3的源代码是用TypeScript编写的，更好的TypeScript支持也是本次升级的亮点。前端培训当然，如何在实际开发中正确拥抱TypeScript也是迁移到Vue3的一个小痛点。这里有一些关于Vue3和TypeScript的交流。96.8%的代码都是TypeScript，支持度相当大。项目构建在官方仓库的Quickstart中。推荐使用两种方法来构建我们的SPA项目：vitenpminitvite-appsail-vue3#ORyarncreatevite-appsail-vue3vue-clinpminstall-g@vue/cli#ORyarnglobaladd@vue/clivuecreatesail-vue3selectvue3presetvite是一款原生ESM驱动的web开发搭建工具。打开vite依赖的package.json可以发现在devDependencies中开发依赖引入了TypeScript，甚至还有vuex、vue-router、less、sass这些本地开发经常用到的工具。Vite轻量级、开箱即用，满足大多数开发场景的需求。它是快速启动本地Vue项目的完美工具。下面的demo代码也是用vite搭建的。从vue2.x过来的肯定知道vue-cli的官方脚手架。vue3的更新怎么能没有vue-cli呢？vue-cli强调使用cli交互配置，让选择更加灵活可控。丰富的官方插件适配，GUI创建管理界面，标准化的开发流程，这些都是vue-cli的特点。vue-cli?TypeScriptSTEP1vue-cli?TypeScriptSTEP2如果要预装TypeScript，需要选择手动配置，勾选TypeScript。忘记使用TypeScript也没关系。只需添加一行cli命令。在vue代码中，在script标签中添加lang="ts"....text-color{color:var(--color);}tsx导入{ref,reactive}from"vue";import{AddressList,NavBar,Toast,Popup}from"vant";importAddressEditfrom'./AddressEdit'importrouterfrom'@/router'exportdefault{setup(){constchosenAddressId=ref('1')constshowEdit=ref(false)constlist=reactive([{id:'1',名字:'张三',tel:'13000000000',address:'浙江省杭州市西湖区文三路',isDefault:true,},{id:'2',name:'李四',tel:'1310000000',address:'浙江省杭州市拱墅区莫干山路',},])constdisabledList=reactive([{id:'3',name:'王舞',tel:'1320000000',address:'浙江省杭州市滨江区江南大道',},])constonAdd=()=>{showEdit.value=true}constonEdit=(item:any,index:string)=>{Toast('编辑地址：'+index);}constonClickLeft=()=>{router.back()}constonClickRight=()=>{router.push('/todoList')}return()=>{return(
