《通信软件前端开发》课件-39.vue3 setup 中 TypeScript 类型定义之变量与函数

《通信软件前端开发》vue3setup中TypeScript类型定义之变量与函数课程导入//案例A：无类型定义constdata=ref({})constupdateData=(newData)=>{data.value=newDataconsole.log(data.value.user?.name)//可能会报错}

//案例B：有类型定义interfaceUserData{id:numbername:stringage:number}constdata=ref<UserData>({id:1,name:'张三',age:25})constupdateData=(newData:UserData):void=>{data.value=newDataconsole.log()//安全访问}

变量类型//字符串类型letusername:string='张三'//数字类型letage:number=25//布尔类型letisVIP:boolean=true//null和undefinedletdata:null=nullletnotDefined:undefined=undefined基础类型

变量类型//TS自动推导为stringletusername='张三'//鼠标悬停显示：letusername:string//TS自动推导为numberletage=25//letage:number//TS自动推导为booleanletisVIP=false//letisVIP:boolean//数组类型推导letscores=[90,85,95]//letscores:number[]类型自动推导

变量类型//可能是字符串或数字letid:string|numberid='user_001'//✅正确id=1001//✅正确id=true//❌报错：布尔类型不允许//可能是数组或nulllettags:string[]|null=nulltags=['vue','ts']//✅可以赋值数组联合类型

变量类型//定义用户接口interfaceUser{id:numberusername:stringage?:number//可选属性

readonlycreateTime:Date//只读属性}//使用接口letuser:User={id:1,username:'张三',createTime:newDate()}user.id=2//✅可以修改user.createTime=newDate()//❌报错：只读属性不能修改对象类型接口

响应式API类型<scriptsetuplang="ts">import{ref}from'vue'//写法1：类型推导（推荐）constcount=ref(0)//Ref<number>constmessage=ref('hello')//Ref<string>//写法2：泛型指定（联合类型时必需）constdata=ref<string|null>(null)//后续可以赋值data.value='现在有数据了'//✅data.value=null//✅ref的类型定义

//写法3：复杂类型interfaceTodo{id:numbertitle:string}consttodo=ref<Todo>({id:1,title:'学习TS'})</script>

响应式API类型<scriptsetuplang="ts">import{reactive}from'vue'//错误示范❌//reactive<number>(0)//报错！reactive只能接收对象//正确用法1：内联类型conststate=reactive<{name:string;age:number}>({name:'李四',age:20})reactive的类型定义

//正确用法2：复用接口（推荐）interfaceUser{name:stringage:numberemail?:string}constuser=reactive<User>({name:'王五',age:25})//后续可以添加可选属性user.email='wang@'</script>

函数类型//基础参数functiongreet(name:string){return`Hello,${name}`}greet('张三')//✅greet(123)//❌参数类型错误//多参数functionregister(id:number,name:string,age?:number){//age是可选参数

console.log(id,name,age)}register(1,'张三')//✅age可选register(2,'李四',25)//✅参数类型定义

函数类型//方式1：显式标注（清晰明了）functionadd(a:number,b:number):number{returna+b}//方式2：类型推导（简洁）functionmultiply(a:number,b:number){returna*b//TS自动推导返回number}//无返回值用voidfunctionlogMessage(msg:string):void{console.log(msg)//没有return语句}返回值类型定义

void和undefined的区别：void函数没有返回值；undefined函数返回undefined函数类型//定义函数类型别名typeCallbackFn=(error:Error|null,data:any)=>void//定义处理函数typeUserHandler=(user:User)=>Promise<void>//使用示例functionfetchData(callback:CallbackFn){try{constdata={id:1,name:'张三'}callback(null,data)}catch(err){callback(err,null)}}//在组件中使用consthandleUser:UserHandler=async(user)=>{console.log('处理用户:',)}函数类型别名

类型优先：先定义接口，后写逻辑推导优先：能推导的不注解，需约束的用泛型安全优先：可选参数用?，联合类型用|，只读属性用readonly课堂总结├──

📌

变量类型│

├──

🔹

类型注解：letname:string='张三'│

├──

🔹

类型推导：letage=25//number│

├──

🔹

联合类型：letid:string|number│

└──

🔹

接口对象：interfaceUser{...}├──

📌

响应式类型│

├──

🔹ref：基础类型/联合类型用泛型│

└──

🔹reactiv