Harmony学习之ArkTS语言基础
Harmony学习之ArkTS语言基础
一、场景引入
小明在上一篇文章中成功搭建了开发环境并创建了第一个HarmonyOS应用，现在他想要修改页面显示的文字内容，却发现对代码中的@State、@Component等语法不太理解。这些装饰器有什么作用？变量声明为什么使用let而不是var？本篇文章将系统讲解ArkTS语言的基础语法，帮助小明掌握HarmonyOS开发的核心语言特性。
二、ArkTS语言概述
ArkTS是HarmonyOS应用开发的核心语言，它基于TypeScript进行扩展，专为移动设备设计，具有以下核心特点：
- 声明式UI：通过组件化描述界面，自动响应数据变化
- 强类型系统：支持静态类型检查，编译时捕获错误
- 状态管理：使用
@State、@Prop、@Link等装饰器管理组件状态 - 高性能：编译为ArkBytecode，运行效率接近原生应用
三、变量与常量声明
1. 变量声明
在ArkTS中，使用let关键字声明变量，变量在程序执行期间可以具有不同的值：
// 变量声明（显式指定类型）
let name: string = 'ArkTS';
name = 'Hello ArkTS'; // 可以重新赋值
// 自动类型推断
let age = 25; // 自动推断为number类型
let isActive = true; // 自动推断为boolean类型
2. 常量声明
使用const关键字声明常量，常量只能被赋值一次，重新赋值会导致编译错误：
// 常量声明
const PI: number = 3.14;
const APP_NAME = 'MyApp'; // 自动类型推断
// PI = 3.14159; // 编译错误：Cannot assign to 'PI' because it is a constant
四、基本数据类型
1. Number类型
ArkTS提供number类型，支持整数和浮点数：
let decimal: number = 6;
let hex: number = 0xf00d; // 十六进制
let binary: number = 0b1010; // 二进制
let octal: number = 0o744; // 八进制
let float: number = 3.14;
let big: number = 1e10; // 科学计数法
2. Boolean类型
boolean类型只有两个值：true和false：
let isDone: boolean = false;
let isActive = true; // 自动推断
3. String类型
字符串可以使用单引号、双引号或模板字符串：
let name: string = 'ArkTS';
let message = "Hello, ArkTS!"; // 自动推断
let greeting = `Hello, ${name}!`; // 模板字符串
4. Array类型
数组用于存储多个相同类型的数据：
// 数组声明
let list: number[] = [1, 2, 3];
let names: string[] = ['Alice', 'Bob', 'Carol'];
// 使用Array泛型
let numbers: Array<number> = [1, 2, 3];
5. Tuple类型
元组用于表示固定数量和类型的数组：
let tuple: [string, number] = ['hello', 10];
// tuple[0] = 'world'; // 正确
// tuple[1] = 'error'; // 错误：Type 'string' is not assignable to type 'number'
五、函数定义
1. 普通函数
// 函数声明
function greet(name: string): string {
return `Hello, ${name}!`;
}
// 调用函数
let message = greet('ArkTS');
console.log(message); // 输出：Hello, ArkTS!
2. 箭头函数
箭头函数语法更简洁：
// 箭头函数
const add = (a: number, b: number): number => a + b;
// 等价于
function add(a: number, b: number): number {
return a + b;
}
3. 可选参数和默认参数
// 可选参数
function sayHello(name: string, age?: number): void {
if (age) {
console.log(`Hello ${name}, you are ${age} years old.`);
} else {
console.log(`Hello ${name}!`);
}
}
// 默认参数
function createUser(name: string, age: number = 18): void {
console.log(`User: ${name}, Age: ${age}`);
}
六、类与接口
1. 类定义
class Person {
// 属性
name: string;
age: number;
// 构造函数
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 方法
greet(): string {
return `Hello, my name is ${this.name}`;
}
}
// 创建对象
let person = new Person('Alice', 25);
console.log(person.greet());
2. 接口定义
interface User {
name: string;
age: number;
email?: string; // 可选属性
}
function printUser(user: User): void {
console.log(`Name: ${user.name}, Age: ${user.age}`);
}
let user: User = { name: 'Bob', age: 30 };
printUser(user);
七、状态管理装饰器
1. @State装饰器
@State用于声明组件内部的状态变量，状态变化时触发UI重新渲染：
@Component
struct Counter {
@State count: number = 0; // 状态变量
build() {
Column() {
Text(`Count: ${this.count}`)
.fontSize(30)
Button('Increment')
.onClick(() => {
this.count++; // 修改状态，UI自动更新
})
}
}
}
2. @Prop装饰器
@Prop用于接收父组件传递的属性，单向数据流动：
// 子组件
@Component
struct ChildComponent {
@Prop message: string; // 接收父组件传递的属性
build() {
Text(this.message)
.fontSize(20)
}
}
// 父组件
@Component
struct ParentComponent {
@State parentMessage: string = 'Hello from parent';
build() {
Column() {
ChildComponent({ message: this.parentMessage })
}
}
}
3. @Link装饰器
@Link用于父子组件间的双向数据同步：
// 子组件
@Component
struct ChildComponent {
@Link value: number; // 双向绑定
build() {
Button(`Value: ${this.value}`)
.onClick(() => {
this.value++; // 修改会同步到父组件
})
}
}
// 父组件
@Component
struct ParentComponent {
@State count: number = 0;
build() {
Column() {
Text(`Parent count: ${this.count}`)
ChildComponent({ value: $count }) // 使用$符号传递
}
}
}
八、控制流语句
1. 条件语句
let x: number = 10;
// if-else语句
if (x > 0) {
console.log('x is positive');
} else if (x < 0) {
console.log('x is negative');
} else {
console.log('x is zero');
}
// 三元运算符
let result = x > 0 ? 'positive' : 'negative or zero';
2. 循环语句
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// for-of循环（遍历数组）
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
console.log(num);
}
// while循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
九、运算符
1. 算术运算符
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
2. 比较运算符
let x = 10;
let y = '10';
console.log(x == y); // true（值相等）
console.log(x === y); // false（值和类型都相等）
console.log(x != y); // false
console.log(x !== y); // true
console.log(x > 5); // true
3. 逻辑运算符
let isTrue = true;
let isFalse = false;
console.log(isTrue && isFalse); // false
console.log(isTrue || isFalse); // true
console.log(!isTrue); // false
十、实战案例：计数器应用
下面是一个完整的计数器应用，综合运用了本篇文章讲解的知识点：
@Entry
@Component
struct CounterApp {
@State count: number = 0; // 状态变量
build() {
Column() {
// 显示计数
Text(`当前计数: ${this.count}`)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
// 增加按钮
Button('增加')
.onClick(() => {
this.count++;
})
.margin({ bottom: 10 })
// 减少按钮
Button('减少')
.onClick(() => {
this.count--;
})
.backgroundColor(Color.Red)
.margin({ bottom: 10 })
// 重置按钮
Button('重置')
.onClick(() => {
this.count = 0;
})
.backgroundColor(Color.Gray)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
代码说明：
- 使用
@Entry和@Component装饰器定义入口组件 - 使用
@State装饰器管理计数状态 - 使用
Text组件显示计数，Button组件实现交互 - 通过
onClick事件处理函数修改状态 - 状态变化时，UI自动重新渲染
十一、总结与行动建议
核心要点回顾
- 变量与常量：使用
let声明变量，const声明常量，支持自动类型推断 - 数据类型：掌握
number、boolean、string、array等基本类型 - 函数定义：普通函数和箭头函数，支持可选参数和默认参数
- 类与接口：面向对象编程的基础，支持继承和实现
- 状态管理：
@State、@Prop、@Link装饰器是响应式UI的核心 - 控制流：
if-else、for、while等控制语句 - 运算符：算术、比较、逻辑运算符的使用
行动建议
- 动手实践：在DevEco Studio中创建新项目，尝试修改计数器应用的样式和功能
- 类型练习：声明不同类型的变量，理解类型推断机制
- 装饰器实践：创建父子组件，练习
@Prop和@Link的使用 - 查阅文档：遇到问题时，访问华为开发者联盟官网查阅ArkTS官方文档
- 代码调试：使用DevEco Studio的调试功能，观察状态变化时的UI更新过程
通过本篇文章的学习，你已经掌握了ArkTS语言的基础语法和核心概念。下一篇文章将深入讲解声明式UI开发，帮助你构建更复杂的用户界面。
浙公网安备 33010602011771号