Harmony ArkTs Basics

ArkTS is a programming language designed for building high-performance applications. ArkTS optimizes the TypeScript syntax to provide higher performance and development efficiency.

Overview of Basic Syntax#

Decorators: Used to decorate classes, structures, methods, and variables, giving them special meanings. In the example above, @Entry, @Component, and @State are all decorators. @Component indicates a custom component, @Entry indicates that this custom component is an entry component, and @State indicates a state variable in the component, where changes to the state variable will trigger a UI refresh.
UI Description: Describes the structure of the UI in a declarative manner, such as the code block in the build() method.
Custom Components: Reusable UI units that can combine other components, like the struct Hello decorated with @Component above.
System Components: Basic and container components built into the ArkUI framework by default, which can be directly called by developers, such as Column, Text, Divider, and Button in the example.
Property Methods: Components can configure multiple properties through method chaining, such as fontSize(), width(), height(), backgroundColor(), etc.
Event Methods: Components can set the response logic for multiple events through method chaining, such as onClick() following the Button.
For specific usage of system components, property methods, and event methods, refer to the declarative development paradigm based on ArkTS.

In addition, ArkTS extends various syntax paradigms to make development more convenient:

@Builder/@BuilderParam: Special methods for encapsulating UI descriptions, allowing fine-grained encapsulation and reuse of UI descriptions.
@Extend/@Styles: Extends built-in components and encapsulates property styles, allowing more flexible combinations of built-in components.
stateStyles: Polymorphic styles that can set different styles based on the internal state of the component.

Declarative UI Description#

ArkTS describes the application's UI by combining and extending components in a declarative manner, while also providing basic methods for configuring properties, events, and subcomponents to help developers implement application interaction logic.

Creating Components#

Depending on the component constructor method, creating components can be done with or without parameters.

No Parameters#

If the component's interface definition does not include required constructor parameters, then the "()" after the component does not need to be configured with any content. For example, the Divider component does not include constructor parameters.

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

With Parameters#

If the component's interface definition includes constructor parameters, then the "()" after the component needs to be configured with the corresponding parameters.

// string type parameter
Text("test");
// $r format to introduce application resources, applicable in multilingual scenarios
Text($r("app.string.title_value"));
// No parameter form
Text();

Configuring Properties#

Property methods configure the styles and other attributes of system components using method chaining with “.”, and it is recommended to write each property method on a separate line.

Configure the font size of the Text component.

Text("test").fontSize(12);

Configure multiple properties of the component.

Image("test.jpg").alt("error.jpg").width(100).height(100);

In addition to directly passing constant parameters, variables or expressions can also be passed.

Text("hello").fontSize(this.size);
Image("test.jpg")
  .width(this.count % 2 === 0 ? 100 : 200)
  .height(this.offset + 100);

Configuring Events#

Event methods configure the events supported by system components using method chaining with “.”, and it is recommended to write each event method on a separate line.

Use arrow function expressions to configure the component's event methods, requiring the use of “() => {...}” to ensure the function is bound to the component and complies with ArkTS syntax specifications.

Button("add counter").onClick(() => {
  this.counter += 2;
});

Use the component's member function to configure the component's event methods, requiring bind this. ArkTS syntax does not recommend using member functions with bind this to configure the component's event methods.

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

Using declared arrow functions allows direct calls without needing to bind this.
The this inside arrow functions is lexically scoped, determined by the context. Anonymous functions may have unclear this references, which are not allowed in ArkTS.

Configuring Subcomponents#

If a component supports subcomponent configuration, then UI descriptions for subcomponents should be added in the trailing closure "{...}". Components like Column, Row, Stack, Grid, and List are all container components.

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

This article is updated synchronously by Mix Space to xLog. The original link is http://www.sroxck.top/posts/harmony/arkts-base