arkui-ts

Signed-off-by: Nliuliu <liuliu40@huawei.com>
Change-Id: I1d0fcc2a1771fd115bf22064b1204cd709b0b0e6

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

@@ -86,11 +86,37 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
 
   加载沙箱路径下的本地资源文件
 
-  1.通过[globalthis](../../application-models/uiability-data-sync-with-ui.md#uiability和page之间使用globalthis)获取沙箱路径。
+  1.通过构造的单例对象GlobalContext获取沙箱路径。
+  ```ts
+  // GlobalContext.ts
+  export class GlobalContext {
+    private constructor() {}
+    private static instance: GlobalContext;
+    private _objects = new Map<string, Object>();
+
+    public static getContext(): GlobalContext {
+      if (!GlobalContext.instance) {
+        GlobalContext.instance = new GlobalContext();
+      }
+      return GlobalContext.instance;
+    }
+
+    getObject(value: string): Object | undefined {
+      return this._objects.get(value);
+    }
+
+    setObject(key: string, objectClass: Object): void {
+      this._objects.set(key, objectClass);
+    }
+  }
+  ```
+
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview'
-  let url = 'file://' + globalThis.filesDir + '/index.html'
+  import { GlobalContext } from '../GlobalContext'
+
+  let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'
 
   @Entry
   @Component
@@ -110,13 +136,16 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
   ```ts
   // xxx.ts
   import UIAbility from '@ohos.app.ability.UIAbility';
+  import AbilityConstant from '@ohos.app.ability.AbilityConstant';
+  import Want from '@ohos.app.ability.Want';
   import web_webview from '@ohos.web.webview';
+  import { GlobalContext } from '../GlobalContext'
 
   export default class EntryAbility extends UIAbility {
-      onCreate(want, launchParam) {
-          // 通过在globalThis对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
-          globalThis.filesDir = this.context.filesDir
-          console.log("Sandbox path is " + globalThis.filesDir)
+      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
+          // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
+          GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
+          console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
       }
   }
   ```
@@ -250,21 +279,27 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
   // xxx.ets
   import web_webview from '@ohos.web.webview'
 
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: web_webview.WebviewController = new web_webview.WebviewController()
-    testObj = {
-      test: (data1, data2, data3) => {
+  class TestObj {
+    constructor() {
+    }
+
+    test(data1: string, data2: string, data3: string): string {
       console.log("data1:" + data1)
       console.log("data2:" + data2)
       console.log("data3:" + data3)
       return "AceString"
-      },
-      toString: () => {
+    }
+
+    toString(): void {
       console.log('toString' + "interface instead.")
     }
   }
+
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: web_webview.WebviewController = new web_webview.WebviewController()
+    testObj = new TestObj();
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -1332,8 +1367,8 @@ allowWindowOpenMethod(flag: boolean)
   //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
   @CustomDialog
   struct NewWebViewComp {
-  controller: CustomDialogController
-  webviewController1: web_webview.WebviewController
+  controller?: CustomDialogController
+  webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
   build() {
       Column() {
         Web({ src: "", controller: this.webviewController1 })
@@ -1341,7 +1376,9 @@ allowWindowOpenMethod(flag: boolean)
           .multiWindowAccess(false)
           .onWindowExit(()=> {
             console.info("NewWebViewComp onWindowExit")
+            if (this.controller) {
               this.controller.close()
+            }
           })
         }
     }
@@ -1351,7 +1388,7 @@ allowWindowOpenMethod(flag: boolean)
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController()
-    dialogController: CustomDialogController = null
+    dialogController: CustomDialogController | null = null
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -1454,6 +1491,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
       Column() {
         Web({ src: $rawfile("index.html"), controller: this.controller })
           .onAlert((event) => {
+            if (event) {
               console.log("event.url:" + event.url)
               console.log("event.message:" + event.message)
               AlertDialog.show({
@@ -1475,6 +1513,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
                   event.result.handleCancel()
                 }
               })
+            }
             return true
           })
       }
@@ -1537,6 +1576,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
       Column() {
         Web({ src: $rawfile("index.html"), controller: this.controller })
           .onBeforeUnload((event) => {
+            if (event) {
               console.log("event.url:" + event.url)
               console.log("event.message:" + event.message)
               AlertDialog.show({
@@ -1558,6 +1598,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
                   event.result.handleCancel()
                 }
               })
+            }
             return true
           })
       }
@@ -1620,6 +1661,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
       Column() {
         Web({ src: $rawfile("index.html"), controller: this.controller })
           .onConfirm((event) => {
+            if (event) {
               console.log("event.url:" + event.url)
               console.log("event.message:" + event.message)
               AlertDialog.show({
@@ -1641,6 +1683,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
                   event.result.handleCancel()
                 }
               })
+            }
             return true
           })
       }
@@ -1710,6 +1753,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
       Column() {
         Web({ src: $rawfile("index.html"), controller: this.controller })
           .onPrompt((event) => {
+            if (event) {
               console.log("url:" + event.url)
               console.log("message:" + event.message)
               console.log("value:" + event.value)
@@ -1732,6 +1776,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
                   event.result.handleCancel()
                 }
               })
+            }
             return true
           })
       }
@@ -1797,10 +1842,12 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onConsole((event) => {
+            if (event) {
               console.log('getMessage:' + event.message.getMessage())
               console.log('getSourceId:' + event.message.getSourceId())
               console.log('getLineNumber:' + event.message.getLineNumber())
               console.log('getMessageLevel:' + event.message.getMessageLevel())
+            }
             return false
           })
       }
@@ -1839,11 +1886,13 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onDownloadStart((event) => {
+            if (event) {
               console.log('url:' + event.url)
               console.log('userAgent:' + event.userAgent)
               console.log('contentDisposition:' + event.contentDisposition)
               console.log('contentLength:' + event.contentLength)
               console.log('mimetype:' + event.mimetype)
+            }
           })
       }
     }
@@ -1878,6 +1927,7 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onErrorReceive((event) => {
+            if (event) {
               console.log('getErrorInfo:' + event.error.getErrorInfo())
               console.log('getErrorCode:' + event.error.getErrorCode())
               console.log('url:' + event.request.getRequestUrl())
@@ -1890,6 +1940,7 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
               for (let i of result) {
                 console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
               }
+            }
           })
       }
     }
@@ -1924,6 +1975,7 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onHttpErrorReceive((event) => {
+            if (event) {
               console.log('url:' + event.request.getRequestUrl())
               console.log('isMainFrame:' + event.request.isMainFrame())
               console.log('isRedirect:' + event.request.isRedirect())
@@ -1943,6 +1995,7 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
               for (let i of resph) {
                 console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
               }
+            }
           })
       }
     }
@@ -1976,7 +2029,9 @@ onPageBegin(callback: (event?: { url: string }) => void)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPageBegin((event) => {
+            if (event) {
               console.log('url:' + event.url)
+            }
           })
       }
     }
@@ -2010,7 +2065,9 @@ onPageEnd(callback: (event?: { url: string }) => void)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPageEnd((event) => {
+            if (event) {
               console.log('url:' + event.url)
+            }
           })
       }
     }
@@ -2044,7 +2101,9 @@ onProgressChange(callback: (event?: { newProgress: number }) => void)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onProgressChange((event) => {
+            if (event) {
               console.log('newProgress:' + event.newProgress)
+            }
           })
       }
     }
@@ -2078,7 +2137,9 @@ onTitleReceive(callback: (event?: { title: string }) => void)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onTitleReceive((event) => {
+            if (event) {
               console.log('title:' + event.title)
+            }
           })
       }
     }
@@ -2113,7 +2174,9 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onRefreshAccessedHistory((event) => {
+            if (event) {
               console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
+            }
           })
       }
     }
@@ -2167,7 +2230,9 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi
       Column() {
         Web({ src: 'chrome://crash/', controller: this.controller })
           .onRenderExited((event) => {
+            if (event) {
               console.log('reason:' + event.renderExitReason)
+            }
           })
       }
     }
@@ -2199,6 +2264,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
   // xxx.ets
   import web_webview from '@ohos.web.webview';
   import picker from '@ohos.file.picker';
+  import { BusinessError } from '@ohos.base';
 
   @Entry
   @Component
@@ -2211,13 +2277,15 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
           .onShowFileSelector((event) => {
             console.log('MyFileUploader onShowFileSelector invoked')
             const documentSelectOptions = new picker.DocumentSelectOptions();
-            let uri = null;
+            let uri: string | null = null;
             const documentViewPicker = new picker.DocumentViewPicker();
             documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
               uri = documentSelectResult[0];
               console.info('documentViewPicker.select to file succeed and uri is:' + uri);
+              if (event) {
                 event.result.handleFileList([uri]);
-            }).catch((err) => {
+              }
+            }).catch((err: BusinessError) => {
               console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
             })
             return true
@@ -2343,7 +2411,9 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onUrlLoadIntercept((event) => {
+            if (event) {
               console.log('onUrlLoadIntercept ' + event.data.toString())
+            }
             return true
           })
       }
@@ -2394,16 +2464,18 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onInterceptRequest((event) => {
+            if (event) {
               console.log('url:' + event.request.getRequestUrl())
-            var head1:Header = {
+            }
+            let head1:Header = {
               headerKey:"Connection",
               headerValue:"keep-alive"
             }
-            var head2:Header = {
+            let head2:Header = {
               headerKey:"Cache-Control",
               headerValue:"no-cache"
             }
-            var length = this.heads.push(head1)
+            let length = this.heads.push(head1)
             length = this.heads.push(head2)
             this.responseweb.setResponseHeader(this.heads)
             this.responseweb.setResponseData(this.webdata)
@@ -2453,6 +2525,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onHttpAuthRequest((event) => {
+            if (event) {
               AlertDialog.show({
                 title: 'onHttpAuthRequest',
                 message: 'text',
@@ -2481,6 +2554,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
                   event.handler.cancel()
                 }
               })
+            }
             return true
           })
       }
@@ -2595,8 +2669,11 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
 
   ```ts
   // xxx.ets API10
+  import common from '@ohos.app.ability.common';
+  import Want from '@ohos.app.ability.Want';
   import web_webview from '@ohos.web.webview'
   import bundle from '@ohos.bundle'
+  import { GlobalContext } from '../GlobalContext'
 
   let uri = "";
 
@@ -2611,15 +2688,15 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
       return CertManagerService.sInstance;
     }
 
-    async grantAppPm(callback) {
+    async grantAppPm(callback: (message: string) => void) {
       let message = '';
       //注：com.example.myapplication需要写实际应用名称
       let bundleInfo = await bundle.getBundleInfo("com.example.myapplication", bundle.BundleFlag.GET_BUNDLE_DEFAULT)
       let clientAppUid = bundleInfo.uid
       let appUid = clientAppUid.toString()
 
-      //注：globalThis.AbilityContext需要在MainAbility.ts文件的onCreate函数里添加globalThis.AbilityContext = this.context
-      await globalThis.AbilityContext.startAbilityForResult(
+      //注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)
+      await GlobalContext.getContext().getObject("AbilityContext").startAbilityForResult(
         {
           bundleName: "com.ohos.certmanager",
           abilityName: "MainAbility",
@@ -2627,10 +2704,12 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
           parameters: {
             appUid: appUid, //传入申请应用的appUid
           }
-        })
-        .then((data) => {
-          if (!data.resultCode) {
-            this.authUri = data.want.parameters.authUri; //授权成功后获取返回的authUri
+        } as Want)
+        .then((data: common.AbilityResult) => {
+          if (!data.resultCode && data.want) {
+            if (data.want.parameters) {
+              this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri
+            }
           }
         })
       message += "after grantAppPm authUri: " + this.authUri;
@@ -2719,6 +2798,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPermissionRequest((event) => {
+            if (event) {
               AlertDialog.show({
                 title: 'title',
                 message: 'text',
@@ -2738,6 +2818,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
                   event.request.deny()
                 }
               })
+            }
           })
       }
     }
@@ -2777,8 +2858,10 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onContextMenuShow((event) => {
+            if (event) {
               console.info("x coord = " + event.param.x())
               console.info("link url = " + event.param.getLinkUrl())
+            }
             return true
         })
       }
@@ -2849,6 +2932,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
         Web({ src:'www.example.com', controller:this.controller })
         .geolocationAccess(true)
         .onGeolocationShow((event) => {
+          if (event) {
             AlertDialog.show({
               title: 'title',
               message: 'text',
@@ -2862,6 +2946,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
                 event.geolocation.invoke(event.origin, false, true)
               }
             })
+          }
         })
       }
     }
@@ -2924,7 +3009,7 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController()
-    handler: FullScreenExitHandler = null
+    handler: FullScreenExitHandler | null = null
     build() {
       Column() {
         Web({ src:'www.example.com', controller:this.controller })
@@ -2959,13 +3044,15 @@ onFullScreenExit(callback: () => void)
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController()
-    handler: FullScreenExitHandler = null
+    handler: FullScreenExitHandler | null = null
     build() {
       Column() {
         Web({ src:'www.example.com', controller:this.controller })
         .onFullScreenExit(() => {
           console.log("onFullScreenExit...")
+          if (this.handler) {
             this.handler.exitFullScreen()
+          }
         })
         .onFullScreenEnter((event) => {
           this.handler = event.handler
@@ -3001,8 +3088,8 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
   //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
   @CustomDialog
   struct NewWebViewComp {
-  controller: CustomDialogController
-  webviewController1: web_webview.WebviewController
+  controller?: CustomDialogController
+  webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
   build() {
       Column() {
         Web({ src: "", controller: this.webviewController1 })
@@ -3010,7 +3097,9 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
           .multiWindowAccess(false)
           .onWindowExit(()=> {
             console.info("NewWebViewComp onWindowExit")
+            if (this.controller) {
               this.controller.close()
+            }
           })
         }
     }
@@ -3020,7 +3109,7 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController()
-    dialogController: CustomDialogController = null
+    dialogController: CustomDialogController | null = null
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -3109,8 +3198,10 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
      	  .onSearchResultReceive(ret => {
+     	    if (ret) {
             console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
               "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
+     	    }
      	  })
       }
     }
@@ -3279,7 +3370,7 @@ onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController()
-    @State icon: image.PixelMap = undefined;
+    @State icon: image.PixelMap | undefined = undefined;
     build() {
       Column() {
         Web({ src:'www.example.com', controller: this.controller })
@@ -3353,9 +3444,11 @@ onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstCo
       Column() {
         Web({ src:'www.example.com', controller: this.controller })
           .onFirstContentfulPaint(event => {
+            if (event) {
               console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
               event.navigationStartTick + ", [firstContentfulPaintMs]:" +
               event.firstContentfulPaintMs)
+            }
           })
       }
     }
@@ -3459,6 +3552,7 @@ onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) =>
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onScreenCaptureRequest((event) => {
+            if (event) {
               AlertDialog.show({
                 title: 'title: ' + event.handler.getOrigin(),
                 message: 'text',
@@ -3478,6 +3572,7 @@ onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) =>
                   event.handler.deny()
                 }
               })
+            }
           })
       }
     }
@@ -3552,6 +3647,7 @@ onControllerAttached(callback: () => void)
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview'
+  import { BusinessError } from '@ohos.base';
 
   @Entry
   @Component
@@ -3566,7 +3662,9 @@ onControllerAttached(callback: () => void)
               let id = this.controller.getWebId();
               console.log("id: " + id);
             } catch (error) {
-                console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+              let code = (error as BusinessError).code;
+              let message = (error as BusinessError).message;
+              console.error(`ErrorCode: ${code},  Message: ${message}`);
             }
           })
       }
@@ -4627,8 +4725,8 @@ cancel(): void
 
 ### 创建对象
 
-```
-webController: WebController = new WebController()
+```ts
+let webController: WebController = new WebController()
 ```
 
 ### getCookieManager<sup>9+</sup>
@@ -5167,18 +5265,24 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
 
   ```ts
   // xxx.ets
-  @Entry
-  @Component
-  struct Index {
-    controller: WebController = new WebController()
-    testObj = {
-      test: (data) => {
+  class TestObj {
+    constructor() {
+    }
+
+    test(): string {
       return "ArkUI Web Component"
-      },
-      toString: () => {
+    }
+
+    toString(): void {
       console.log('Web Component toString')
     }
   }
+
+  @Entry
+  @Component
+  struct Index {
+    controller: WebController = new WebController()
+    testObj = new TestObj();
     build() {
       Column() {
         Row() {
@@ -5252,7 +5356,9 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
               this.webResult = result
               console.info(`The test() return value is: ${result}`)
             }})
+          if (e) {
             console.info('url: ', e.url)
+          }
         })
       }
     }

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

@@ -45,8 +45,8 @@ struct LongPressGestureExample {
         .gesture(
         LongPressGesture({ repeat: true })
           // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
-          .onAction((event: GestureEvent) => {
-            if (event.repeat) {
+          .onAction((event?: GestureEvent) => {
+            if (event && event.repeat) {
               this.count++
             }
           })

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -95,12 +95,14 @@ struct PanGestureExample {
       // 左右拖动触发该手势事件
       .gesture(
       PanGesture(this.panOption)
-        .onActionStart((event: GestureEvent) => {
+        .onActionStart((event?: GestureEvent) => {
           console.info('Pan start')
         })
-        .onActionUpdate((event: GestureEvent) => {
+        .onActionUpdate((event?: GestureEvent) => {
+          if (event) {
             this.offsetX = this.positionX + event.offsetX
             this.offsetY = this.positionY + event.offsetY
+          }
         })
         .onActionEnd(() => {
           this.positionX = this.offsetX

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

@@ -56,13 +56,15 @@ struct PinchGestureExample {
       // 三指捏合触发该手势事件
       .gesture(
       PinchGesture({ fingers: 3 })
-        .onActionStart((event: GestureEvent) => {
+        .onActionStart((event?: GestureEvent) => {
           console.info('Pinch start')
         })
-        .onActionUpdate((event: GestureEvent) => {
+        .onActionUpdate((event?: GestureEvent) => {
+          if (event) {
             this.scaleValue = this.pinchValue * event.scale
             this.pinchX = event.pinchCenterX
             this.pinchY = event.pinchCenterY
+          }
         })
         .onActionEnd(() => {
           this.pinchValue = this.scaleValue

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

@@ -53,11 +53,13 @@ struct RotationGestureExample {
       // 双指旋转触发该手势事件
       .gesture(
       RotationGesture()
-        .onActionStart((event: GestureEvent) => {
+        .onActionStart((event?: GestureEvent) => {
           console.info('Rotation start')
         })
-        .onActionUpdate((event: GestureEvent) => {
+        .onActionUpdate((event?: GestureEvent) => {
+          if (event) {
             this.angle = this.rotateValue + event.angle
+          }
         })
         .onActionEnd(() => {
           this.rotateValue = this.angle

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -59,9 +59,11 @@ struct SwipeGestureExample {
       // 单指竖直方向滑动时触发该事件
       .gesture(
       SwipeGesture({ direction: SwipeDirection.Vertical })
-        .onAction((event: GestureEvent) => {
+        .onAction((event?: GestureEvent) => {
+          if (event) {
             this.speed = event.speed
             this.rotateAngle = event.angle
+          }
         })
       )
     }.width('100%')

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md

@@ -41,8 +41,10 @@ struct TapGestureExample {
       Text('Click twice').fontSize(28)
         .gesture(
         TapGesture({ count: 2 })
-          .onAction((event: GestureEvent) => {
+          .onAction((event?: GestureEvent) => {
+            if (event) {
               this.value = JSON.stringify(event.fingerList[0])
+            }
           })
         )
       Text(this.value)

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -1423,8 +1423,10 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var pattern = this.context.createPattern(this.img, 'repeat')
+            let pattern = this.context.createPattern(this.img, 'repeat')
+            if (pattern) {
               this.context.fillStyle = pattern
+            }
             this.context.fillRect(0, 0, 200, 200)
           })
       }
@@ -2421,7 +2423,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.drawImage(this.img,0,0,130,130)
-            var imagedata = this.context.getImageData(50,50,130,130)
+            let imagedata = this.context.getImageData(50,50,130,130)
             this.context.putImageData(imagedata,150,150)
           })
       }
@@ -2473,8 +2475,8 @@ putImageData(imageData: ImageData, dx: number | string, dy: number | string, dir
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var imageData = this.context.createImageData(100, 100)
-            for (var i = 0; i < imageData.data.length; i += 4) {
+            let imageData = this.context.createImageData(100, 100)
+            for (let i = 0; i < imageData.data.length; i += 4) {
               imageData.data[i + 0] = 255
               imageData.data[i + 1] = 0
               imageData.data[i + 2] = 255
@@ -2626,15 +2628,15 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var imageData = this.offContext.createImageData(100, 100)
-            for (var i = 0; i < imageData.data.length; i += 4) {
+            let imageData = this.offContext.createImageData(100, 100)
+            for (let i = 0; i < imageData.data.length; i += 4) {
               imageData.data[i + 0] = 255
               imageData.data[i + 1] = 0
               imageData.data[i + 2] = 255
               imageData.data[i + 3] = 255
             }
             this.offContext.putImageData(imageData, 10, 10)
-            var image = this.offContext.transferToImageBitmap()
+            let image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2684,7 +2686,7 @@ toDataURL(type?: string, quality?: number): string
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var dataURL = this.context.toDataURL()
+            let dataURL = this.context.toDataURL()
           })
       }
       .width('100%')
@@ -2808,7 +2810,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
+            let grad = this.context.createLinearGradient(50,0, 300,100)
             grad.addColorStop(0.0, '#ff0000')
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
@@ -2861,7 +2863,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
+            let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
             grad.addColorStop(0.0, '#ff0000')
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
@@ -2908,7 +2910,7 @@ struct CanvasExample {
         .height('100%')
         .backgroundColor('#ffffff')
         .onReady(() => {
-          var grad = this.context.createConicGradient(0, 50, 80)
+          let grad = this.context.createConicGradient(0, 50, 80)
           grad.addColorStop(0.0, '#ff0000')
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')

zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md

@@ -62,8 +62,8 @@ struct GestureGroupExample {
       // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
     GestureGroup(GestureMode.Sequence,
     LongPressGesture({ repeat: true })
-      .onAction((event: GestureEvent) => {
-        if (event.repeat) {
+      .onAction((event?: GestureEvent) => {
+        if (event && event.repeat) {
           this.count++
         }
         console.info('LongPress onAction')
@@ -76,9 +76,11 @@ struct GestureGroupExample {
         this.borderStyles = BorderStyle.Dashed
         console.info('pan start')
       })
-      .onActionUpdate((event: GestureEvent) => {
+      .onActionUpdate((event?: GestureEvent) => {
+        if (event) {
           this.offsetX = this.positionX + event.offsetX
           this.offsetY = this.positionY + event.offsetY
+        }
         console.info('pan update')
       })
       .onActionEnd(() => {

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -42,7 +42,7 @@ struct Page45 {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() => {
-          var grad = this.context.createLinearGradient(50, 0, 300, 100)
+          let grad = this.context.createLinearGradient(50, 0, 300, 100)
           grad.addColorStop(0.0, '#ff0000')
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md

@@ -33,7 +33,7 @@ struct CanvasPatternPage {
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private matrix: Matrix2D = new Matrix2D()
   private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
-  private pattern : CanvasPattern
+  private pattern : CanvasPattern | null = null
 
   build() {
       Column() {
@@ -43,7 +43,9 @@ struct CanvasPatternPage {
             this.matrix.scaleX = 1
             this.matrix.translateX = 50
             this.matrix.translateY = 200
+            if (this.pattern) {
               this.pattern.setTransform(this.matrix)
+            }
             this.context.fillRect(0, 0, 480, 720)
           })
           .width("45%")
@@ -54,12 +56,14 @@ struct CanvasPatternPage {
           .backgroundColor('#FFFFFF')
           .onReady(() => {
             this.pattern = this.context.createPattern(this.img, 'no-repeat')
-            this.context.fillStyle = this.pattern
             this.matrix.scaleY = 0.5
             this.matrix.scaleX = 0.5
             this.matrix.translateX = 50
             this.matrix.translateY = 50
+            if (this.pattern) {
+              this.context.fillStyle = this.pattern
               this.pattern.setTransform(this.matrix)
+            }
             this.context.fillRect(0, 0, 480, 720)
           })
       }

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

@@ -39,7 +39,7 @@ ImageData对象可以存储canvas渲染的像素数据。
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.drawImage(this.img,0,0,130,130)
-            var imagedata = this.context.getImageData(50,50,130,130)
+            let imagedata = this.context.getImageData(50,50,130,130)
             this.context.putImageData(imagedata,150,150)
           })
       }

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md

@@ -36,7 +36,7 @@ Matrix2D()
 struct Matrix2DScaleX {
   @State message: string = 'Matrix2D ScaleX'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -50,7 +50,7 @@ struct Matrix2DScaleX {
           .fontWeight(FontWeight.Bold)
         Button("Set scaleX")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             this.printMatrix(this.message, matrix)
           })
@@ -71,7 +71,7 @@ struct Matrix2DScaleX {
 struct Matrix2DScaleY {
   @State message: string = 'Matrix2D ScaleY'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -85,7 +85,7 @@ struct Matrix2DScaleY {
           .fontWeight(FontWeight.Bold)
         Button("Set scaleY")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleY = 1
             this.printMatrix(this.message, matrix)
           })
@@ -106,7 +106,7 @@ struct Matrix2DScaleY {
 struct Matrix2DRotateX {
   @State message: string = 'Matrix2D RotateX'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -120,7 +120,7 @@ struct Matrix2DRotateX {
           .fontWeight(FontWeight.Bold)
         Button("Set rotateX")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.rotateX = Math.sin(45 / Math.PI)
             this.printMatrix(this.message, matrix)
           })
@@ -141,7 +141,7 @@ struct Matrix2DRotateX {
 struct Matrix2DRotateY {
   @State message: string = 'Matrix2D RotateY'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -155,7 +155,7 @@ struct Matrix2DRotateY {
           .fontWeight(FontWeight.Bold)
         Button("Set rotateY")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.rotateY = Math.cos(45 / Math.PI)
             this.printMatrix(this.message, matrix)
           })
@@ -176,7 +176,7 @@ struct Matrix2DRotateY {
 struct Matrix2DTranslateX {
   @State message: string = 'Matrix2D TranslateX'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -190,7 +190,7 @@ struct Matrix2DTranslateX {
           .fontWeight(FontWeight.Bold)
         Button("Set translateX")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.translateX = 10
             this.printMatrix(this.message, matrix)
           })
@@ -211,7 +211,7 @@ struct Matrix2DTranslateX {
 struct Matrix2DTranslateY {
   @State message: string = 'Matrix2D TranslateY'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -225,7 +225,7 @@ struct Matrix2DTranslateY {
           .fontWeight(FontWeight.Bold)
         Button("Set translateY")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.translateY = 10
             this.printMatrix(this.message, matrix)
           })
@@ -262,7 +262,7 @@ identity(): Matrix2D
 struct Matrix2DIdentity {
   @State message: string = 'Matrix2D Identity'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -276,7 +276,7 @@ struct Matrix2DIdentity {
           .fontWeight(FontWeight.Bold)
         Button("matrix identity")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix = matrix.identity()
             this.printMatrix(this.message, matrix)
           })
@@ -311,7 +311,7 @@ invert(): Matrix2D
 struct Matrix2DInvert {
   @State message: string = 'Matrix2D Invert'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -325,7 +325,7 @@ struct Matrix2DInvert {
           .fontWeight(FontWeight.Bold)
         Button("matrix invert")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 2
             matrix.scaleY = 1
             matrix.rotateX = 0
@@ -374,7 +374,7 @@ multiply(other?: Matrix2D): Matrix2D
 struct Matrix2DMultiply {
   @State message: string = 'Matrix2D Multiply'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -388,14 +388,14 @@ struct Matrix2DMultiply {
           .fontWeight(FontWeight.Bold)
         Button("matrix multiply")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             matrix.scaleY = 1
             matrix.rotateX = 0
             matrix.rotateY = 0
             matrix.translateX = 0
             matrix.translateY = 0
-            var other: Matrix2D = new Matrix2D()
+            let other: Matrix2D = new Matrix2D()
             other.scaleX = 2
             other.scaleY = 2
             other.rotateX = 0
@@ -445,7 +445,7 @@ rotate(rx?: number, ry?: number): Matrix2D
 struct Matrix2DRotate {
   @State message: string = 'Matrix2D Rotate'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -459,7 +459,7 @@ struct Matrix2DRotate {
           .fontWeight(FontWeight.Bold)
         Button("matrix rotate")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             matrix.scaleY = 1
             matrix.rotateX = 0
@@ -508,7 +508,7 @@ rotate(degree: number, rx?: number, ry?: number): Matrix2D
 struct Matrix2DRotate {
   @State message: string = 'Matrix2D Rotate'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -522,7 +522,7 @@ struct Matrix2DRotate {
           .fontWeight(FontWeight.Bold)
         Button("matrix rotate")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             matrix.scaleY = 1
             matrix.rotateX = 0
@@ -570,7 +570,7 @@ translate(tx?: number, ty?: number): Matrix2D
 struct Matrix2DTranslate {
   @State message: string = 'Matrix2D Translate'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -584,7 +584,7 @@ struct Matrix2DTranslate {
           .fontWeight(FontWeight.Bold)
         Button("matrix translate")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             matrix.scaleY = 1
             matrix.rotateX = 0
@@ -632,7 +632,7 @@ scale(sx?: number, sy?: number): Matrix2D
 struct Matrix2DScale {
   @State message: string = 'Matrix2D Scale'
 
-  printMatrix(title, matrix) {
+  printMatrix(title: string, matrix: Matrix2D) {
     console.log(title)
     console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
                 ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
@@ -646,7 +646,7 @@ struct Matrix2DScale {
           .fontWeight(FontWeight.Bold)
         Button("matrix scale")
           .onClick(() => {
-            var matrix : Matrix2D = new Matrix2D()
+            let matrix : Matrix2D = new Matrix2D()
             matrix.scaleX = 1
             matrix.scaleY = 1
             matrix.rotateX = 0

zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md

@@ -55,10 +55,10 @@ struct OffscreenCanvasPage {
           .borderColor('#00FF00')
           .backgroundColor('#FFFFFF')
           .onReady(() => {
-            var offContext = this.offCanvas.getContext("2d", this.settings)
+            let offContext = this.offCanvas.getContext("2d", this.settings)
             offContext.fillStyle = '#CDCDCD'
             offContext.fillRect(0, 0, this.offCanvas.width, 150)
-            var image = this.offCanvas.transferToImageBitmap()
+            let image = this.offCanvas.transferToImageBitmap()
             this.context.setTransform(1, 0, 0, 1, 50, 200)
             this.context.transferFromImageBitmap(image)
           })
@@ -91,10 +91,10 @@ struct OffscreenCanvasPage {
           .borderColor('#00FF00')
           .backgroundColor('#FFFFFF')
           .onReady(() => {
-            var offContext = this.offCanvas.getContext("2d", this.settings)
+            let offContext = this.offCanvas.getContext("2d", this.settings)
             offContext.fillStyle = '#CDCDCD'
             offContext.fillRect(0, 0, 100, this.offCanvas.height)
-            var image = this.offCanvas.transferToImageBitmap()
+            let image = this.offCanvas.transferToImageBitmap()
             this.context.setTransform(1, 0, 0, 1, 50, 200)
             this.context.transferFromImageBitmap(image)
           })
@@ -142,13 +142,13 @@ struct OffscreenCanvasPage {
         .borderColor('#00FF00')
         .backgroundColor('#FFFFFF')
         .onReady(() => {
-          var offContext = this.offCanvas.getContext("2d", this.settings)
+          let offContext = this.offCanvas.getContext("2d", this.settings)
           offContext.fillStyle = '#CDCDCD'
           offContext.fillRect(0, 0, 300, 500)
           offContext.fillStyle = '#000000'
           offContext.font = '70px serif bold'
           offContext.fillText("Offscreen : Hello World!", 20, 60)
-          var image = this.offCanvas.transferToImageBitmap()
+          let image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }
@@ -197,7 +197,7 @@ struct OffscreenCanvasExamplePage {
           .height('100%')
           .backgroundColor('#FFFFFF')
           .onReady(() => {
-            var offContext = this.offscreenCanvas.getContext("2d", this.settings)
+            let offContext = this.offscreenCanvas.getContext("2d", this.settings)
             offContext.font = '70px sans-serif'
             offContext.fillText("Offscreen : Hello World!", 20, 60)
             offContext.fillStyle = "#0000ff"
@@ -217,7 +217,7 @@ struct OffscreenCanvasExamplePage {
             offContext.stroke()
             offContext.fillStyle = '#FF00FF'
             offContext.fillRect(100, 100, 60, 60)
-            var imageData = this.offscreenCanvas.transferToImageBitmap()
+            let imageData = this.offscreenCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(imageData)
           })
       }.width('100%').height('100%')

zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md

@@ -86,7 +86,7 @@ struct AlphabetIndexerSample {
     Stack({ alignContent: Alignment.Start }) {
       Row() {
         List({ space: 20, initialIndex: 0 }) {
-          ForEach(this.arrayA, (item) => {
+          ForEach(this.arrayA, (item: string) => {
             ListItem() {
               Text(item)
                 .width('80%')
@@ -94,9 +94,9 @@ struct AlphabetIndexerSample {
                 .fontSize(30)
                 .textAlign(TextAlign.Center)
             }.editable(true)
-          }, item => item)
+          }, (item: string) => item)
 
-          ForEach(this.arrayB, (item) => {
+          ForEach(this.arrayB, (item: string) => {
             ListItem() {
               Text(item)
                 .width('80%')
@@ -104,9 +104,9 @@ struct AlphabetIndexerSample {
                 .fontSize(30)
                 .textAlign(TextAlign.Center)
             }.editable(true)
-          }, item => item)
+          }, (item: string) => item)
 
-          ForEach(this.arrayC, (item) => {
+          ForEach(this.arrayC, (item: string) => {
             ListItem() {
               Text(item)
                 .width('80%')
@@ -114,9 +114,9 @@ struct AlphabetIndexerSample {
                 .fontSize(30)
                 .textAlign(TextAlign.Center)
             }.editable(true)
-          }, item => item)
+          }, (item: string) => item)
 
-          ForEach(this.arrayL, (item) => {
+          ForEach(this.arrayL, (item: string) => {
             ListItem() {
               Text(item)
                 .width('80%')
@@ -124,7 +124,7 @@ struct AlphabetIndexerSample {
                 .fontSize(30)
                 .textAlign(TextAlign.Center)
             }.editable(true)
-          }, item => item)
+          }, (item: string) => item)
         }
         .width('50%')
         .height('100%')