About Syntactic Sugar

Decorators

A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.

In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.

@Component
struct MyComponent {
    @State count: number = 0
}

Multiple decorators can be defined on a single line, as shown below:

@Entry @Component struct MyComponent {
}

However, you are advised to define the decorators on multiple lines, as shown below:

@Entry
@Component
struct MyComponent {
}

Supported Decorators

Chain Call

You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.

Column() {
    Image('1.jpg')
        .alt('error.jpg')
        .width(100)
        .height(100)
}.padding(10)

struct

Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.

@Component
struct MyComponent {
    @State data: string = ''

    build() {
    }
}

Instantiating a struct Without the new Keyword

You can omit the new keyword when instantiating a struct.

// Definition
@Component
struct MyComponent {
    build() {
    }
}

// Usage
Column() {
    MyComponent()
}

// Equivalent to
new Column() {
    new MyComponent()
}

Restrictions on Using TypeScript in Generators

TypeScript has the following restrictions on generators:

• Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.

• No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.

• The generator function cannot contain local variables.

None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)

Incorrect:

build() {
    let a: number = 1 // invalid: variable declaration not allowed
    Column() {
        Text(`Hello ${this.myName.toUpperCase()}`) // ok.
        ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
    }
    buildSpecial()  // invalid: no function calls
    Text(this.calcTextValue()) // this function call is ok.
}

$$

$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.

Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.

// xxx.ets
@Entry
@Component
struct bindPopup {
	@State customPopup: boolean = false
	build() {
		Column() {
			Button(){
				Text('Popup')
			}
			.onClick(()=>{
				this.customPopup = !this.customPopup
			})
			.bindPopup(
				$$this.customPopup, {
					message: "showPopup"
				}
			)
		}
	}
}

Restrictions on Declaring Multiple Data Types of State Variables

If a @State, @Provide, @Link, or @Consume decorated state variable supports multiple data types, they must be all simple data types or references at one time.

Example:

@Entry
@Component
struct Index {
  // Incorrect: @State message: string | Resource = 'Hello World'
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(`${ this.message }`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}