1# About Syntactic Sugar 2 3## Decorators 4 5 6A 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. 7 8 9In 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. 10 11 12```ts 13@Component 14struct MyComponent { 15 @State count: number = 0 16} 17``` 18 19 20Multiple decorators can be defined on a single line, as shown below: 21 22 23```ts 24@Entry @Component struct MyComponent { 25} 26``` 27 28 29However, you are advised to define the decorators on multiple lines, as shown below: 30 31 32```ts 33@Entry 34@Component 35struct MyComponent { 36} 37``` 38 39 40### Supported Decorators 41 42| Decorator | Decorates... | Description | 43| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 44| @Component | struct | The decorated structure has the component-based capability. The **build** method must be implemented to update the UI.| 45| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. | 46| @Preview | struct | Custom components decorated by **@Preview** can be previewed in DevEco Studio. When the target page is loaded, the custom components decorated by **@Preview** are created and displayed.| 47| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component.| 48| @Extend | Methods | This decorator adds attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component.| 49| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. | 50| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the **build** method of the component will be called to update the UI. | 51| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated.| 52| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.| 53| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. | 54| @ObjectLink | Objects of **@Observed** decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.| 55| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.| 56| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page rendering.| 57| @Watch | Variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, or **@StorageLink** | This decorator is used to listen for the changes of the state variables. The application can register a callback method through **@Watch**. | 58 59 60## Chain Call 61 62You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call. 63 64```ts 65Column() { 66 Image('1.jpg') 67 .alt('error.jpg') 68 .width(100) 69 .height(100) 70}.padding(10) 71``` 72 73 74## struct 75 76Components can be implemented based on **struct**s. Components cannot inherit from each other. The **struct**s implemented components can be created and destroyed more quickly than **class** implemented components. 77 78```ts 79@Component 80struct MyComponent { 81 @State data: string = '' 82 83 build() { 84 } 85} 86``` 87 88 89## Instantiating a struct Without the new Keyword 90 91You can omit the **new** keyword when instantiating a **struct**. 92 93```ts 94// Definition 95@Component 96struct MyComponent { 97 build() { 98 } 99} 100 101// Usage 102Column() { 103 MyComponent() 104} 105 106// Equivalent to 107new Column() { 108 new MyComponent() 109} 110``` 111 112 113## Restrictions on Using TypeScript in Generators 114 115TypeScript has the following restrictions on generators: 116 117- Expressions can be used only in character strings (${expression}), **if** conditions, **ForEach** parameters, and component parameters. 118 119- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur. 120 121- The generator function cannot contain local variables. 122 123None of the above restrictions apply to anonymous function implementations of event-handling functions (such as **onClick**) 124 125Incorrect: 126 127```ts 128build() { 129 let a: number = 1 // invalid: variable declaration not allowed 130 Column() { 131 Text(`Hello ${this.myName.toUpperCase()}`) // ok. 132 ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place 133 } 134 buildSpecial() // invalid: no function calls 135 Text(this.calcTextValue()) // this function call is ok. 136} 137``` 138 139## $$ 140 141**$$** supports two-way binding for simple variables and **@State**, **@Link**, and **@Prop** decorated variables. 142 143Currently, **$$** supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the **@State** decorated variable, and the **checked** attribute of the **\<Radio>** component. 144 145 146```ts 147// xxx.ets 148@Entry 149@Component 150struct bindPopup { 151 @State customPopup: boolean = false 152 build() { 153 Column() { 154 Button(){ 155 Text('Popup') 156 } 157 .onClick(()=>{ 158 this.customPopup = !this.customPopup 159 }) 160 .bindPopup( 161 $$this.customPopup, { 162 message: "showPopup" 163 } 164 ) 165 } 166 } 167} 168``` 169 170## Restrictions on Declaring Multiple Data Types of State Variables 171 172If 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. 173 174Example: 175 176```ts 177@Entry 178@Component 179struct Index { 180 // Incorrect: @State message: string | Resource = 'Hello World' 181 @State message: string = 'Hello World' 182 183 build() { 184 Row() { 185 Column() { 186 Text(`${ this.message }`) 187 .fontSize(50) 188 .fontWeight(FontWeight.Bold) 189 } 190 .width('100%') 191 } 192 .height('100%') 193 } 194} 195``` 196
