ArkTS Overview

ArkTS is a programming language specifically designed for HarmonyOS application development, built upon JavaScript and TypeScript with extensions and optimizations. It prioritizes development efficiency and runtime performance while maintaining strong compatibility with the JavaScript/TypeScript ecosystem, enabling reuse of existing codebases and toolchains. For developers already familiar with JavaScript/TypeScript, ArkTS offers a gentle learning curve, but several key features and examples are worth noting:

1. Enhanced Type Strictness

ArkTS introduces stricter type checking to minimize runtime errors and improve performance. Variables cannot change types after declaration, but Union Types allow multi-type support.

Example 1: Basic Type Declarations and Errors

// Correct: Assigning a number to a number-typed variable
let count: number = 10;
count = 20; // Valid

// Error: Attempting to change the type
count = "hello"; // Compile error: Type 'string' is not assignable to 'number'
count = undefined; // Compile error (unless explicitly allowed)

// Correct: Using Union Types for multi-type support
let flexibleValue: number | string | undefined;
flexibleValue = 42;       // Valid
flexibleValue = "text";   // Valid
flexibleValue = undefined; // Valid

Example 2: Type Constraints in Functions

// Strict parameter and return type definitions
function add(a: number, b: number): number {
    return a + b;
}
add(1, 2); // Valid
add("1", 2); // Compile error: Argument of type 'string' is not assignable to 'number'

// Union Types in functions
function printId(id: number | string) {
    console.log("ID:", id);
}
printId(100);      // Valid
printId("UID123"); // Valid

2. ArkUI Framework Integration

ArkTS deeply integrates with ArkUI, supporting declarative UI development through component composition and state management.

Example 3: Basic Page and Component

// Define a custom component
@Component
struct Greeting {
    @State message: string = "Hello, ArkTS!";

    build() {
        Column() {
            Text(this.message)
                .fontSize(24)
                .fontWeight(FontWeight.Bold)
            Button("Change Text")
                .onClick(() => {
                    this.message = "Welcome to HarmonyOS!";
                })
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
    }
}

// Mark the entry component
@Entry
@Component
struct MainPage {
    build() {
        Greeting() // Use the custom component
    }
}

Example 4: Conditional and List Rendering

@Component
struct UserList {
    @State users: Array<string> = ["Alice", "Bob", "Charlie"];
    @State showList: boolean = true;

    build() {
        Column() {
            Button("Toggle List")
                .onClick(() => {
                    this.showList = !this.showList;
                })

            // Conditional rendering
            if (this.showList) {
                // List rendering
                ForEach(this.users, (user) => {
                    Text(user).fontSize(18).margin(5)
                }, (item) => item) // Specify unique key
            }
        }
    }
}

Example 5: Responsive Layout and Styling

@Component
struct ResponsiveCard {
    build() {
        // Dynamically adjust layout based on screen width
        Row() {
            Image($rawfile("icon.png"))
                .width(50)
                .height(50)
            Column() {
                Text("Title").fontSize(20)
                Text("Subtitle").fontSize(14).opacity(0.7)
            }
            .margin({ left: 10 })
        }
        .width('90%')
        .padding(15)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .shadow({ radius: 2, color: Color.Gray })
    }
}

3. State Management and Data Binding

ArkTS uses decorators like @State and @Prop for reactive data binding and component communication.

Example 6: State-Driven UI Updates

@Component
struct Counter {
    @State count: number = 0;

    build() {
        Column() {
            Text(`Count: ${this.count}`).fontSize(24)
            Button("Increment")
                .onClick(() => {
                    this.count++; // Automatically triggers UI update
                })
        }
    }
}

Example 7: Parent-Child Communication (Props)

// Parent component
@Component
struct Parent {
    @State parentMessage: string = "Data from Parent";

    build() {
        Column() {
            ChildComponent({ message: this.parentMessage })
            Button("Update Child")
                .onClick(() => {
                    this.parentMessage = "Updated Message";
                })
        }
    }
}

// Child component
@Component
struct ChildComponent {
    @Prop message: string;

    build() {
        Text(this.message).fontSize(18)
    }
}

SoulHarbor @isoneheart