deveco-harness 0.1.0

package/skills/arkts-error-fixes/reference/any_type_errors.md

@@ -0,0 +1,433 @@
+# Any Type Errors
+
+## Error: Use explicit types instead of "any", "unknown"
+
+### Error Message
+```
+Use explicit types instead of "any", "unknown" (arkts-no-any-unknown)
+```
+
+### Cause
+ArkTS requires explicit type definitions and does not allow the use of `any` or `unknown` types. This is part of ArkTS's stricter type system designed to improve type safety and reduce runtime errors.
+
+### Solution
+Use explicit type definitions, interfaces, type aliases, union types, or generics instead of `any` or `unknown`.
+
+### Key Points
+- ArkTS does not allow `any` or `unknown` types
+- Use explicit types for all variables and parameters
+- Define interfaces for complex object types
+- Use union types for multiple possible types
+- Use generics for reusable type-safe code
+
+### ❌ Wrong Usage
+```typescript
+// ❌ Wrong: Using any type
+let data: any = { name: 'John', age: 30 };
+
+// ❌ Wrong: Using any in function parameters
+function processData(input: any): void {
+  console.info(input.name);
+}
+
+// ❌ Wrong: Using any in event handlers
+function handleEvent(event: any): void {
+  console.info(event.target);
+}
+
+// ❌ Wrong: Using unknown type
+let value: unknown = 'Hello';
+```
+
+### ✅ Correct Usage
+```typescript
+// ✅ Correct: Using explicit type
+let data: { name: string; age: number } = { name: 'John', age: 30 };
+
+// ✅ Correct: Using interface
+interface UserData {
+  name: string;
+  age: number;
+}
+
+function processData(input: UserData): void {
+  console.info(input.name);
+}
+
+// ✅ Correct: Using explicit event type
+function handleEvent(event: ClickEvent): void {
+  console.info(event.target.toString());
+}
+```
+
+### Interface Definitions
+
+#### Simple Interface
+```typescript
+interface UserData {
+  name: string;
+  age: number;
+  email?: string;
+}
+
+@Component
+struct UserComponent {
+  @State user: UserData = { name: 'John', age: 30 };
+
+  private displayUser(data: UserData): string {
+    return `${data.name}, ${data.age}`;
+  }
+
+  build() {
+    Text(this.displayUser(this.user))
+  }
+}
+```
+
+#### Nested Interface
+```typescript
+interface Address {
+  street: string;
+  city: string;
+  zipCode: string;
+}
+
+interface User {
+  id: number;
+  name: string;
+  address: Address;
+}
+
+@Component
+struct AddressComponent {
+  @State user: User = {
+    id: 1,
+    name: 'John',
+    address: { street: '123 Main St', city: 'New York', zipCode: '10001' }
+  };
+
+  private displayAddress(user: User): string {
+    return `${user.address.street}, ${user.address.city}`;
+  }
+
+  build() {
+    Text(this.displayAddress(this.user))
+  }
+}
+```
+
+### Union Types
+
+#### Simple Union
+```typescript
+type StringOrNumber = string | number;
+
+@Component
+struct UnionExample {
+  @State value: StringOrNumber = 'Hello';
+
+  private displayValue(value: StringOrNumber): string {
+    if (typeof value === 'string') {
+      return value;
+    } else {
+      return value.toString();
+    }
+  }
+
+  build() {
+    Text(this.displayValue(this.value))
+  }
+}
+```
+
+#### Complex Union
+```typescript
+type EventData = ClickEvent | TouchEvent | ScrollEvent;
+
+@Component
+struct EventExample {
+  private handleEvent(event: EventData): void {
+    if (event instanceof ClickEvent) {
+      console.info('Click event');
+    } else if (event instanceof TouchEvent) {
+      console.info('Touch event');
+    } else {
+      console.info('Scroll event');
+    }
+  }
+
+  build() {
+    Column() {
+      Button('Click')
+        .onClick((event: ClickEvent) => this.handleEvent(event))
+    }
+  }
+}
+```
+
+### Generics
+
+#### Simple Generic
+```typescript
+@Component
+struct GenericExample {
+  @State items: number[] = [1, 2, 3, 4, 5];
+
+  private findItem<T>(array: T[], predicate: (item: T) => boolean): T | undefined {
+    for (const item of array) {
+      if (predicate(item)) {
+        return item;
+      }
+    }
+    return undefined;
+  }
+
+  build() {
+    Column() {
+      Button('Find Item')
+        .onClick(() => {
+          const found = this.findItem(this.items, (item) => item > 3);
+          console.info(`Found: ${found}`);
+        })
+    }
+  }
+}
+```
+
+#### Generic Class
+```typescript
+class Storage<T> {
+  private data: T[] = [];
+
+  add(item: T): void {
+    this.data.push(item);
+  }
+
+  get(index: number): T | undefined {
+    return this.data[index];
+  }
+
+  find(predicate: (item: T) => boolean): T | undefined {
+    return this.data.find(predicate);
+  }
+}
+
+@Component
+struct StorageExample {
+  private storage: Storage<number> = new Storage<number>();
+
+  aboutToAppear() {
+    this.storage.add(1);
+    this.storage.add(2);
+    this.storage.add(3);
+  }
+
+  build() {
+    Column() {
+      Button('Get Item')
+        .onClick(() => {
+          const item = this.storage.get(0);
+          console.info(`Item: ${item}`);
+        })
+    }
+  }
+}
+```
+
+### Type Guards
+
+#### Discriminated Union
+```typescript
+interface StringData {
+  type: 'string';
+  value: string;
+}
+
+interface NumberData {
+  type: 'number';
+  value: number;
+}
+
+type Data = StringData | NumberData;
+
+@Component
+struct TypeGuardExample {
+  @State data: Data = { type: 'string', value: 'Hello' };
+
+  private processData(data: Data): string {
+    if (data.type === 'string') {
+      return data.value;
+    } else {
+      return data.value.toString();
+    }
+  }
+
+  build() {
+    Text(this.processData(this.data))
+  }
+}
+```
+
+#### Typeof Guard
+```typescript
+type Value = string | number | boolean;
+
+@Component
+struct TypeofExample {
+  @State value: Value = 'Hello';
+
+  private displayValue(value: Value): string {
+    if (typeof value === 'string') {
+      return `String: ${value}`;
+    } else if (typeof value === 'number') {
+      return `Number: ${value}`;
+    } else {
+      return `Boolean: ${value}`;
+    }
+  }
+
+  build() {
+    Text(this.displayValue(this.value))
+  }
+}
+```
+
+### Object Type
+
+#### Using Object
+```typescript
+@Component
+struct ObjectExample {
+  @State config: Object = { width: 100, height: 200 };
+
+  private applyConfig(config: Object): void {
+    console.info(JSON.stringify(config));
+  }
+
+  private logArgs(...args: Object[]): void {
+    args.forEach(arg => {
+      console.info(JSON.stringify(arg));
+    });
+  }
+
+  build() {
+    Column() {
+      Button('Apply Config')
+        .onClick(() => {
+          this.applyConfig(this.config);
+          this.logArgs('arg1', 42, { key: 'value' });
+        })
+    }
+  }
+}
+```
+
+### Type Aliases
+
+#### Simple Alias
+```typescript
+type UserId = number;
+type UserName = string;
+type UserEmail = string;
+
+interface User {
+  id: UserId;
+  name: UserName;
+  email: UserEmail;
+}
+
+@Component
+struct AliasExample {
+  @State user: User = { id: 1, name: 'John', email: 'john@example.com' };
+
+  build() {
+    Text(`${this.user.name} (${this.user.id})`)
+  }
+}
+```
+
+#### Function Alias
+```typescript
+type EventHandler = (event: ClickEvent) => void;
+type ValueHandler = (value: string) => void;
+
+@Component
+struct FunctionAliasExample {
+  private onClick: EventHandler = (event: ClickEvent): void => {
+    console.info('Clicked');
+  };
+
+  private onInput: ValueHandler = (value: string): void => {
+    console.info(`Input: ${value}`);
+  };
+
+  build() {
+    Column() {
+      Button('Click')
+        .onClick(this.onClick)
+    }
+  }
+}
+```
+
+### Common Patterns
+
+#### Event Handlers
+```typescript
+type ClickHandler = (event: ClickEvent) => void;
+type TouchHandler = (event: TouchEvent) => void;
+type ScrollHandler = (event: ScrollEvent) => void;
+
+@Component
+struct EventHandlers {
+  private onClick: ClickHandler = (event: ClickEvent): void => {
+    console.info('Clicked');
+  };
+
+  private onTouch: TouchHandler = (event: TouchEvent): void => {
+    console.info('Touched');
+  };
+
+  build() {
+    Column() {
+      Button('Click')
+        .onClick(this.onClick)
+    }
+    .onTouch(this.onTouch)
+  }
+}
+```
+
+#### Data Processing
+```typescript
+interface DataProcessor<T, R> {
+  process(data: T): R;
+}
+
+class StringProcessor implements DataProcessor<string, number> {
+  process(data: string): number {
+    return data.length;
+  }
+}
+
+@Component
+struct ProcessorExample {
+  private processor: DataProcessor<string, number> = new StringProcessor();
+
+  build() {
+    Text(`Length: ${this.processor.process('Hello')}`)
+  }
+}
+```
+
+### Best Practices
+1. **Use explicit types**: Always define types explicitly
+2. **Define interfaces**: Use interfaces for complex object types
+3. **Use union types**: Use union types for multiple possible types
+4. **Use generics**: Use generics for reusable type-safe code
+5. **Use type guards**: Use type guards for runtime type checking
+6. **Avoid any**: Never use `any` or `unknown` types
+
+### Related Files
+- [Code Example](../assets/AnyTypeError.ets)
+- [ArkTS Type System](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-type-system)

package/skills/arkts-error-fixes/reference/appstorage_errors.md

@@ -0,0 +1,95 @@
+# AppStorage Type Errors
+
+## Error: `AppStorage.get()` type parameter issue
+
+### Error Message
+```
+Type inference errors with `AppStorage.get()`
+```
+
+### Cause
+`AppStorage.get()` requires explicit type parameters or should be replaced with `setOrCreate` for proper type inference. ArkTS has strict type checking for generic functions.
+
+### Solution
+Use `AppStorage.setOrCreate()` for initialization or provide explicit type parameters with `@StorageLink`.
+
+### Key Points
+- Use `@StorageLink('key')` decorator for type-safe state binding
+- Initialize with `AppStorage.setOrCreate('key', value)` in `aboutToAppear()`
+- The decorator automatically handles type inference
+- State is synchronized across all components using the same key
+
+### @StorageLink Pattern
+```typescript
+@Entry
+@Component
+struct MyComponent {
+  @StorageLink('myKey') myValue: number = 0;
+
+  aboutToAppear() {
+    AppStorage.setOrCreate('myKey', 0);
+  }
+
+  build() {
+    Text(`Value: ${this.myValue}`)
+  }
+}
+```
+
+### AppStorage Methods
+```typescript
+// Set or create a value
+AppStorage.setOrCreate<T>(key: string, value: T): T
+
+// Get a value (requires type parameter)
+AppStorage.get<T>(key: string): T | undefined
+
+// Set a value
+AppStorage.set<T>(key: string, value: T): void
+
+// Delete a value
+AppStorage.delete(key: string): void
+
+// Check if key exists
+AppStorage.has(key: string): boolean
+```
+
+### State Decorators
+```typescript
+// Two-way binding with AppStorage
+@StorageLink('key') value: Type = defaultValue;
+
+// One-way binding with AppStorage
+@StorageProp('key') value: Type = defaultValue;
+
+// Two-way binding with LocalStorage
+@LocalStorageLink('key') value: Type = defaultValue;
+
+// One-way binding with LocalStorage
+@LocalStorageProp('key') value: Type = defaultValue;
+```
+
+### Best Practices
+1. **Use @StorageLink**: Prefer decorators over direct AppStorage access
+2. **Initialize properly**: Always call `setOrCreate` in `aboutToAppear()`
+3. **Use unique keys**: Ensure keys are unique across the application
+4. **Type safety**: Let the decorator handle type inference
+5. **Clean up**: Delete values when no longer needed
+
+### Common Patterns
+```typescript
+// Counter pattern
+@StorageLink('counter') count: number = 0;
+
+// User data pattern
+@StorageLink('userName') userName: string = '';
+
+// Settings pattern
+@StorageLink('isDarkMode') isDarkMode: boolean = false;
+
+// Object pattern
+@StorageLink('userSettings') settings: UserSettings = defaultSettings;
+```
+
+### Related Files
+- [Code Example](../assets/AppStorageError.ets)

package/skills/arkts-error-fixes/reference/arrow_function_conversion_errors.md

@@ -0,0 +1,163 @@
+# Function.bind 错误
+
+## 错误描述
+
+在 ArkTS 中，`Function.bind()` 方法不被支持。当尝试使用 `Function.bind()` 绑定 `this` 上下文时，会导致编译错误。
+
+## 错误示例
+
+```typescript
+import { mediaquery, UIContext } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct BindError {
+  @State isWideScreen: boolean = false;
+  private mediaListener: mediaquery.MediaQueryListener | null = null;
+
+  aboutToAppear() {
+    const mediaQuery = this.getUIContext().getMediaQuery();
+    this.mediaListener = mediaQuery.matchMediaSync('(min-width: 600vp)');
+    
+    if (this.mediaListener) {
+      this.mediaListener.on('change', this.onMediaQueryChange.bind(this));
+    }
+  }
+
+  private onMediaQueryChange(result: mediaquery.MediaQueryResult): void {
+    this.isWideScreen = result.matches;
+  }
+
+  build() {
+    Column() {
+      Text(`屏幕宽度: ${this.isWideScreen ? '宽屏' : '窄屏'}`)
+    }
+  }
+}
+```
+
+**错误信息：**
+```
+Function.bind is not supported in ArkTS
+```
+
+## 解决方案
+
+### 方案一：使用箭头函数
+
+使用箭头函数替代 `Function.bind()`，箭头函数会自动捕获 `this` 上下文。
+
+```typescript
+@Entry
+@Component
+struct ArrowFunctionSolution {
+  @State isWideScreen: boolean = false;
+  private mediaListener: mediaquery.MediaQueryListener | null = null;
+
+  aboutToAppear() {
+    const mediaQuery = this.getUIContext().getMediaQuery();
+    this.mediaListener = mediaQuery.matchMediaSync('(min-width: 600vp)');
+    
+    if (this.mediaListener) {
+      this.mediaListener.on('change', (result: mediaquery.MediaQueryResult) => {
+        this.isWideScreen = result.matches;
+      });
+    }
+  }
+
+  build() {
+    Column() {
+      Text(`屏幕宽度: ${this.isWideScreen ? '宽屏' : '窄屏'}`)
+    }
+  }
+}
+```
+
+### 方案二：使用内联箭头函数
+
+如果需要调用其他方法，可以在箭头函数内部调用。
+
+```typescript
+@Entry
+@Component
+struct InlineArrowFunctionSolution {
+  @State isWideScreen: boolean = false;
+  private mediaListener: mediaquery.MediaQueryListener | null = null;
+
+  aboutToAppear() {
+    const mediaQuery = this.getUIContext().getMediaQuery();
+    this.mediaListener = mediaQuery.matchMediaSync('(min-width: 600vp)');
+    
+    if (this.mediaListener) {
+      this.mediaListener.on('change', (result: mediaquery.MediaQueryResult) => {
+        this.handleMediaQueryChange(result);
+      });
+    }
+  }
+
+  private handleMediaQueryChange(result: mediaquery.MediaQueryResult): void {
+    this.isWideScreen = result.matches;
+  }
+
+  build() {
+    Column() {
+      Text(`屏幕宽度: ${this.isWideScreen ? '宽屏' : '窄屏'}`)
+    }
+  }
+}
+```
+
+## 简单示例
+
+```typescript
+@Entry
+@Component
+struct ArrowFunctionExample {
+  @State count: number = 0;
+
+  build() {
+    Column() {
+      Text(`计数: ${this.count}`)
+        .fontSize(20)
+        .margin({ bottom: 16 })
+      
+      Button('增加')
+        .onClick(() => {
+          this.count++;
+        })
+    }
+    .padding(16)
+  }
+}
+```
+
+## 详细代码示例
+
+- [ArrowFunctionConversionError.ets](../assets/ArrowFunctionConversionError.ets) - 完整的 Function.bind 错误修复示例，包含媒体查询监听和箭头函数使用
+
+## 最佳实践
+
+1. **使用箭头函数**：在需要保留 `this` 上下文的地方，优先使用箭头函数
+2. **避免 bind**：不要使用 `Function.bind()`，因为它在 ArkTS 中不被支持
+3. **内联处理简单逻辑**：对于简单的逻辑，可以直接在箭头函数中处理
+4. **提取复杂逻辑**：对于复杂的逻辑，可以提取为独立方法，然后在箭头函数中调用
+
+## 常见错误
+
+```typescript
+// ❌ 错误：使用 Function.bind
+this.mediaListener.on('change', this.onMediaQueryChange.bind(this));
+
+// ❌ 错误：使用 Function.bind
+button.onClick(this.handleClick.bind(this));
+
+// ✅ 正确：使用箭头函数
+this.mediaListener.on('change', (result: mediaquery.MediaQueryResult) => {
+  this.isWideScreen = result.matches;
+});
+
+// ✅ 正确：使用箭头函数调用方法
+button.onClick(() => {
+  this.handleClick();
+});
+```