1. 项目概述从“Hello World”到“Hello eTs”如果你已经跟着前面的系列文章把ArkUI的开发环境搭好并且成功运行了第一个应用那么恭喜你最难的一步已经过去了。接下来我们终于要正式和eTs语言“打个招呼”了。很多刚接触HarmonyOS应用开发的朋友看到eTs这个名字可能会有点懵它和TypeScript是什么关系和JavaScript又有什么区别我是不是得先精通TS才能学eTs别担心这正是这篇文章要解决的问题。eTs全称extended TypeScript你可以把它理解为“扩展版TypeScript”。它是华为基于TypeScriptTS语法为ArkUI框架量身定制的一套声明式开发语言。简单来说它继承了TS强大的静态类型检查和面向对象特性同时又针对鸿蒙系统的UI开发、状态管理、生命周期等场景做了大量的语法糖和API扩展。所以你完全可以把eTs看作是TS在鸿蒙生态下的一个“方言”或者“超集”。学习eTs你不需要从零开始。如果你有JavaScriptJS的基础上手会非常快因为TS本身就是JS的超集。如果你连JS都没接触过但有其他编程语言如Java、C#的经验eTs的强类型和类Class的语法你也会感到非常亲切。这篇文章的目标就是帮你快速建立对eTs语言的直观认识理解它的核心语法特性并知道这些特性在ArkUI开发中具体有什么用。我们不求面面俱到但求抓住重点让你能看懂、能上手修改代码为后续更复杂的UI和逻辑开发打下坚实的基础。2. eTs语言核心特性解析2.1 强类型系统从“随心所欲”到“有章可循”如果你是从JavaScript转过来的那么eTs或者说它背后的TypeScript带给你的第一个、也是最深刻的冲击就是强类型系统。在JS里你可以这样写let message “Hello”; message 123; // 没问题变量类型从字符串变成了数字这很灵活但也带来了巨大的隐患。尤其是在大型项目或团队协作中你很难确定一个变量在运行时的确切类型bug往往就藏在这些不确定之中。eTs通过静态类型检查把这种不确定性消灭在代码编写阶段。在eTs中你需要也可以选择为变量、函数参数和返回值等明确指定类型。// 声明一个字符串类型的变量 let message: string “Hello eTs”; // message 123; // 这里IDE会直接报错不能将类型“number”分配给类型“string”。 // 声明一个数字类型的变量 let count: number 10; // 声明一个布尔类型的变量 let isLoaded: boolean false; // 声明一个数组数组内元素为数字 let list: number[] [1, 2, 3]; // 或者使用泛型语法 let list2: Arraynumber [1, 2, 3]; // 声明一个对象类型 let person: { name: string; age: number } { name: “张三”, age: 20 };为什么这很重要提前发现错误在代码编写时IDE如DevEco Studio就能提示类型错误不用等到运行时才崩溃。更好的代码提示当你输入message.的时候IDE能智能地提示出所有字符串可用的方法如.length,.substring()极大提升开发效率。代码即文档类型声明本身就是最好的注释让代码的可读性和可维护性大大增强。实操心得刚开始你可能会觉得写类型声明有点麻烦但请务必坚持。这是提升代码质量和开发体验最有效的手段之一。DevEco Studio提供了强大的类型推断在很多情况下你甚至不需要显式声明类型比如let msg “hello”;IDE会自动推断msg是string类型。但为了清晰在函数接口和复杂数据结构处建议明确写上类型。2.2 类与面向对象构建复杂的UI组件eTs完全支持基于类的面向对象编程OOP这是构建复杂、可复用UI组件的基石。ArkUI中的自定义组件本质上就是一个类。// 定义一个简单的Person类 class Person { // 成员变量属性 private name: string; // private 表示私有只能在类内部访问 public age: number; // public 表示公有默认可以在类外部访问 // 构造函数在创建类实例时调用 constructor(name: string, age: number) { this.name name; this.age age; } // 成员方法 public greet(): string { return Hello, my name is ${this.name}.; } // Getter方法用于获取私有属性 public getName(): string { return this.name; } } // 使用这个类 let person1 new Person(“李四”, 25); console.log(person1.greet()); // 输出Hello, my name is 李四. console.log(person1.age); // 可以直接访问公有属性25 // console.log(person1.name); // 错误name是私有属性无法在类外访问。 console.log(person1.getName()); // 正确通过公有方法访问私有属性在ArkUI开发中你通过Component装饰器来声明一个自定义组件这个组件本身就是一个类。组件的状态State装饰的变量、属性Prop或Link装饰的变量都是这个类的成员变量而构建UI的build()方法则是这个类的核心成员方法。Component struct MyComponent { // 状态变量属于这个类的成员 State count: number 0; // UI构建方法 build() { // ... } }面向对象在UI开发中的优势封装把数据和操作数据的方法捆绑在一起、继承通过Entry和Component的层级关系实现、多态不同的组件可以有相同的接口如都有build()方法这些特性让UI代码结构更清晰复用性更强。2.3 函数与箭头函数事件处理的利器函数是任何编程语言的核心。eTs中的函数语法和TS/JS基本一致但结合类型系统更加强大。// 1. 函数声明指定参数和返回值类型 function add(x: number, y: number): number { return x y; } // 2. 函数表达式 const multiply function(x: number, y: number): number { return x * y; }; // 3. 箭头函数 (重点) const divide (x: number, y: number): number { return x / y; }; // 箭头函数简写当函数体只有一条返回语句时 const square (x: number): number x * x;为什么箭头函数在ArkUI中特别重要因为箭头函数没有自己的this它会捕获其所在上下文的this值。在ArkUI的事件处理如按钮的onClick中这能完美避免this指向错误的问题。Component struct MyButton { State clickCount: number 0; // 使用箭头函数定义事件处理方法 private handleClick (): void { // 这里的 this 永远指向 MyComponent 的实例 this.clickCount 1; } build() { Button(‘点击我’) // 将箭头函数直接赋值给onClick .onClick(this.handleClick) } }如果使用普通函数声明private handleClick(): void { … }在onClick(this.handleClick)中handleClick方法内部的this在事件触发时可能会丢失指向组件实例导致无法正确修改State变量。使用箭头函数是ArkUI事件处理的最佳实践。2.4 模块化与导入导出代码组织的艺术当项目变大你不能把所有代码都写在一个文件里。eTs使用ES6的模块化语法来组织代码。导出Export从一个文件中暴露变量、函数、类等供其他文件使用。// utils.ets // 1. 分别导出 export const PI: number 3.14159; export function calculateArea(radius: number): number { return PI * radius * radius; } export class Logger { static log(msg: string): void { console.log([INFO] ${msg}); } } // 2. 默认导出一个模块只能有一个 export default class Config { static apiUrl: string “https://api.example.com”; }导入Import在其他文件中使用被导出的内容。// main.ets // 1. 导入指定的导出项 import { PI, calculateArea, Logger } from ‘./utils’; // 2. 导入整个模块作为一个对象 import * as Utils from ‘./utils’; console.log(Utils.PI); // 3. 导入默认导出 import MyConfig from ‘./utils’; // 注意这里不需要大括号且可以任意命名 console.log(MyConfig.apiUrl); // 使用 let area calculateArea(5); Logger.log(面积是${area});在ArkUI项目中我们通过import来引入其他自定义组件、工具函数或常量这是保持项目结构清晰的关键。3. ArkUI框架下的eTs特色语法3.1 装饰器给代码“贴上标签”装饰器Decorator是eTs从TS继承而来中一种特殊的语法使用符号表示。在ArkUI中装饰器被广泛用于修饰组件、变量和方法以赋予它们特定的框架能力。你可以把它理解为给代码“贴标签”告诉ArkUI框架这个类、变量或函数是干什么的。// Entry装饰一个自定义组件表示这是页面的入口组件 Entry Component struct Index { // State装饰一个变量表示这是组件的内部状态数据。 // 当State装饰的数据改变时会触发所在组件的UI重新渲染。 State message: string ‘Hello World’; State count: number 0; // Link装饰一个变量表示与父组件建立双向数据绑定。 // 父组件和当前组件都能修改这个数据且修改会同步到对方。 // Link装饰的变量必须在构造参数中初始化。 Link Watch(‘onCountChange’) linkedCount: number; // Prop装饰一个变量表示从父组件传递过来的单向数据。 // 子组件可以修改它的值但修改不会同步回父组件。 Prop propValue: string ‘default’; // Watch装饰一个函数用于监听某个状态变量的变化。 // 当被监听的状态如linkedCount改变时这个函数会被调用。 onCountChange() { console.log(linkedCount changed to: ${this.linkedCount}); } // build方法所有Component装饰的组件必须实现的方法用于描述UI结构。 build() { Column({ space: 20 }) { Text(this.message) Button(‘点击增加’) .onClick(() { // 修改State变量UI会自动更新 this.count; this.linkedCount; // 同时修改Link变量会同步到父组件 }) } } }装饰器是理解ArkUI响应式UI的核心。State,Link,Prop这些装饰器定义了数据的流动方向和UI的更新时机是声明式UI编程范式的关键实现。3.2 结构体与组件UI的基石在eTs for ArkUI中自定义组件使用struct结构体关键字而非class来定义。这是为了更轻量化和高效。struct是一种值类型在内存分配和传递上比引用类型的class开销更小更适合频繁创建和销毁的UI组件场景。// 使用 Component 装饰一个 struct就创建了一个自定义组件 Component struct MyCustomCard { // 组件的属性通常由父组件传入 Prop title: string; Prop content: string; // 组件的状态自己维护 State isExpanded: boolean false; // 必须实现的build方法 build() { Column() { // 使用 this 访问组件自身的属性 Text(this.title).fontSize(20).fontWeight(FontWeight.Bold) if (this.isExpanded) { Text(this.content).fontSize(14) } Button(this.isExpanded ? ‘收起’ : ‘展开’) .onClick(() { // 修改状态触发UI重绘 this.isExpanded !this.isExpanded; }) } .padding(10) .border({ width: 1, color: Color.Grey }) } } // 在父组件中使用 Component struct ParentPage { build() { Column() { // 像使用内置组件一样使用自定义组件并通过属性传递数据 MyCustomCard({ title: ‘新闻标题’, content: ‘这里是详细的新闻内容...’ }) MyCustomCard({ title: ‘通知’, content: ‘您有一条新的消息。’ }) } } }struct与class的主要区别在于继承和生命周期的管理方式。ArkUI的组件系统通过装饰器和特定的语法如build()来管理生命周期和继承关系而不是传统的类继承。3.3 条件渲染与循环渲染动态UI的构建UI很少是静态的我们需要根据数据状态动态显示或隐藏某些部分或者渲染一个列表。eTs在ArkUI的build方法中使用类似JSX的语法来实现条件渲染和循环渲染。条件渲染使用if/else语句。build() { Column() { if (this.score 60) { Text(‘及格’).fontColor(Color.Green) } else { Text(‘不及格’).fontColor(Color.Red) } // 也可以使用三元表达式进行简单的条件渲染 Text(this.isLoading ? ‘加载中...’ : ‘加载完成’) } }循环渲染使用ForEach语句。这是渲染列表数据的标准方式。State todoList: Arraystring [‘学习eTs’, ‘编写ArkUI组件’, ‘调试应用’]; build() { List() { // ForEach 接收三个参数数据源、生成子项的唯一键函数、子项构建函数 ForEach( this.todoList, // 数据源数组 (item: string, index?: number) index?.toString(), // 唯一键通常用id或index (item: string, index?: number) { // 为每个数据项构建UI ListItem() { Text(${index 1}. ${item}) .fontSize(18) .padding(10) } .onClick(() { console.log(点击了第${index}项${item}); }) } ) } }关键点ForEach的第二个参数键生成函数至关重要。它为每个列表项提供一个唯一的标识符key。当列表数据变化时ArkUI框架通过这个key来高效地识别哪些项被添加、删除或移动从而最小化UI的更新操作提升性能。如果列表项的顺序会改变千万不要用数组索引index作为key而应该使用数据项本身的唯一ID。4. 开发环境中的eTs实战演练4.1 创建并解读第一个eTs组件让我们在DevEco Studio中实际创建一个eTs文件并逐行解读。创建文件在entry/src/main/ets/目录下右键pages文件夹 -New - eTS File输入文件名例如FirstComponent。编写代码// 1. 导入ArkUI框架的内置组件和功能 import { Text, Column, Button } from ‘ohos.arkui’; // 2. 使用 Component 装饰器定义一个结构体组件 Component export struct FirstComponent { // 3. 使用 State 装饰器定义一个内部状态变量初始值为0 State private clickCount: number 0; // 4. 定义事件处理函数使用箭头函数确保this指向正确 private onButtonClick (): void { // 5. 修改状态变量UI会自动响应并更新 this.clickCount; console.log(按钮被点击了 ${this.clickCount} 次); } // 6. build 方法定义组件的UI结构 build() { // 7. Column 是垂直布局容器space设置子组件间距 Column({ space: 20 }) { // 8. Text 组件显示文本内容绑定到 clickCount 状态变量 Text(点击次数${this.clickCount}) .fontSize(28) // 设置字体大小 .fontColor(‘#007DFF’) // 设置字体颜色 // 9. Button 组件显示文本并绑定点击事件 Button(‘点我增加’) .width(‘40%’) // 设置宽度为父容器的40% .height(50) // 设置高度为50vp .fontSize(20) .backgroundColor(‘#007DFF’) .onClick(this.onButtonClick) // 绑定点击事件到我们定义的函数 } // 10. 设置Column容器的样式宽度100%垂直水平居中内边距 .width(‘100%’) .height(‘100%’) .justifyContent(FlexAlign.Center) // 垂直居中 .alignItems(HorizontalAlign.Center) // 水平居中 .padding(20) } }在页面中使用打开Index.ets删除原有内容导入并使用我们的组件。import { FirstComponent } from ‘./FirstComponent’; Entry Component struct Index { build() { Column() { // 像使用内置组件一样使用自定义组件 FirstComponent() } .width(‘100%’) .height(‘100%’) } }预览效果保存文件在预览器中即可看到一个带计数功能的简单界面。点击按钮文本数字会递增。通过这个简单的例子你将eTs的核心语法类型、类/结构体、函数、装饰器和ArkUI的组件化思想串联了起来。State实现了数据驱动UIbuild方法描述了UI结构事件绑定实现了交互。4.2 状态管理初探State, Prop, Link理解数据如何在组件间流动是ArkUI开发的关键。我们通过一个父子组件的例子来对比State,Prop,Link。// ChildComponent.ets - 子组件 Component export struct ChildComponent { // Prop从父组件单向接收数据。子组件可以修改但不会影响父组件。 Prop propValue: number; // Link与父组件双向绑定。任何一方的修改都会同步到另一方。 Link Watch(‘onLinkChange’) linkValue: number; // 监听linkValue的变化 onLinkChange() { console.log([子组件] linkValue 变为${this.linkValue}); } build() { Column({ space: 15 }) { Text(Prop from Parent: ${this.propValue}).fontSize(18) Text(Link from Parent: ${this.linkValue}).fontSize(18) Button(‘修改子组件的Prop’) .onClick(() { // 修改Prop只影响子组件内部显示父组件的sourceProp不变 this.propValue 10; console.log([子组件] propValue 改为${this.propValue} (父组件sourceProp未变)); }) Button(‘修改子组件的Link’) .onClick(() { // 修改Link会同步修改父组件的sourceLink this.linkValue 10; console.log([子组件] linkValue 改为${this.linkValue} (将同步到父组件)); }) } .padding(20) .border({ width: 1, color: Color.Blue }) } }// ParentPage.ets - 父组件入口 import { ChildComponent } from ‘./ChildComponent’; Entry Component struct ParentPage { // 父组件的状态 State sourceProp: number 100; // 将传递给子组件的Prop State sourceLink: number 200; // 将传递给子组件的Link build() { Column({ space: 30 }) { Text(父组件状态 - sourceProp: ${this.sourceProp}, sourceLink: ${this.sourceLink}) .fontSize(20) .fontWeight(FontWeight.Bold) // 使用子组件并传递数据 ChildComponent({ propValue: this.sourceProp, // 单向传递 linkValue: $sourceLink // 双向绑定需要使用 $ 操作符创建引用 }) Button(‘修改父组件的sourceProp’) .onClick(() { this.sourceProp 1; console.log([父组件] sourceProp 改为${this.sourceProp}); }) Button(‘修改父组件的sourceLink’) .onClick(() { this.sourceLink 1; console.log([父组件] sourceLink 改为${this.sourceLink} (将同步到子组件)); }) } .width(‘100%’) .height(‘100%’) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) .padding(20) } }运行并观察控制台日志你可以清晰地看到Prop子组件修改propValue父组件的sourceProp不受影响。父组件修改sourceProp子组件接收新的值并更新显示。数据流是单向的父 - 子。Link子组件修改linkValue父组件的sourceLink立即同步改变。父组件修改sourceLink子组件的linkValue也立即更新。数据流是双向的。注意在父组件初始化子组件时传递Link变量需要使用$操作符如$sourceLink这创建了一个对状态变量的引用。如何选择使用State管理组件自身内部的私有状态。使用Prop向子组件传递只读或单向可变的数据。适用于展示型组件。使用Link在父子组件间建立双向同步。适用于表单控件、需要联动修改的场景。5. 常见问题与避坑指南5.1 类型错误最常见的“拦路虎”问题现象DevEco Studio报红提示“Type ‘xxx’ is not assignable to type ‘yyy’”。原因与解决变量类型声明错误最常见。确保赋值时左右类型匹配。let age: number “25”; // 错误字符串不能赋值给数字类型。 let age: number 25; // 正确。函数参数/返回值类型不匹配function greet(name: string): string { return name; } greet(123); // 错误参数类型不匹配。 let message: number greet(“Alice”); // 错误返回值类型不匹配。对象属性缺失或类型不符interface User { id: number; name: string; } let user: User { id: 1 }; // 错误缺少 name 属性。 let user: User { id: 1, name: “Bob”, age: 30 }; // 错误多了 age 属性除非接口定义了可选属性age?: number。避坑技巧充分利用DevEco Studio的智能提示和错误检查。将鼠标悬停在错误上查看详细说明。养成先定义清晰接口interface或类型别名type再编码的习惯。5.2 状态更新了UI为什么不刷新问题现象点击按钮控制台打印数据已经改变但屏幕上的文本或样式没有更新。原因与解决没有使用State,Link,Prop等装饰器只有被这些装饰器修饰的变量其变化才会被ArkUI框架观察到并触发UI更新。// 错误示例 Component struct MyComponent { count: number 0; // 普通变量修改不会触发UI更新 build() { Column() { Text(${this.count}) Button(‘加1’).onClick(() { this.count; }) // UI不会刷新 } } } // 正确示例 Component struct MyComponent { State count: number 0; // 使用State装饰 build() { Column() { Text(${this.count}) // 现在点击按钮这里会更新 Button(‘加1’).onClick(() { this.count; }) } } }直接修改数组或对象的内部属性对于State装饰的复杂类型数组、对象直接修改其内部属性框架可能无法感知。State list: number[] [1, 2, 3]; State user: { name: string } { name: ‘Alice’ }; // 错误直接修改内部元素 this.list[0] 999; // UI可能不会更新 this.user.name ‘Bob’; // UI可能不会更新 // 正确创建一个新的引用 this.list [...this.list]; // 展开原数组创建新数组 this.list[0] 999; // 然后再修改或者一步到位this.list [999, ...this.list.slice(1)] this.user { ...this.user, name: ‘Bob’ }; // 展开原对象创建新对象最佳实践对于State对象总是采用“不可变数据”模式通过创建新的对象或数组副本来触发更新。5.3 ForEach渲染列表的Key陷阱问题现象列表数据更新增、删、排序时UI表现错乱或出现非预期的组件状态残留。原因ForEach的第二个参数键生成函数没有提供稳定、唯一的key。当列表变化时框架无法正确识别哪些项是新的、哪些项被移动了。错误示例State dataList: Arraystring [‘A’, ‘B’, ‘C’]; // 使用索引作为key当列表顺序可能变化时这是大忌 ForEach(this.dataList, (item: string, index: number) index.toString(), …) // 假设列表变为 [‘C’, ‘A’, ‘B’]框架会误以为第一项还是’A’因为key ‘0’还在第一个位置只是内容变成了’C’可能导致组件内部状态错乱。正确做法如果数据项本身有唯一标识如id务必使用它。interface TodoItem { id: number; // 唯一标识 task: string; } State todoList: TodoItem[] [ { id: 1, task: ‘学习eTs’ }, { id: 2, task: ‘编写组件’ }, ]; build() { List() { ForEach( this.todoList, (item: TodoItem) item.id.toString(), // 使用 id 作为 key (item: TodoItem) { ListItem() { Text(item.task) } } ) } }如果数据没有唯一id怎么办在极少数情况下如果数据确实没有稳定标识且顺序固定可以使用索引但必须清楚潜在风险。更好的做法是在数据源头或获取数据后为其添加一个唯一id。5.4 事件处理函数中“this”丢失问题现象在事件处理函数中访问this.stateVariable时报错undefined或者修改状态无效。原因事件处理函数被调用时其执行上下文this指向可能发生了变化不再指向组件实例。错误示例Component struct MyComponent { State value: number 0; // 使用普通方法定义事件处理函数 handleClick() { console.log(this); // 这里的this可能不是MyComponent实例 this.value; // 可能报错Cannot read properties of undefined } build() { Column() { Button(‘点击’) .onClick(this.handleClick) // 将函数引用传递过去 } } }解决方案使用箭头函数推荐箭头函数没有自己的this它会继承定义时所处上下文的this。Component struct MyComponent { State value: number 0; // 使用箭头函数定义 handleClick (): void { console.log(this); // 正确指向MyComponent实例 this.value; } build() { Column() { Button(‘点击’) .onClick(this.handleClick) } } }在绑定处使用箭头函数.onClick(() { this.handleClick(); }) // 或者 .onClick(() this.handleClick())使用.bind(this)方法较少用constructor() { // 在构造函数中绑定this this.handleClick this.handleClick.bind(this); } handleClick() { … }最佳实践在组件类中定义事件处理方法时统一使用箭头函数这是最安全、最清晰的方式。学习一门新的语言或框架初期遇到问题再正常不过。eTs的核心在于其类型系统和响应式装饰器理解了这两点就抓住了ArkUI开发的命脉。多写、多练、多查阅官方文档ArkTS API参考是快速进步的不二法门。从下一个“Hello World”级别的组件开始逐步尝试构建更复杂的交互界面吧。