网站建设公司 云智互联桂林两江四湖夜景图片

网站建设公司 云智互联,桂林两江四湖夜景图片,360seo关键词优化,在线小游戏网页版文章目录 一、基础环境配置差异1.1 项目创建对比1.2 TS专属配置#xff1a;tsconfig.json核心参数 二、组件定义核心语法差异2.1 script setup语法对比JavaScript写法#xff08;简洁无类型#xff09;TypeScript写法#xff08;类型明确#xff09; 2.2 选项式AP…文章目录一、基础环境配置差异1.1 项目创建对比1.2 TS专属配置tsconfig.json核心参数二、组件定义核心语法差异2.1 script setup语法对比JavaScript写法简洁无类型TypeScript写法类型明确2.2 选项式API对比传统风格JavaScript写法TypeScript写法需defineComponent三、响应式API写法差异3.1 ref API对比基础类型/对象类型3.2 reactive API对比复杂对象JavaScript写法TypeScript写法3.3 computed API对比计算属性JavaScript写法TypeScript写法四、Props/Emits类型约束差异4.1 Props定义对比JavaScript写法运行时校验TypeScript写法编译时校验4.2 Emits定义对比JavaScript写法仅声明事件名TypeScript写法事件参数类型约束五、生命周期钩子用法差异5.1 基础生命周期对比JavaScript写法TypeScript写法5.2 自定义Hook中的生命周期JavaScript写法useTimer.jsTypeScript写法useTimer.ts六、Vue Router集成差异6.1 路由配置对比JavaScript写法router/index.jsTypeScript写法router/index.ts6.2 组件内路由使用对比JavaScript写法TypeScript写法带类型推导七、Pinia状态管理差异7.1 Store定义对比JavaScript写法useUserStore.jsTypeScript写法useUserStore.ts7.2 Store使用对比JavaScript写法TypeScript写法八、自定义Hook封装差异8.1 数据请求Hook对比useRequestJavaScript写法useRequest.jsTypeScript写法useRequest.ts九、异步请求与事件处理差异9.1 异步请求对比AxiosJavaScript写法TypeScript写法9.2 DOM事件处理对比JavaScript写法TypeScript写法十、TS专属类型工具与语法10.1 基础类型工具10.2 Vue3开发高频TS语法十一、核心差异总结表一、基础环境配置差异Vue3项目中JS与TS的环境差异体现在项目创建、配置文件、依赖包三个层面TS需要额外的类型配置来实现语法校验。1.1 项目创建对比配置项JavaScript写法TypeScript写法创建命令npm create vuelatest→ 取消勾选“TypeScript”npm create vuelatest→ 勾选“TypeScript”核心文件组件后缀.vue配置文件vite.config.js组件后缀.vue内部指定langts配置文件vite.config.ts、tsconfig.json依赖包仅需Vue核心依赖vue、vitejs/plugin-vue额外依赖typescript、vue/tsconfig、vue-tsc类型检查1.2 TS专属配置tsconfig.json核心参数TS项目必须通过tsconfig.json指定类型规则核心配置如下基于Vue官方推荐模板{compilerOptions:{target:ES2020,// 编译目标ES版本strict:true,// 开启严格类型校验核心module:ESNext,moduleResolution:Node,isolatedModules:true,// 适配Vite单文件转译jsx:preserve,// 支持TSXsourceMap:true,paths:{/*:[./src/*]},// 路径别名与Vite同步lib:[ES2020,DOM],// 引入浏览器环境类型skipLibCheck:true},include:[src/**/*.ts,src/**/*.vue],// 类型检查范围references:[{path:./tsconfig.node.json}]}关键说明strict: true是TS类型安全的核心会强制校验this指向、空值判断等避免隐式any类型。二、组件定义核心语法差异Vue3组件定义分为script setup推荐和选项式API两种风格TS与JS的差异集中在类型声明和语法约束上模板部分完全一致。2.1 script setup语法对比JavaScript写法简洁无类型templatedivclassuser-cardh3{{user.name}}/h3button clickhandleEdit编辑/button/div/templatescript setup// 无类型约束直接声明变量constuser{name:张三,age:24};// 函数参数与返回值无类型consthandleEdit(newName){user.namenewName||user.name;};// 导入组件无需类型处理importAvatarfrom./Avatar.vue;/scriptTypeScript写法类型明确templatedivclassuser-cardh3{{user.name}}/h3button clickhandleEdit(李四)编辑/button/div/templatescript setup langts// 1. 接口定义复杂类型TS专属interfaceUser{name:string;age:number;gender?:string;// 可选属性}// 2. 变量显式类型约束constuser:User{name:张三,age:24};// 3. 函数参数与返回值类型声明consthandleEdit(newName:string):void{user.namenewName;};// 4. 组件类型获取TS专属importAvatarfrom./Avatar.vue;importtype{ComponentPublicInstance}fromvue;typeAvatarInstanceComponentPublicInstancelt;typeofAvatargt;;// 组件实例类型lt;/scriptgt;2.2 选项式API对比传统风格JavaScript写法scriptexportdefault{name:UserCard,data(){return{user:{name:张三,age:24}};},methods:{handleEdit(newName){this.user.namenewName;}}};/scriptTypeScript写法需defineComponentscript langtsimport{defineComponent}fromvue;interfaceUser{name:string;age:number;}exportdefaultdefineComponent({name:UserCard,// TS自动推导data返回值类型data(){return{user:{name:张三,age:24}asUser// 类型断言};},methods:{// 方法参数与返回值类型约束handleEdit(newName:string):void{this.user.namenewName;// this指向被TS正确推导}}});/script关键差异TS的defineComponent函数是类型推断的核心能自动解析组件选项中的this类型避免JS中this隐式为any的问题。三、响应式API写法差异Vue3的响应式APIref、reactive、computed是开发核心TS通过泛型和接口实现类型约束而JS仅依赖运行时校验。3.1 ref API对比基础类型/对象类型场景JavaScript写法TypeScript写法基础类型数字/字符串import { ref } from ‘vue’;const count ref(0);count.value 10; // 直接赋值无类型校验import { ref } from ‘vue’;// 方式1自动推导类型Refconst count ref(0);// 方式2显式泛型声明推荐const name ref(‘张三’);// 方式3联合类型const status ref‘loading’‘success’‘error’(‘loading’);count.value ‘10’; // TS编译报错类型不匹配对象类型import { ref } from ‘vue’;const user ref({name: ‘张三’,age: 24});user.value.age ‘24’; // 运行时错误JS无法拦截import { ref } from ‘vue’;// 接口约束对象结构interface User {name: string;age: number;}// 泛型指定类型const user ref({name: ‘张三’,age: 24});user.value.age ‘24’; // TS编译报错数字≠字符串user.value.gender ‘男’; // TS编译报错无该属性3.2 reactive API对比复杂对象核心差异reactive返回的是响应式代理对象TS必须通过泛型指定类型不能用类型注解会导致类型不匹配。JavaScript写法import{reactive}fromvue;// 无类型约束属性可随意添加constformreactive({username:,password:});form.remembertrue;// 随意添加属性JS不拦截TypeScript写法import{reactive,readonly}fromvue;// 1. 接口定义表单结构interfaceLoginForm{username:string;password:string;remember?:boolean;// 可选属性}// 2. 泛型指定类型必须用泛型不能用类型注解constformreactiveLoginForm({username:,password:});// 3. 只读响应式TSVue专属constreadonlyFormreadonly(form);readonlyForm.usernametest;// TS编译报错只读// 错误写法示例constwrongForm:LoginFormreactive({});// 报错响应式代理无法赋值给原始类型3.3 computed API对比计算属性JavaScript写法import{ref,computed}fromvue;constcountref(0);// 无返回值类型约束constdoubleCountcomputed((){returncount.value*2;});// 可写计算属性constfullNamecomputed({get(){return${firstName.value}${lastName.value};},set(val){const[first,last]val.split( );firstName.valuefirst;lastName.valuelast;}});TypeScript写法import{ref,computed}fromvue;constcountrefnumber(0);// 1. 自动推导返回类型ComputedRefnumberconstdoubleCountcomputed((){returncount.value*2;});// 2. 显式声明返回类型constdoubleCount2computednumber((){returncount.value*2;});// 3. 可写计算属性类型约束constfirstNamerefstring(张);constlastNamerefstring(三);constfullNamecomputedstring({get():string{return${firstName.value}${lastName.value};},set(val:string){const[first,last]val.split( )||[,];firstName.valuefirst;lastName.valuelast;}});四、Props/Emits类型约束差异Props和Emits是组件通信的核心JS仅支持运行时校验如type: String而TS能实现编译时类型校验提前规避传参错误。4.1 Props定义对比JavaScript写法运行时校验script setupimport{defineProps}fromvue;// 仅指定类型和默认值无编译时校验constpropsdefineProps({id:{type:Number,required:true},name:{type:String,default:匿名用户},tags:{type:Array,default:()[]}});// 使用props时无类型提示console.log(props.id,props.name);/scriptTypeScript写法编译时校验script setup langtsimport{defineProps,withDefaults}fromvue;// 1. 接口定义Props结构TS专属interfaceProps{id:number;// 必传属性name?:string;// 可选属性tags:string[];// 数组类型user:{// 嵌套对象类型name:string;age:number;};}// 2. 基础类型约束无默认值constprops1definePropsProps();// 3. 带默认值的PropswithDefaultsconstpropswithDefaults(definePropsProps(),{name:匿名用户,tags:()[default],// 嵌套对象默认值需返回函数user:()({name:默认用户,age:18})});// 使用props时有完整类型提示console.log(props.id);// 鼠标悬浮显示number类型props.id10;// TS编译报错props只读/script4.2 Emits定义对比JavaScript写法仅声明事件名script setupimport{defineEmits}fromvue;// 仅声明事件名无参数类型约束constemitdefineEmits([change,submit]);// 触发事件时参数随意传递JS不拦截consthandleSubmit(){emit(submit,{username:张三,password:123456});// 密码应为字符串};/scriptTypeScript写法事件参数类型约束script setup langtsimport{defineEmits}fromvue;// 方式1类型字面量推荐constemitdefineEmits{// 事件名(参数类型) 返回值通常为voidchange:(id:number)void;submit:(form:{username:string;password:string})void;}();// 方式2接口约束interfaceEmits{(e:change,id:number):void;(e:submit,form:{username:string;password:string}):void;}constemit2defineEmitsEmits();// 触发事件时参数类型不匹配则报错consthandleSubmit(){emit(submit,{username:张三,password:123456});// 正确emit(submit,{username:张三,password:123456});// TS编译报错};/script五、生命周期钩子用法差异两者生命周期钩子的调用时机完全一致差异仅体现在TS对参数类型和DOM元素类型的约束上。5.1 基础生命周期对比JavaScript写法import{onMounted,onUpdated,ref}fromvue;consttitleref(初始标题);onMounted((){// 操作DOM无类型提示可能出现null错误consteldocument.getElementById(title);el.style.colorred;// 若el为null运行时报错});onUpdated((){console.log(组件更新,title.value);});TypeScript写法import{onMounted,onUpdated,ref}fromvue;consttitlerefstring(初始标题);onMounted((){// 1. 类型断言明确DOM元素类型consteldocument.getElementById(title)asHTMLDivElement;el.style.colorred;// 有完整CSS属性提示// 2. 类型守卫避免null错误constel2document.getElementById(title);if(el2){// 自动缩小类型为HTMLDivElementel2.style.fontSize16px;}});onUpdated((){console.log(组件更新,title.value);// title类型明确为string});5.2 自定义Hook中的生命周期JavaScript写法useTimer.jsimport{ref,onMounted,onUnmounted}fromvue;// 无参数类型和返回值类型约束exportconstuseTimer(initialValue0){constcountref(initialValue);lettimernull;onMounted((){timersetInterval((){count.value;},1000);});onUnmounted((){clearInterval(timer);});return{count};};TypeScript写法useTimer.tsimport{ref,onMounted,onUnmounted,typeRef}fromvue;// 1. 泛型约束入参类型支持多种数字类型exportconstuseTimerTextendsnumber(initialValue:T0asT):{count:RefT}{constcountrefT(initialValue);// 2. 显式声明定时器类型lettimer:NodeJS.Timeout|nullnull;onMounted((){timersetInterval((){count.value(count.value1)asT;},1000);});onUnmounted((){if(timer)clearInterval(timer);// 类型守卫});// 3. 明确返回值类型return{count};};TS优势通过泛型让Hook支持多类型入参同时显式声明定时器类型避免JS中timer隐式为any的问题。六、Vue Router集成差异Vue Router 4对TS有深度支持TS能通过类型推导实现路由参数、导航守卫的类型安全而JS仅依赖手动校验。6.1 路由配置对比JavaScript写法router/index.jsimport{createRouter,createWebHistory}fromvue-router;importHomefrom../views/Home.vue;importUserfrom../views/User.vue;// 无类型约束路由参数全靠手动记忆constroutes[{path:/,name:Home,component:Home},{path:/user/:id,name:User,component:User,props:true// 直接传递params参数}];constroutercreateRouter({history:createWebHistory(import.meta.env.BASE_URL),routes});exportdefaultrouter;TypeScript写法router/index.tsimport{createRouter,createWebHistory,typeRouteRecordRaw}fromvue-router;importHomefrom../views/Home.vue;importUserfrom../views/User.vue;// 1. 类型约束路由配置RouteRecordRawconstroutes:RouteRecordRaw[][{path:/,name:Home,component:Home},{path:/user/:id,name:User,component:User,props:true}];constroutercreateRouter({history:createWebHistory(import.meta.env.BASE_URL),routes});// 2. 路由守卫类型约束TS专属router.beforeEach((to,from,next){// to/from均为RouteLocationNormalized类型有完整参数提示if(to.nameUser!to.params.id){next(/);}else{next();}});exportdefaultrouter;// 3. 路由参数类型声明全局类型增强declaremodulevue-router{interfaceRouteParams{id?:string;// 声明/user/:id的id参数类型}}6.2 组件内路由使用对比JavaScript写法script setupimport{useRouter,useRoute}fromvue-router;constrouteruseRouter();constrouteuseRoute();// 无参数类型提示容易传错constgoUser(id){router.push({name:User,params:{id}});};// 路由参数类型未知需手动转换constuserIdroute.params.id;// 可能为string或undefinedconstuserIdNumNumber(userId);// 手动转数字/scriptTypeScript写法带类型推导script setup langtsimport{useRouter,useRoute}fromvue-router;importtype{RouteLocationNamedRaw}fromvue-router;// 1. 路由实例类型明确constrouteruseRouter();constrouteuseRoute();// 2. 路由跳转参数类型约束constgoUser(id:number){constto:RouteLocationNamedRaw{name:User,params:{id:id.toString()}// 明确params类型为string};router.push(to);};// 3. 路由参数类型安全获取constuserIdroute.params.id;// TS自动推导为string | undefinedif(userId){constuserIdNumNumber(userId);// 类型守卫后安全转换}// 4. 路由查询参数类型约束constpageroute.query.page?Number(route.query.page):1;/script进阶技巧Vue Router 4.4支持通过unplugin-vue-router插件自动生成路由类型无需手动声明路由参数。七、Pinia状态管理差异Pinia作为Vue3官方状态管理库原生支持TS其与JS的差异体现在状态类型推导和Action/Getter类型约束上。7.1 Store定义对比JavaScript写法useUserStore.jsimport{defineStore}frompinia;// 无类型约束状态属性可随意修改exportconstuseUserStoredefineStore(user,{state:()({name:张三,age:24,roles:[]}),getters:{// 无返回值类型约束fullName(){return用户${this.name};}},actions:{// 无参数类型约束setAge(age){this.ageage;// 若传入字符串运行时出错},// 异步Action无返回值类型asyncfetchUser(){constresawaitfetch(/api/user);constdataawaitres.json();this.$patch(data);}}});TypeScript写法useUserStore.tsimport{defineStore}frompinia;// 1. 接口定义状态类型TS专属interfaceUserState{name:string;age:number;roles:string[];}// 2. 选项式Store带类型约束exportconstuseUserStoredefineStore(user,{// 显式声明state返回值类型state:():UserState({name:张三,age:24,roles:[]}),getters:{// 3. Getter返回值类型约束fullName:(state):string{return用户${state.name};// state类型自动推导}},actions:{// 4. Action参数类型约束setAge(age:number):void{this.ageage;// 传入非数字则编译报错},// 5. 异步Action返回值类型PromiseasyncfetchUser():PromiseUserState{constresawaitfetch(/api/user);constdataawaitres.json()asUserState;// 类型断言this.$patch(data);returndata;}}});// 3. 组合式Store更灵活的类型控制exportconstuseCounterStoredefineStore(counter,(){constcountrefnumber(0);// 显式类型constincrement(step:number1):void{count.valuestep;};return{count,increment};});7.2 Store使用对比JavaScript写法script setupimport{useUserStore}from/stores/useUserStore;constuserStoreuseUserStore();// 无类型提示容易调用错误方法userStore.setAge(25);// 运行时错误console.log(userStore.fullName);// 无返回值类型提示/scriptTypeScript写法script setup langtsimport{useUserStore}from/stores/useUserStore;constuserStoreuseUserStore();// 1. 调用Action时有参数类型提示userStore.setAge(25);// 正确userStore.setAge(25);// TS编译报错// 2. 获取Getter时有明确类型constfullName:stringuserStore.fullName;// 类型匹配// 3. 异步Action类型约束constfetchDataasync(){constuserDataawaituserStore.fetchUser();// userData类型为UserState};/script关键优势Pinia在TS环境下会自动推导Store实例的类型无需手动声明且支持通过接口严格约束状态结构。八、自定义Hook封装差异自定义Hook是Vue3组合式API的核心复用方式TS通过泛型和类型导出让Hook更通用、更安全。8.1 数据请求Hook对比useRequestJavaScript写法useRequest.jsimport{ref}fromvue;// 无类型约束返回值类型混乱exportconstuseRequest(requestFn){constdataref(null);constloadingref(false);consterrorref(null);constfetchDataasync(...args){loading.valuetrue;try{constresawaitrequestFn(...args);data.valueres.data;returnres.data;}catch(err){error.valueerr;throwerr;}finally{loading.valuefalse;}};return{data,loading,error,fetchData};};TypeScript写法useRequest.tsimport{ref,typeRef}fromvue;// 1. 泛型定义响应数据类型支持任意接口返回格式exportconstuseRequestT,Pextendsany[][](requestFn:(...args:P)Promise{data:T}){// 2. 状态类型明确constdata:RefT|nullref(null);constloading:Refbooleanref(false);consterror:RefError|nullref(null);// 3. 函数参数与返回值类型约束constfetchDataasync(...args:P):PromiseT{loading.valuetrue;try{constresawaitrequestFn(...args);data.valueres.data;returnres.data;}catch(err){error.valueerrasError;// 类型断言throwerr;}finally{loading.valuefalse;}};// 4. 明确返回值类型return{data,loading,error,fetchData};};// 接口定义API返回类型TS专属interfaceUserData{id:number;name:string;}// 使用示例指定泛型类型为UserDataconst{data,fetchData}useRequestUserData,[number]((id)fetch(/api/user/${id}).then(resres.json()));TS优势通过泛型让Hook支持任意请求参数和响应类型复用性更强且能自动推导返回值类型。九、异步请求与事件处理差异异步请求和DOM事件处理是前端开发高频场景TS通过类型约束避免回调函数参数类型错误。9.1 异步请求对比AxiosJavaScript写法importaxiosfromaxios;// 无响应数据类型约束需手动判断属性constfetchUserasync(id){try{constresawaitaxios.get(/api/user/${id});// 无类型提示可能访问不存在的属性console.log(res.data.user.name,res.data.user.age);returnres.data;}catch(err){console.error(请求失败,err);}};TypeScript写法importaxiosfromaxios;// 1. 接口定义响应数据类型interfaceUserResponse{code:number;data:{user:{name:string;age:number;};};message:string;}// 2. 泛型指定响应类型constfetchUserasync(id:number):PromiseUserResponse[data]{try{// 3. Axios泛型参数指定响应类型constresawaitaxios.getUserResponse(/api/user/${id});// 有完整属性提示避免访问不存在的字段console.log(res.data.user.name,res.data.user.age);returnres.data;}catch(err){// 4. 错误类型处理if(axios.isAxiosError(err)){console.error(请求失败,err.response?.data.message);}else{console.error(未知错误,err);}throwerr;}};9.2 DOM事件处理对比JavaScript写法templateinput typetextinputhandleInput/button clickhandleClick点击/button/templatescript setupconsthandleInput(e){// 无事件对象类型提示需手动记忆属性console.log(输入内容,e.target.value);};consthandleClick(e){// 可能误写属性名e.preventDefault();};/scriptTypeScript写法templateinputtypetextinputhandleInput/button clickhandleClick点击/button/templatescript setup langts// 1. 明确事件对象类型consthandleInput(e:Event){// 2. 类型断言为HTMLInputElementconstinputEle.targetasHTMLInputElement;console.log(输入内容,inputEl.value);// 有value属性提示};// 3. 鼠标事件类型consthandleClick(e:MouseEvent){e.preventDefault();// 有完整方法提示};/script十、TS专属类型工具与语法以下语法为TS专属JS完全不支持是TS类型安全的核心保障需重点掌握。10.1 基础类型工具import{ref,reactive}fromvue;// 1. 接口Interface定义对象结构interfaceUser{name:string;age:number;gender?:string;// 可选属性readonlyid:number;// 只读属性}// 2. 类型别名Type定义任意类型typeStatusloading|success|error;// 联合类型typeUserListUser[];// 数组类型typeNullableTT|null;// 泛型类型别名// 3. 泛型Generic实现通用类型constcreateArrayT(length:number,value:T):T[]{returnArray(length).fill(value);};constnumberArraycreateArraynumber(3,0);// [0,0,0]conststringArraycreateArraystring(3,a);// [a,a,a]// 4. 交叉类型Intersection合并多个类型typeAdminUser{role:admin};constadmin:Admin{id:1,name:管理员,age:30,role:admin};// 5. 工具类型Utility TypesVue开发高频使用// Partial将属性变为可选constupdateUser(user:User,updates:PartialUser){return{...user,...updates};};updateUser(admin,{age:31});// 仅更新age属性// Pick筛选属性typeUserNamePickUser,name|id;// 仅包含name和id// Omit排除属性typeUserWithoutIdOmitUser,id;// 排除id属性// Exclude排除联合类型中的部分类型typeNonLoadingStatusExcludeStatus,loading;// success | error10.2 Vue3开发高频TS语法类型断言const el e.target as HTMLInputElement明确变量类型类型守卫if (typeof value number)缩小变量类型范围空值合并const name user.name ?? 匿名处理null/undefined可选链const age user?.age安全访问嵌套属性类型导入import type { User } from ./types仅导入类型不生成代码。十一、核心差异总结表对比维度JavaScript写法特点TypeScript写法特点类型约束无显式类型依赖运行时校验编译时类型校验支持接口、泛型组件定义简洁无类型this隐式为any需langtsdefineComponent推导类型响应式API直接使用无类型约束ref/reactive需泛型computed指定返回值类型Props/Emits运行时校验type: String接口约束Props类型字面量约束Emits参数路由集成无参数类型提示手动转换