Harmonyos App

// ❌ FORBIDDEN: Dynamic typeslet data: any = fetchData();let obj: object = {};obj['dynamicKey'] = value;  // Dynamic property access(someVar as SomeType).method();  // Type assertion
// ✅ REQUIRED: Strict typinginterface UserData {  id: string;  name: string;}let data: UserData = fetchData();
// Use Record for dynamic keyslet obj: Record<string, string> = {};obj['key'] = value;  // OK with Record type

// ❌ FORBIDDEN: Direct mutation@State user: User = { name: 'John', age: 25 };
updateAge() {  this.user.age = 26;  // UI won't update!}
// ✅ REQUIRED: Immutable updateupdateAge() {  this.user = { ...this.user, age: 26 };  // Creates new object, triggers UI update}
// For arrays@State items: string[] = ['a', 'b'];
// ❌ FORBIDDENthis.items.push('c');  // UI won't update
// ✅ REQUIREDthis.items = [...this.items, 'c'];

// ❌ FORBIDDEN: FA Model (deprecated)// config.json with "pages" arrayexport default {  onCreate() { ... }  // PageAbility lifecycle}
// ✅ REQUIRED: Stage Model// module.json5 with abilities configurationimport { UIAbility } from '@kit.AbilityKit';
export default class EntryAbility extends UIAbility {  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {    // Modern Stage model lifecycle  }
  onWindowStageCreate(windowStage: window.WindowStage): void {    windowStage.loadContent('pages/Index');  }}

// ❌ FORBIDDEN: Monolithic build method@Entry@Componentstruct MainPage {  build() {    Column() {      // 200+ lines of inline UI...      Row() {        Image($r('app.media.avatar'))        Column() {          Text(this.user.name)          Text(this.user.email)        }      }      // More inline UI...    }  }}
// ✅ REQUIRED: Extract components@Componentstruct UserCard {  @Prop user: User;
  build() {    Row() {      Image($r('app.media.avatar'))      Column() {        Text(this.user.name)        Text(this.user.email)      }    }  }}
@Entry@Componentstruct MainPage {  @State user: User = { name: 'John', email: '[email protected]' };
  build() {    Column() {      UserCard({ user: this.user })    }  }}

import { router } from '@kit.ArkUI';
@Componentexport struct ProductCard {  // Props from parent  @Prop product: Product;  @Prop onAddToCart: (product: Product) => void;
  // Local state  @State isExpanded: boolean = false;
  // Computed values (use getters)  get formattedPrice(): string {    return `¥${this.product.price.toFixed(2)}`;  }
  // Lifecycle  aboutToAppear(): void {    console.info('ProductCard appearing');  }
  aboutToDisappear(): void {    console.info('ProductCard disappearing');  }
  // Event handlers  private handleTap(): void {    router.pushUrl({ url: 'pages/ProductDetail', params: { id: this.product.id } });  }
  private handleAddToCart(): void {    this.onAddToCart(this.product);  }
  // UI builder  build() {    Column() {      Image(this.product.imageUrl)        .width('100%')        .aspectRatio(1)        .objectFit(ImageFit.Cover)
      Text(this.product.name)        .fontSize(16)        .fontWeight(FontWeight.Medium)
      Text(this.formattedPrice)        .fontSize(14)        .fontColor('#FF6B00')
      Button('Add to Cart')        .onClick(() => this.handleAddToCart())    }    .padding(12)    .backgroundColor(Color.White)    .borderRadius(8)    .onClick(() => this.handleTap())  }}

import { BasicDataSource } from '../utils/BasicDataSource';
class ProductDataSource extends BasicDataSource<Product> {  private products: Product[] = [];
  totalCount(): number {    return this.products.length;  }
  getData(index: number): Product {    return this.products[index];  }
  addData(product: Product): void {    this.products.push(product);    this.notifyDataAdd(this.products.length - 1);  }
  updateData(index: number, product: Product): void {    this.products[index] = product;    this.notifyDataChange(index);  }}
@Componentstruct ProductList {  private dataSource: ProductDataSource = new ProductDataSource();
  build() {    List() {      LazyForEach(this.dataSource, (product: Product, index: number) => {        ListItem() {          ProductCard({ product: product })        }      }, (product: Product) => product.id)  // Key generator    }    .lanes(2)  // Grid with 2 columns    .cachedCount(4)  // Cache 4 items for smooth scrolling  }}

@CustomDialogstruct ConfirmDialog {  controller: CustomDialogController;  title: string = 'Confirm';  message: string = '';  onConfirm: () => void = () => {};
  build() {    Column() {      Text(this.title)        .fontSize(20)        .fontWeight(FontWeight.Bold)        .margin({ bottom: 16 })
      Text(this.message)        .fontSize(16)        .margin({ bottom: 24 })
      Row() {        Button('Cancel')          .onClick(() => this.controller.close())          .backgroundColor(Color.Gray)          .margin({ right: 16 })
        Button('Confirm')          .onClick(() => {            this.onConfirm();            this.controller.close();          })      }    }    .padding(24)  }}
// Usage@Entry@Componentstruct MainPage {  dialogController: CustomDialogController = new CustomDialogController({    builder: ConfirmDialog({      title: 'Delete Item',      message: 'Are you sure you want to delete this item?',      onConfirm: () => this.deleteItem()    }),    autoCancel: true  });
  private deleteItem(): void {    // Delete logic  }
  build() {    Button('Delete')      .onClick(() => this.dialogController.open())  }}