鸿蒙原生开发手记:徒步迹 - ArkTS 语法快速入门

📅 2026/7/15 23:56:33 👁️ 阅读次数 📝 编程学习
鸿蒙原生开发手记:徒步迹 - ArkTS 语法快速入门

鸿蒙原生开发手记:徒步迹 - ArkTS 语法快速入门

掌握 ArkTS 核心语法,为开发"徒步迹"打好语言基础


一、前言

ArkTS 是鸿蒙原生应用的主要开发语言,它是 TypeScript 的超集,在 TypeScript 的基础上增加了静态类型检查和声明式 UI 编程的支持。与标准的 TypeScript 相比,ArkTS 有以下特点:

  • 严格类型检查:所有变量必须有明确的类型
  • 装饰器语法:使用@Component@State等装饰器来定义组件和状态
  • 数据绑定:声明式 UI 与状态管理深度集成
  • 性能优化:AOT 编译到原生机器码,运行时零反射

本文将结合"徒步迹"App 的实际需求,快速带你掌握 ArkTS 的核心语法。


二、变量与类型声明

ArkTS 要求所有变量必须有明确的类型声明,不支持隐式的any类型。

2.1 基础类型

// 数值类型letdistance:number=5.2;// 徒步距离(km)letelevation:number=300;// 爬升高度(m)letsteps:number=8642;// 步数// 字符串类型letrouteName:string='山野徒步路线';letdescription:string='这是一条风景优美的路线';// 布尔类型letisRecording:boolean=false;// 是否在记录中letisPublic:boolean=true;// 是否公开// 联合类型letstatus:'idle'|'recording'|'paused'|'completed'='idle';

2.2 数组与元组

// 数组 - 存储轨迹点坐标letcoordinates:number[]=[116.397,39.908,116.398,39.909];letrouteNames:string[]=['路线A','路线B','路线C'];// 泛型数组lettrackPoints:Array<number>=[];// 元组 - 固定长度和类型letcoordinatePair:[number,number]=[116.397,39.908];

2.3 对象与接口

使用interface定义数据模型,这是 ArkTS 中最重要的类型定义方式:

interfaceHikingRoute{id:number;name:string;distance:number;duration:number;difficulty:'简单'|'中等'|'困难';tags:string[];}// 使用接口letroute:HikingRoute={id:1,name:'香山徒步',distance:8.5,duration:5400,// 秒difficulty:'中等',tags:['森林','山景'],};

三、函数定义

ArkTS 中的函数定义需明确参数类型和返回值类型:

// 基础函数functioncalculatePace(duration:number,distance:number):number{returnduration/distance;}// 箭头函数constformatDistance=(meters:number):string=>{if(meters>=1000){return`${(meters/1000).toFixed(2)}km`;}return`${Math.round(meters)}m`;};// 可选参数functioncreateRoute(name:string,description?:string):HikingRoute{return{id:Date.now(),name:name,distance:0,duration:0,difficulty:'简单',tags:[],};}// 使用letroute1=createRoute('周末徒步');letroute2=createRoute('越野训练','适合有经验者');

四、类与装饰器

ArkTS 中类的使用与传统 TypeScript 类似,但加入了装饰器语法用于声明式 UI。

4.1 普通类

classRouteService{privateroutes:HikingRoute[]=[];addRoute(route:HikingRoute):void{this.routes.push(route);}getRouteById(id:number):HikingRoute|undefined{returnthis.routes.find(r=>r.id===id);}gettotalDistance():number{returnthis.routes.reduce((sum,r)=>sum+r.distance,0);}}// 使用constservice=newRouteService();service.addRoute(route1);console.log(service.totalDistance);

4.2 组件装饰器

这是 ArkTS 最核心的特性 - 用装饰器定义 UI 组件:

@Componentstruct RouteCard{@ProprouteName:string='';@Propdistance:number=0;build(){Column(){Text(this.routeName).fontSize(16).fontWeight(FontWeight.Bold);Text(`距离:${this.distance}km`).fontSize(14).fontColor('#666');}.padding(12).backgroundColor('#FFF').borderRadius(8);}}

五、控制流语句

// if/elsefunctiongetDifficulty(distance:number):string{if(distance<5){return'简单';}elseif(distance<15){return'中等';}else{return'困难';}}// for-of 循环(推荐)lettags:string[]=['森林','山景','溪流'];for(lettagoftags){console.log(tag);}// forEachroutes.forEach((route,index)=>{console.log(`${index}:${route.name}`);});

ArkTS 不支持for-in循环,推荐使用for-of或数组方法。


六、异步编程

ArkTS 使用async/await处理异步操作,与标准 TypeScript 一致:

// 模拟网络请求asyncfunctionfetchRoutes():Promise<HikingRoute[]>{// 返回 PromisereturnnewPromise((resolve)=>{setTimeout(()=>{resolve([route1,route2]);},1000);});}// 使用 async/awaitasyncfunctionloadRoutes():Promise<void>{try{constroutes=awaitfetchRoutes();console.log(`加载了${routes.length}条路线`);}catch(error){console.error('加载失败:',error);}}

七、模块化

ArkTS 使用import/export进行模块化管理:

// ---- models/Route.ets ----exportinterfaceHikingRoute{id:number;name:string;}exportfunctionformatRouteName(name:string):string{return`徒步 -${name}`;}// ---- pages/RouteList.ets ----import{HikingRoute,formatRouteName}from'../models/Route';constroute:HikingRoute={id:1,name:'香山'};console.log(formatRouteName(route.name));// 输出: 徒步 - 香山

八、与 TypeScript 的主要区别

特性TypeScriptArkTS
any类型支持不支持
unknown类型支持不支持
as类型断言支持不支持(用as T受限)
for-in支持不支持
装饰器实验性原生支持
声明式 UI无内置支持内置 ArkUI 框架
JSDoc 类型注释支持不支持

九、实战:徒步迹数据模型

结合"徒步迹"App,我们定义核心数据模型:

// models/DataModels.etsexportinterfaceUser{id:number;nickname:string;avatar:string;phone:string;}exportinterfaceCoordinate{latitude:number;longitude:number;altitude:number;timestamp:number;}exportinterfaceRecording{id:number;name:string;startTime:number;endTime:number;distance:number;duration:number;calories:number;trackPoints:Coordinate[];status:'idle'|'recording'|'paused'|'completed';}exportinterfaceTeam{id:number;name:string;memberCount:number;maxMembers:number;}// 工具函数exportfunctioncalculateDistance(coord1:Coordinate,coord2:Coordinate):number{constR=6371000;// 地球半径constdLat=(coord2.latitude-coord1.latitude)*Math.PI/180;constdLon=(coord2.longitude-coord1.longitude)*Math.PI/180;consta=Math.sin(dLat/2)*Math.sin(dLat/2)+Math.cos(coord1.latitude*Math.PI/180)*Math.cos(coord2.latitude*Math.PI/180)*Math.sin(dLon/2)*Math.sin(dLon/2);constc=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));returnR*c;}

这个数据模型将在后续所有页面开发中反复使用。


十、总结

通过本文,我们学习了 ArkTS 的核心语法,包括类型系统、函数、类、装饰器、异步编程和模块化等关键特性。与 TypeScript 相比,ArkTS 更加严格但也更安全,特别适合声明式 UI 开发。

下一篇文章我们将学习 ArkUI 框架的基础组件,开始构建"徒步迹"的用户界面。


下一篇预告:鸿蒙原生开发手记:徒步迹 - ArkUI 声明式UI基础组件

有任何疑问欢迎在评论区留言,我们一起交流学习。