07 Vue 3 中的 TypeScript 基础

Vue 3 中的 TypeScript 基础一、为什么 Vue 项目需要 TypeScriptJavaScript 允许对象结构在运行时自由变化。项目较大后常见问题包括接口字段拼写错误函数参数传错类型null数据没有判断重构字段后遗漏调用位置编辑器无法提示复杂对象结构。TypeScript 在代码运行前进行类型检查编写代码 ↓ TypeScript 检查类型 ↓ 编译成 JavaScript ↓ 浏览器执行它不会替代运行时数据校验但可以显著减少开发阶段错误。二、在 Vue 中启用 TypeScriptscript setup langtslangts表示脚本使用 TypeScript。三、基础类型consttitle:string数字孪生;consttemperature:number1650;constloading:booleanfalse;TypeScript 通常能够自动推断consttitle数字孪生;// 推断为 string没有必要为每个简单变量都重复标注类型。四、数组类型constsignalCodes:string[][BATH_TEMP,O2_FLOW];对象数组interfaceSignalItem{code:string;label:string;value:number;}constsignals:SignalItem[][];五、使用interface描述对象interfaceHeatHeader{heatId:string;converterNo:string;steelGrade:string;status:string;}使用constheat:HeatHeader{heatId:H001,converterNo:BOF-1,steelGrade:Q235,status:running};少字段、字段类型错误或多余字段都可能得到编辑器提示。六、可选属性interfaceHeatHeader{heatId:string;modelVersion?:string;}?表示字段可能不存在。读取时应考虑缺失constversionheat.modelVersion||unknown;七、联合类型typeDisplayModerealtime|playback;变量只能使用规定值constmoderefDisplayMode(playback);mode.valuerealtime;mode.valueother;// 类型错误联合类型特别适合页面模式风险等级请求状态视角名称设备阶段。八、可空类型接口数据加载前通常没有值constheatMetarefHeatHeader|null(null);使用时先判断if(!heatMeta.value){return;}console.log(heatMeta.value.heatId);或者使用可选链constidheatMeta.value?.heatId||--;T | null能强制开发者考虑数据尚未返回的阶段。九、refT()泛型constloadingrefboolean(false);constwarningsrefWarningItem[]([]);constheatMetarefHeatHeader|null(null);简单值可以依赖自动推断constloadingref(false);空数组和null初始值通常更需要显式泛型因为 TypeScript 无法从初始值推断完整业务类型。十、computedT()泛型constcurrentHeatcomputedHeatHeader|null((){returnsnapshot.value?.heat||playback.value?.heat||null;});多数情况下 TypeScript 可以自动推断但显式标注有助于确保分支返回值一致。十一、函数参数和返回值functionformatTemperature(value:number|null):string{if(valuenull){return--;}return${value.toFixed(0)}°C;}参数类型防止调用者传入错误数据返回值类型防止函数不同分支返回不一致。十二、对象映射RecordconstlabelStylesrefRecordstring,string({});它表示键是 string 值也是 string例如labelStyles.value{lance:left: 20px; top: 30px;,vessel:left: 100px; top: 80px;};也可以使用对象值interfacePositionStyle{left:string;top:string;}conststylesrefRecordstring,PositionStyle({});十三、类型别名与接口怎样选择interface适合描述对象结构interfaceMetricCard{key:string;label:string;value:number|null;}type适合联合类型、组合类型或简单别名typeRiskLevelnormal|warning|critical;typeNullableNumbernumber|null;两者能力有重叠项目内保持统一风格更重要。十四、import typeimporttype{HeatHeader,HeatPlayback}from/api/heat/types;import type表示这些导入只参与类型检查不需要出现在运行时 JavaScript 中。普通值导入仍使用import{getHeatDetail}from/api/heat;可以在同一条导入中混合import{buildPlaybackGroups,typePlaybackGroup}from./playback;十五、定时器类型浏览器和 Node.js 对定时器返回类型的声明可能不同。项目中常用consttimerrefReturnTypetypeofsetInterval|null(null);这样 TypeScript 会根据当前环境自动得到正确类型。十六、类型保护typeoffunctionreadNumber(value:unknown):number|null{if(typeofvaluenumberNumber.isFinite(value)){returnvalue;}returnnull;}数组判断if(Array.isArray(value)){console.log(value.length);}自定义类型保护interfaceFieldFrame{temperature:number[];velocity:number[];}functionisFieldFrame(value:unknown):valueisFieldFrame{if(!value||typeofvalue!object){returnfalse;}constframevalueasPartialFieldFrame;returnArray.isArray(frame.temperature)Array.isArray(frame.velocity);}十七、unknown与anyanyfunctionhandleError(error:any){console.log(error.message);}any会关闭类型检查。unknownfunctionhandleError(error:unknown){constmessageerrorinstanceofError?error.message:String(error);}unknown要求先判断类型更安全。接口错误、外部 JSON 和第三方数据通常适合使用unknown再缩小类型。十八、接口类型不等于运行时验证即使声明constresponse:HeatHeaderawaitfetchData();也不能保证后端实际返回正确字段。TypeScript 类型会在编译后消失。重要接口仍应进行运行时检查例如if(!data||typeofdata.heatId!string){thrownewError(接口字段缺失);}大型项目可以使用 Zod 等校验库但快速入门阶段应先建立“类型声明不是数据验证”的意识。十九、Vue Props 的 TypeScriptinterfaceHistoryState{timestamp:string;temperature:number|null;}defineProps{state:HistoryState;title?:string;}();事件也可以声明类型constemitdefineEmits{change:[index:number];close:[];}();二十、一个完整示例script setup langts import { computed, ref } from vue; interface SignalPoint { code: string; value: number; unit?: string; } type DisplayMode realtime | playback; const displayMode refDisplayMode(playback); const signals refSignalPoint[]([]); const selectedCode refstring | null(null); const selectedSignal computedSignalPoint | null(() { if (!selectedCode.value) { return null; } return signals.value.find( item item.code selectedCode.value ) || null; }); function formatSignal(point: SignalPoint | null): string { if (!point) { return --; } return ${point.value} ${point.unit || }.trim(); } /script二十一、常见误区1. 为了不报错全部使用any短期消除提示长期失去类型系统价值。2. 认为 TypeScript 会自动校验后端数据类型只在开发和编译阶段生效。3. 对简单值过度标注constloading:booleanfalse;可以依赖推断减少重复代码。4. 不处理null接口数据、DOM 引用和可选结果经常需要显式可空类型。二十二、本章小结Vue 项目中最需要掌握的 TypeScript 写法包括interface 联合类型 T | null refT() computedT() 函数参数与返回值 Record import type unknown 与类型保护下一章将学习 Vue Router理解 URL、页面组件和多模式页面之间的关系。Vue 3 中的 TypeScript 基础一、为什么 Vue 项目需要 TypeScriptJavaScript 允许对象结构在运行时自由变化。项目较大后常见问题包括接口字段拼写错误函数参数传错类型null数据没有判断重构字段后遗漏调用位置编辑器无法提示复杂对象结构。TypeScript 在代码运行前进行类型检查编写代码 ↓ TypeScript 检查类型 ↓ 编译成 JavaScript ↓ 浏览器执行它不会替代运行时数据校验但可以显著减少开发阶段错误。二、在 Vue 中启用 TypeScriptscript setup langtslangts表示脚本使用 TypeScript。三、基础类型consttitle:string数字孪生;consttemperature:number1650;constloading:booleanfalse;TypeScript 通常能够自动推断consttitle数字孪生;// 推断为 string没有必要为每个简单变量都重复标注类型。四、数组类型constsignalCodes:string[][BATH_TEMP,O2_FLOW];对象数组interfaceSignalItem{code:string;label:string;value:number;}constsignals:SignalItem[][];五、使用interface描述对象interfaceHeatHeader{heatId:string;converterNo:string;steelGrade:string;status:string;}使用constheat:HeatHeader{heatId:H001,converterNo:BOF-1,steelGrade:Q235,status:running};少字段、字段类型错误或多余字段都可能得到编辑器提示。六、可选属性interfaceHeatHeader{heatId:string;modelVersion?:string;}?表示字段可能不存在。读取时应考虑缺失constversionheat.modelVersion||unknown;七、联合类型typeDisplayModerealtime|playback;变量只能使用规定值constmoderefDisplayMode(playback);mode.valuerealtime;mode.valueother;// 类型错误联合类型特别适合页面模式风险等级请求状态视角名称设备阶段。八、可空类型接口数据加载前通常没有值constheatMetarefHeatHeader|null(null);使用时先判断if(!heatMeta.value){return;}console.log(heatMeta.value.heatId);或者使用可选链constidheatMeta.value?.heatId||--;T | null能强制开发者考虑数据尚未返回的阶段。九、refT()泛型constloadingrefboolean(false);constwarningsrefWarningItem[]([]);constheatMetarefHeatHeader|null(null);简单值可以依赖自动推断constloadingref(false);空数组和null初始值通常更需要显式泛型因为 TypeScript 无法从初始值推断完整业务类型。十、computedT()泛型constcurrentHeatcomputedHeatHeader|null((){returnsnapshot.value?.heat||playback.value?.heat||null;});多数情况下 TypeScript 可以自动推断但显式标注有助于确保分支返回值一致。十一、函数参数和返回值functionformatTemperature(value:number|null):string{if(valuenull){return--;}return${value.toFixed(0)}°C;}参数类型防止调用者传入错误数据返回值类型防止函数不同分支返回不一致。十二、对象映射RecordconstlabelStylesrefRecordstring,string({});它表示键是 string 值也是 string例如labelStyles.value{lance:left: 20px; top: 30px;,vessel:left: 100px; top: 80px;};也可以使用对象值interfacePositionStyle{left:string;top:string;}conststylesrefRecordstring,PositionStyle({});十三、类型别名与接口怎样选择interface适合描述对象结构interfaceMetricCard{key:string;label:string;value:number|null;}type适合联合类型、组合类型或简单别名typeRiskLevelnormal|warning|critical;typeNullableNumbernumber|null;两者能力有重叠项目内保持统一风格更重要。十四、import typeimporttype{HeatHeader,HeatPlayback}from/api/heat/types;import type表示这些导入只参与类型检查不需要出现在运行时 JavaScript 中。普通值导入仍使用import{getHeatDetail}from/api/heat;可以在同一条导入中混合import{buildPlaybackGroups,typePlaybackGroup}from./playback;十五、定时器类型浏览器和 Node.js 对定时器返回类型的声明可能不同。项目中常用consttimerrefReturnTypetypeofsetInterval|null(null);这样 TypeScript 会根据当前环境自动得到正确类型。十六、类型保护typeoffunctionreadNumber(value:unknown):number|null{if(typeofvaluenumberNumber.isFinite(value)){returnvalue;}returnnull;}数组判断if(Array.isArray(value)){console.log(value.length);}自定义类型保护interfaceFieldFrame{temperature:number[];velocity:number[];}functionisFieldFrame(value:unknown):valueisFieldFrame{if(!value||typeofvalue!object){returnfalse;}constframevalueasPartialFieldFrame;returnArray.isArray(frame.temperature)Array.isArray(frame.velocity);}十七、unknown与anyanyfunctionhandleError(error:any){console.log(error.message);}any会关闭类型检查。unknownfunctionhandleError(error:unknown){constmessageerrorinstanceofError?error.message:String(error);}unknown要求先判断类型更安全。接口错误、外部 JSON 和第三方数据通常适合使用unknown再缩小类型。十八、接口类型不等于运行时验证即使声明constresponse:HeatHeaderawaitfetchData();也不能保证后端实际返回正确字段。TypeScript 类型会在编译后消失。重要接口仍应进行运行时检查例如if(!data||typeofdata.heatId!string){thrownewError(接口字段缺失);}大型项目可以使用 Zod 等校验库但快速入门阶段应先建立“类型声明不是数据验证”的意识。十九、Vue Props 的 TypeScriptinterfaceHistoryState{timestamp:string;temperature:number|null;}defineProps{state:HistoryState;title?:string;}();事件也可以声明类型constemitdefineEmits{change:[index:number];close:[];}();二十、一个完整示例script setup langts import { computed, ref } from vue; interface SignalPoint { code: string; value: number; unit?: string; } type DisplayMode realtime | playback; const displayMode refDisplayMode(playback); const signals refSignalPoint[]([]); const selectedCode refstring | null(null); const selectedSignal computedSignalPoint | null(() { if (!selectedCode.value) { return null; } return signals.value.find( item item.code selectedCode.value ) || null; }); function formatSignal(point: SignalPoint | null): string { if (!point) { return --; } return ${point.value} ${point.unit || }.trim(); } /script二十一、常见误区1. 为了不报错全部使用any短期消除提示长期失去类型系统价值。2. 认为 TypeScript 会自动校验后端数据类型只在开发和编译阶段生效。3. 对简单值过度标注constloading:booleanfalse;可以依赖推断减少重复代码。4. 不处理null接口数据、DOM 引用和可选结果经常需要显式可空类型。二十二、本章小结Vue 项目中最需要掌握的 TypeScript 写法包括interface 联合类型 T | null refT() computedT() 函数参数与返回值 Record import type unknown 与类型保护下一章将学习 Vue Router理解 URL、页面组件和多模式页面之间的关系。