ArkTS语言基础
下面我们将从几个方面介绍ArkTS语言基础：
-
ArkTS概述
-
基础语法
-
声明式UI
-
状态管理
-
组件和装饰器
由于ArkTS是TypeScript的超集，因此如果你有TypeScript或JavaScript的基础，会更容易上手。
1. ArkTS概述
ArkTS是OpenHarmony应用开发语言，它在TypeScript的基础上，主要做了以下扩展：
-
声明式UI描述：提供了类似于React/Vue的声明式UI编程模型，使用简单的UI描述语法和强大的组件化能力。
-
状态管理：提供了多种状态管理装饰器，如
@State、@Prop、@Link等，来实现数据与UI的联动。 -
**渲染控制
if/else、forEach等。
2. 基础语法
ArkTS的基础语法与TypeScript几乎一致，包括：
-
变量声明：使用
let和const。 -
数据类型：包括基本类型（number, string, boolean, null, undefined, symbol）和复杂类型（array, object, function等），也支持类型注解。
-
函数：支持函数声明和箭头函数。
-
类：支持类、继承、访问修饰符（public, private, protected）等。
-
模块：使用
import和export来导入导出模块。
3. 声明式UI
ArkTS采用声明式UI开发范式，使用自定义组件的方式来构建UI。一个自定义组件由struct关键字定义，必须使用@Component装饰器，并且至少有一个build方法。
示例：
arkts
@Component
struct MyComponent {
build() {
// 构建UI
Column() {
Text('Hello, OpenHarmony!')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('100%')
}
}
4. 状态管理
ArkTS提供了多种装饰器来管理状态，从而实现UI的自动更新。常见的状态管理装饰器有：
-
@State：组件内部的状态，当状态变化时，会触发UI更新。 -
@Prop：从父组件传递到子组件的状态，子组件不会修改该状态，但可以接收父组件更新的状态。 -
@Link：与父组件建立双向绑定，子组件可以修改该状态，并且修改会同步到父组件。 -
@Provide和@Consume：跨组件层级的状态传递，相当于一种“广播”机制。
示例：
arkts
@Component
struct ParentComponent {
@State message: string = 'Hello'
build() {
Column() {
Text(this.message)
.onClick(() => {
this.message = 'Hello, ArkTS!'
})
ChildComponent({ message: this.message })
}
}
}
@Component
struct ChildComponent {
@Prop message: string
build() {
Text(this.message)
}
}
5. 组件和装饰器
除了状态管理装饰器，ArkTS还提供了其他重要的装饰器：
-
@Component：表示一个自定义组件。 -
@Entry：表示该组件是页面的入口组件。 -
@Builder：定义一个可复用的UI片段，可以在多个地方使用。 -
@Extend：用于扩展组件的样式，可以定义一组样式属性，然后应用到多个组件。
示例：使用@Builder
arkts
@Component
struct MyComponent {
@Builder myBuilder() {
Text('Builder example')
.fontSize(20)
}
build() {
Column() {
this.myBuilder()
}
}
}
6. 渲染控制
ArkTS提供了条件渲染和循环渲染的语法：
-
条件渲染：使用
if/else语句。 -
循环渲染：使用
forEach方法。
示例：
arkts
@Component
struct MyComponent {
@State isShow: boolean = true
@State list: string[] = ['A', 'B', 'C']
build() {
Column() {
if (this.isShow) {
Text('Show me')
} else {
Text('Hide me')
}
ForEach(this.list, (item: string) => {
Text(item)
})
}
}
}
7. 生命周期
自定义组件有生命周期回调函数：
-
aboutToAppear：在组件创建之前调用。 -
aboutToDisappear：在组件销毁之前调用。
示例：
arkts
@Component
struct MyComponent {
aboutToAppear() {
console.log('Component is about to appear')
}
aboutToDisappear() {
console.log('Component is about to disappear')
}
build() {
// ...
}
}
学习建议
-
实践：多写代码，从简单的组件开始，逐步构建复杂的界面。
-
理解声明式UI：这是ArkTS的核心，理解数据驱动UI更新的思想。
-
掌握状态管理：理解不同状态装饰器的使用场景和区别。
-
参考官方文档和示例：OpenHarmony官方提供了丰富的文档和示例代码，是学习的最佳资源。
以上是ArkTS语言的基础内容，希望对你有所帮助！
好的，我们来系统性地学习ArkTS语言基础。作为OpenHarmony应用开发的首选语言，掌握ArkTS至关重要。
ArkTS 概述
ArkTS是OpenHarmony推荐的应用程序开发语言。它在TypeScript（简称TS） 的基础上，扩展了声明式UI、状态管理等功能。简单理解：
JavaScript（JS） → TypeScript（TS） → ArkTS
这是一个逐步增强的关系：
-
JS：动态弱类型语言，灵活但容易在运行时出错。
-
TS：JS的超集，添加了静态类型系统，能在开发阶段就发现类型错误。
-
ArkTS：TS的超集，在TS基础上，为OpenHarmony的声明式UI开发范式提供了专门的语法支持。
核心特性与基础语法
1. 基础类型系统
ArkTS是静态类型语言，这意味着变量、函数参数和返回值等的类型在编译时就是确定的。
typescript
// 变量类型注解
let name: string = "OpenHarmony"; // 字符串
let age: number = 3; // 数字
let isFinished: boolean = false; // 布尔值
let data: any = "可以是任意类型"; // 任意类型（应谨慎使用）
// 数组
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3]; // 泛型语法
// 元组 - 固定数量和类型的数组
let tuple: [string, number] = ["hello", 10];
// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 空值
let unusable: void = undefined;
let nullValue: null = null;
2. 函数定义
typescript
// 1. 基本函数
function greet(name: string): string {
return `Hello, ${name}`;
}
// 2. 箭头函数（Lambda表达式）
const add = (a: number, b: number): number => {
return a + b;
};
// 3. 可选参数和默认参数
function buildName(firstName: string, lastName?: string, title: string = "Mr."): string {
return `${title} ${firstName} ${lastName || ''}`.trim();
}
// 4. 接口定义函数类型
interface MathFunc {
(x: number, y: number): number;
}
const multiply: MathFunc = (a, b) => a * b;
3. 类与面向对象
typescript
// 基础类定义
class Person {
// 属性
name: string;
private age: number; // 私有属性，只能在类内部访问
protected id: string; // 受保护属性，类和子类可访问
// 构造函数
constructor(name: string, age: number) {
this.name = name;
this.age = age;
this.id = Math.random().toString();
}
// 方法
public introduce(): string {
return `我叫${this.name}，今年${this.age}岁`;
}
// 获取私有属性
getAge(): number {
return this.age;
}
}
// 继承
class Student extends Person {
grade: string;
constructor(name: string, age: number, grade: string) {
super(name, age); // 调用父类构造函数
this.grade = grade;
}
// 重写方法
introduce(): string {
return `${super.introduce()}，我在${this.grade}年级`;
}
}
// 使用
let student = new Student("小明", 12, "六");
console.log(student.introduce());
4. 接口与类型别名
typescript
// 接口 - 定义对象形状
interface User {
readonly id: number; // 只读属性
name: string;
age?: number; // 可选属性
[propName: string]: any; // 任意额外属性
}
// 实现接口
let user: User = {
id: 1,
name: "Alice",
gender: "female" // 额外的属性
};
// 类型别名
type Point = {
x: number;
y: number;
};
type StringOrNumber = string | number; // 联合类型
ArkTS 特有扩展（重点）
这些是ArkTS在TypeScript基础上，为OpenHarmony声明式UI开发专门扩展的特性。
1. 装饰器
装饰器是ArkTS中最重要的概念之一，用于装饰类、属性、方法等，为其添加特殊功能。
typescript
@Component
struct MyComponent {
@State message: string = "Hello ArkTS"; // @State 装饰器使数据变为响应式
build() {
Column() {
Text(this.message)
.onClick(() => {
this.message = "Clicked!"; // 修改@State变量会自动触发UI更新
})
}
}
}
2. 主要状态管理装饰器
在声明式UI中，数据的变化会自动驱动UI更新。不同的装饰器决定了数据的作用范围和更新方式。
typescript
@Component
struct ParentComponent {
@State parentValue: number = 0; // 组件内部私有状态
@Prop childValue: number = 0; // 从父组件单向传递
@Link linkedValue: number; // 与父组件双向绑定
build() {
Column() {
Text(`父组件值: ${this.parentValue}`)
Button('增加父组件值')
.onClick(() => { this.parentValue++ })
// 向子组件传递数据
ChildComponent({
childValue: this.parentValue,
linkedValue: $parentValue // $表示双向绑定引用
})
}
}
}
@Component
struct ChildComponent {
@Prop childValue: number; // 从父组件接收，子组件不能修改
@Link linkedValue: number; // 与父组件双向绑定，子组件可以修改
build() {
Column() {
Text(`接收的Prop: ${this.childValue}`) // 只读
Text(`链接的值: ${this.linkedValue}`) // 可修改
Button('修改链接的值')
.onClick(() => {
this.linkedValue++; // 修改会同步到父组件
})
}
}
}
3. 组件定义与构建
typescript
// 使用 @Component 装饰器定义自定义组件
@Component
struct MyCard {
// 组件参数 - 使用 @Prop 接收外部传入的数据
@Prop title: string = "默认标题";
@Prop content: string;
// 私有状态 - 使用 @State 管理组件内部状态
@State isExpanded: boolean = false;
// @Builder 用于构建可复用的UI片段
@Builder ContentBuilder() {
if (this.isExpanded) {
Text(this.content)
.fontSize(14)
.fontColor(Color.Gray)
}
}
// build() 方法是必须的，用于描述UI结构
build() {
Column() {
// 主标题行
Row() {
Text(this.title)
.fontSize(18)
.fontWeight(FontWeight.Bold)
Blank() // 空白填充，推动按钮到右侧
Button(this.isExpanded ? '收起' : '展开')
.onClick(() => {
this.isExpanded = !this.isExpanded;
})
}
.width('100%')
.padding(10)
// 使用@Builder构建的内容
this.ContentBuilder()
}
.width('100%')
.backgroundColor(Color.White)
.borderRadius(8)
.shadow({ radius: 4, color: '#1A000000' })
.margin(10)
.padding(10)
}
}
// 使用自定义组件
@Entry
@Component
struct Index {
build() {
Column() {
MyCard({ title: "第一张卡片", content: "这是第一张卡片的内容..." })
MyCard({ title: "第二张卡片", content: "这是第二张卡片的内容..." })
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
}
}
4. 条件渲染与循环渲染
typescript
@Component
struct ListComponent {
@State list: string[] = ['项目A', '项目B', '项目C'];
@State showList: boolean = true;
build() {
Column() {
// 条件渲染 - if/else
if (this.showList) {
Text('列表内容:')
.fontSize(16)
// 循环渲染 - ForEach
ForEach(this.list, (item: string, index?: number) => {
ListItem({ content: item, index: index })
}, (item: string) => item)
} else {
Text('列表已被隐藏')
.fontSize(16)
.fontColor(Color.Red)
}
Button(this.showList ? '隐藏列表' : '显示列表')
.onClick(() => {
this.showList = !this.showList;
})
}
}
}
// 列表项组件
@Component
struct ListItem {
@Prop content: string;
@Prop index: number;
build() {
Row() {
Text(`${this.index + 1}. ${this.content}`)
.fontSize(14)
.padding(5)
}
.width('100%')
.backgroundColor(this.index % 2 === 0 ? '#F8F9FA' : '#FFFFFF')
}
}
学习路径建议
-
第一阶段：掌握TS基础
-
类型系统（变量、函数、接口、泛型）
-
类与面向对象
-
模块化
-
-
第二阶段：理解ArkTS扩展
-
装饰器概念
-
各种状态管理装饰器（@State, @Prop, @Link等）
-
组件定义与构建
-
-
第三阶段：实践练习
-
在DevEco Studio中创建项目
-
编写简单的自定义组件
-
实现数据绑定和事件处理
-
-
第四阶段：深入进阶
-
@Provide/@Consume 跨组件层级状态管理
-
@Watch 监听状态变化
-
生命周期管理
-
关键要点：
-
数据驱动UI：理解"当数据改变时，UI自动更新"的思想
-
单向数据流：数据通常从父组件流向子组件
-
状态提升：将共享状态提升到共同的父组件中管理
ArkTS的学习曲线前期可能较陡，但一旦掌握了声明式编程的思想，开发效率会大大提高。建议多动手实践，从简单组件开始逐步构建复杂应用。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
12
0- 0
已为社区贡献5条内容
所有评论(0)