1# \@Require Decorator: Validating Constructor Input Parameters 2 3 4\@Require is a decorator for declaring that parameters – regular variables (those not decorated by any decorator) or variables decorated by \@Prop, \@State, \@Provide, or \@BuilderParam – must be passed in to the constructor. 5 6 7> **NOTE** 8> 9> Validation for \@Prop and \@BuilderParam decorated variables is supported since API version 11. 10> 11> Validation for regular variables and \@State or \@Provide decorated variables is supported since API version 12. 12> This decorator can be used in atomic services since API version 11. 13 14 15## Overview 16 17When \@Require is used together with a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam in a custom component, the variable must be passed from the parent component during construction of the custom component. 18 19## Constraints 20 21The \@Require decorator can only decorate a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam in a struct. 22 23For details about usage in DevEco Studio Previewer, see [PreviewChecker Rules](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-previewer-previewchecker-0000001910869788-V5). 24 25## Use Scenarios 26 27When the \@Require decorator is used together with a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam in the **Child** component, the parent component **Index** must pass in the variable for constructing the **Child** component. Otherwise, the compilation fails. 28 29```ts 30@Entry 31@Component 32struct Index { 33 @State message: string = 'Hello World'; 34 35 @Builder buildTest() { 36 Row() { 37 Text('Hello, world') 38 .fontSize(30) 39 } 40 } 41 42 build() { 43 Row() { 44 Child({ regular_value: this.message, state_value: this.message, provide_value: this.message, initMessage: this.message, message: this.message, 45 buildTest: this.buildTest, initBuildTest: this.buildTest }) 46 } 47 } 48} 49 50@Component 51struct Child { 52 @Builder buildFunction() { 53 Column() { 54 Text('initBuilderParam') 55 .fontSize(30) 56 } 57 } 58 @Require regular_value: string = 'Hello'; 59 @Require @State state_value: string = "Hello"; 60 @Require @Provide provide_value: string = "Hello"; 61 @Require @BuilderParam buildTest: () => void; 62 @Require @BuilderParam initBuildTest: () => void = this.buildFunction; 63 @Require @Prop initMessage: string = 'Hello'; 64 @Require @Prop message: string; 65 66 build() { 67 Column() { 68 Text(this.initMessage) 69 .fontSize(30) 70 Text(this.message) 71 .fontSize(30) 72 this.initBuildTest(); 73 this.buildTest(); 74 } 75 .width('100%') 76 .height('100%') 77 } 78} 79``` 80 81  82 83## Incorrect Usage 84 85```ts 86@Entry 87@Component 88struct Index { 89 @State message: string = 'Hello World'; 90 91 @Builder buildTest() { 92 Row() { 93 Text('Hello, world') 94 .fontSize(30) 95 } 96 } 97 98 build() { 99 Row() { 100 Child() 101 } 102 } 103} 104 105@Component 106struct Child { 107 @Builder buildFunction() { 108 Column() { 109 Text('initBuilderParam') 110 .fontSize(30) 111 } 112 } 113 // As @Require is used here, parameters must be passed in to the constructor. 114 @Require regular_value: string = 'Hello'; 115 @Require @State state_value: string = "Hello"; 116 @Require @Provide provide_value: string = "Hello"; 117 @Require @BuilderParam initBuildTest: () => void = this.buildFunction; 118 @Require @Prop initMessage: string = 'Hello'; 119 120 build() { 121 Column() { 122 Text(this.initMessage) 123 .fontSize(30) 124 this.initBuildTest(); 125 } 126 } 127} 128``` 129 130<!--no_check-->
