!24120 update api js md

Merge pull request !24120 from 李欣楠/cherry-pick-1693988606

zh-cn/application-dev/reference/apis/js-apis-arkui-componentUtils.md

@@ -12,7 +12,7 @@
 
 ## 导入模块
 
-```js
+```ts
 import componentUtils from '@ohos.arkui.componentUtils'
 ```
 ## componentUtils.getRectangleById
@@ -37,8 +37,9 @@ getRectangleById(id: string): ComponentInfo
 
 **示例：**
 
-```js
-let modePosition = componentUtils.getRectangleById("onClick");
+```ts
+import componentUtils from '@ohos.arkui.componentUtils';
+let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById("onClick");
 ```
 
 ## ComponentInfo
@@ -140,14 +141,14 @@ let modePosition = componentUtils.getRectangleById("onClick");
 
 **示例：**
 
-  ```js
+  ```ts
 import matrix4 from '@ohos.matrix4';
 import componentUtils from '@ohos.arkui.componentUtils';
 
 @Entry
 @Component
 struct Utils{
-  private getComponentRect(key) {
+  private getComponentRect(key:string) {
     console.info("Mode Key: " + key);
     let modePosition = componentUtils.getRectangleById(key);
 

zh-cn/application-dev/reference/apis/js-apis-mediaquery.md

@@ -15,7 +15,7 @@
 
 ## 导入模块
 
-```js
+```ts
 import mediaquery from '@ohos.mediaquery'
 ```
 
@@ -42,8 +42,9 @@ matchMediaSync(condition: string): MediaQueryListener
 
 **示例：** 
 
-```js
-let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
+```ts
+import mediaquery from '@ohos.mediaquery'
+let listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
 ```
 
 
@@ -98,7 +99,7 @@ off(type: 'change', callback?: Callback<MediaQueryResult>): void
 
 **示例：** 
 
-  ```js
+  ```ts
     import mediaquery from '@ohos.mediaquery'
     
     let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件

zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md

@@ -8,8 +8,9 @@
 
 ## 导入模块
 
-```js
+```ts
 import pluginComponentManager from '@ohos.pluginComponent'
+import Want from '@ohos.app.ability.Want';
 ```
 
 ## PluginComponentTemplate
@@ -153,8 +154,10 @@ OnPushEventCallback = (source: Want, template: PluginComponentTemplate, data: KV
 
 **示例：**
 
-```js
-function onPushListener(source, template, data, extraData) {
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
+import Want from '@ohos.app.ability.Want';
+function onPushListener(source: Want, template: PluginComponentTemplate, data: pluginComponentManager.KVObject, extraData: pluginComponentManager.KVObject) {
   console.log("onPushListener template.source=" + template.source)
   console.log("onPushListener source=" + JSON.stringify(source))
   console.log("onPushListener template=" + JSON.stringify(template))
@@ -180,14 +183,16 @@ OnRequestEventCallback = (source: Want, name: string, data: KVObject) => Request
 
 **示例：**
 
-```js
-function onRequestListener(source, name, data) {
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
+import Want from '@ohos.app.ability.Want';
+function onRequestListener(source:Want, name:string, data:pluginComponentManager.KVObject) {
   console.error("onRequestListener");
   console.log("onRequestListener source=" + JSON.stringify(source));
   console.log("onRequestListener name=" + name);
   console.log("onRequestListener data=" + JSON.stringify(data));
-
-  return { template: "ets/pages/plugin.js", data: data };
+  let RtnData:Record<string,string|pluginComponentManager.KVObject> = { 'template': "ets/pages/plugin.js", 'data': data }
+  return RtnData;
 }
 ```
 
@@ -207,7 +212,8 @@ push(param: PushParameters , callback: AsyncCallback&lt;void&gt;): void
 
 **示例：**
 
-```js
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
 pluginComponentManager.push(
   {
     want: {
@@ -248,7 +254,8 @@ push(param: PushParameterForStage, callback: AsyncCallback&lt;void&gt;): void
 
 **示例：**
 
-```js
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
 pluginComponentManager.push(
   {
     owner: {
@@ -296,7 +303,8 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
 
 **示例：**
 
-```js
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
 pluginComponentManager.request(
   {
     want: {
@@ -339,7 +347,8 @@ request(param: RequestParameterForStage, callback: AsyncCallback&lt;RequestCallb
 
 **示例：**
 
-```js
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
 pluginComponentManager.request(
   {
     owner: {
@@ -378,21 +387,23 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback ):
 
 **示例：**
 
-```js
-function onPushListener(source, template, data, extraData) {
+```ts
+import pluginComponentManager from '@ohos.pluginComponent'
+import Want from '@ohos.app.ability.Want';
+function onPushListener(source:Want, template:PluginComponentTemplate, data:pluginComponentManager.KVObject, extraData:pluginComponentManager.KVObject) {
   console.log("onPushListener template.source=" + template.source)
   console.log("onPushListener source=" + JSON.stringify(source))
   console.log("onPushListener template=" + JSON.stringify(template))
   console.log("onPushListener data=" + JSON.stringify(data))
   console.log("onPushListener extraData=" + JSON.stringify(extraData))
 }
-function onRequestListener(source, name, data) {
+function onRequestListener(source:Want, name:string, data:pluginComponentManager.KVObject) {
   console.error("onRequestListener");
   console.log("onRequestListener source=" + JSON.stringify(source));
   console.log("onRequestListener name=" + name);
   console.log("onRequestListener data=" + JSON.stringify(data));
-
-  return { template: "ets/pages/plugin.js", data: data };
+  let RtnData:Record<string,string|pluginComponentManager.KVObject> = { 'template': "ets/pages/plugin.js", 'data': data }
+  return RtnData;
 }
 pluginComponentManager.on("push", onPushListener)
 pluginComponentManager.on("request", onRequestListener)

zh-cn/application-dev/reference/apis/js-apis-prompt.md

@@ -9,7 +9,7 @@
 
 ## 导入模块
 
-```js
+```ts
 import prompt from '@ohos.prompt'
 ```
 
@@ -29,8 +29,9 @@ showToast(options: ShowToastOptions): void
 
 **示例：**
 
-```js
-prompt.showToast({            
+```ts
+import prompt from '@ohos.prompt'
+prompt.showToast({
   message: 'Message Info',
     duration: 2000
 });
@@ -72,7 +73,8 @@ showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>
 
 **示例：**
 
-```js
+```ts
+import prompt from '@ohos.prompt'
 prompt.showDialog({
   title: 'Title Info',
   message: 'Message Info',
@@ -90,7 +92,7 @@ prompt.showDialog({
   .then(data => {
     console.info('showDialog success, click button: ' + data.index);
   })
-  .catch(err => {
+  .catch((err:Error) => {
     console.info('showDialog error: ' + err);
   })
 ```
@@ -114,7 +116,8 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSucc
 
 **示例：**
 
-```js
+```ts
+import prompt from '@ohos.prompt'
 prompt.showDialog({
   title: 'showDialog Title Info',
   message: 'Message Info',
@@ -179,7 +182,8 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenu
 
 **示例：**
 
-```js
+```ts
+import prompt from '@ohos.prompt'
 prompt.showActionMenu({
   title: 'Title Info',
   buttons: [
@@ -225,7 +229,8 @@ showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse
 
 **示例：**
 
-```js
+```ts
+import prompt from '@ohos.prompt'
 prompt.showActionMenu({
   title: 'showActionMenu Title Info',
   buttons: [
@@ -242,7 +247,7 @@ prompt.showActionMenu({
   .then(data => {
     console.info('showActionMenu success, click button: ' + data.index);
   })
-  .catch(err => {
+  .catch((err:Error) => {
     console.info('showActionMenu error: ' + err);
   })
 ```

zh-cn/application-dev/reference/apis/js-apis-promptAction.md

@@ -14,8 +14,9 @@
 
 ## 导入模块
 
-```js
-import promptAction from '@ohos.promptAction'
+```ts
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
 ```
 
 ## promptAction.showToast
@@ -42,14 +43,18 @@ showToast(options: ShowToastOptions): void
 
 **示例：**
 
-```js
+```ts
+import promptAction from '@ohos.promptAction'
+import { BusinessError } from '@ohos.base';
 try {
   promptAction.showToast({            
     message: 'Message Info',
     duration: 2000 
   });
 } catch (error) {
-  console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
+  let message = (error as BusinessError).message
+  let code = (error as BusinessError).code
+  console.error(`showToast args error code is ${code}, message is ${message}`);
 };
 
 ```
@@ -98,7 +103,9 @@ showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>
 
 **示例：**
 
-```js
+```ts
+import promptAction from '@ohos.promptAction'
+import { BusinessError } from '@ohos.base';
 try {
   promptAction.showDialog({
     title: 'Title Info',
@@ -117,11 +124,13 @@ try {
     .then(data => {
       console.info('showDialog success, click button: ' + data.index);
     })
-    .catch(err => {
+    .catch((err:Error) => {
       console.info('showDialog error: ' + err);
     })
 } catch (error) {
-  console.error(`showDialog args error code is ${error.code}, message is ${error.message}`);
+  let message = (error as BusinessError).message
+  let code = (error as BusinessError).code
+  console.error(`showDialog args error code is ${code}, message is ${message}`);
 };
 ```
 
@@ -152,7 +161,9 @@ showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSucc
 
 **示例：**
 
-```js
+```ts
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
 try {
   promptAction.showDialog({
     title: 'showDialog Title Info',
@@ -175,7 +186,9 @@ try {
     console.info('showDialog success callback, click button: ' + data.index);
   });
 } catch (error) {
-  console.error(`showDialog args error code is ${error.code}, message is ${error.message}`);
+  let message = (error as BusinessError).message
+  let code = (error as BusinessError).code
+  console.error(`showDialog args error code is ${code}, message is ${message}`);
 };
 ```
 
@@ -231,7 +244,9 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenu
 
 **示例：**
 
-```js
+```ts
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
 try {
   promptAction.showActionMenu({
     title: 'Title Info',
@@ -253,7 +268,9 @@ try {
     console.info('showActionMenu success callback, click button: ' + data.index);
   })
 } catch (error) {
-  console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`);
+  let message = (error as BusinessError).message
+  let code = (error as BusinessError).code
+  console.error(`showActionMenu args error code is ${code}, message is ${message}`);
 };
 ```
 
@@ -289,7 +306,9 @@ showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse
 
 **示例：**
 
-```js
+```ts
+import promptAction from '@ohos.promptAction';
+import { BusinessError } from '@ohos.base';
 try {
   promptAction.showActionMenu({
     title: 'showActionMenu Title Info',
@@ -307,11 +326,13 @@ try {
     .then(data => {
       console.info('showActionMenu success, click button: ' + data.index);
     })
-    .catch(err => {
+    .catch((err:Error) => {
       console.info('showActionMenu error: ' + err);
     })
 } catch (error) {
-  console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`);
+  let message = (error as BusinessError).message
+  let code = (error as BusinessError).code
+  console.error(`showActionMenu args error code is ${code}, message is ${message}`);
 };
 ```
 

zh-cn/application-dev/reference/apis/js-apis-system-prompt.md

@@ -13,7 +13,7 @@
 ## 导入模块
 
 
-```js
+```ts
 import prompt from '@system.prompt';
 ```
 
@@ -33,15 +33,17 @@ showToast(options: ShowToastOptions): void
 
 **示例：** 
 
-```js
-export default {    
-  showToast() {        
-    prompt.showToast({            
-      message: 'Message Info',            
+```ts
+import prompt from '@system.prompt';
+class A{
+  showToast() {
+    prompt.showToast({
+      message: 'Message Info',
       duration: 2000
-    });    
+    });
   }
 }
+export default new A()
 ```
 
 
@@ -62,27 +64,29 @@ showDialog(options: ShowDialogOptions): void
 
 **示例：**
 
-```js
-export default {    
-  showDialog() {       
-    prompt.showDialog({           
-      title: 'Title Info',            
-      message: 'Message Info',          
-      buttons: [                
-        {                    
-           text: 'button',                   
-           color: '#666666'          
-         },            
-       ],            
-       success: function(data) {                
-         console.log('dialog success callback，click button : ' + data.index);            
-       },            
-       cancel: function() {                
-         console.log('dialog cancel callback');            
-       },
-     });    
+```ts
+import prompt from '@system.prompt';
+class B{
+  showDialog() {
+    prompt.showDialog({
+      title: 'Title Info',
+      message: 'Message Info',
+      buttons: [
+        {
+          text: 'button',
+          color: '#666666'
+        },
+      ],
+      success: (data)=> {
+        console.log('dialog success callback，click button : ' + data.index);
+      },
+      cancel: ()=> {
+        console.log('dialog cancel callback');
+      },
+    });
   }
 }
+export default new B()
 ```
 
 ## prompt.showActionMenu<sup>6+</sup>
@@ -102,30 +106,32 @@ showActionMenu(options: ShowActionMenuOptions): void
 
 **示例：**
 
-```js
-export default {    
-  showActionMenu() {        
-    prompt.showActionMenu({            
-      title: 'Title Info',            
-      buttons: [                
-        {                    
-          text: 'item1',                    
-          color: '#666666'            
-        },                
-        {                    
-           text: 'item2',                    
-           color: '#000000'         
-        },           
-      ],            
-      success: function(tapIndex) {                
-        console.log('dialog success callback，click button : ' + tapIndex);            
-      },            
-      fail: function(errMsg) {                
-        console.log('dialog fail callback' + errMsg);            
-      },       
-    });    
+```ts
+import prompt from '@system.prompt';
+class C{
+  showActionMenu() {
+    prompt.showActionMenu({
+      title: 'Title Info',
+      buttons: [
+        {
+          text: 'item1',
+          color: '#666666'
+        },
+        {
+          text: 'item2',
+          color: '#000000'
+        },
+      ],
+      success: (tapIndex)=> {
+        console.log('dialog success callback，click button : ' + tapIndex);
+      },
+      fail: (errMsg)=> {
+        console.log('dialog fail callback' + errMsg);
+      },
+    });
   }
 }
+export default new C()
 ```
 ## ShowToastOptions
 

zh-cn/application-dev/reference/apis/js-apis-system-router.md

@@ -13,7 +13,7 @@
 ## 导入模块
 
 
-```js
+```ts
 import router from '@system.router';
 ```
 
@@ -33,9 +33,10 @@ push(options: RouterOptions): void
 
 **示例：**
 
-```js
+```ts
 // 在当前页面中
-export default {
+import router from '@system.router';
+class A{
   pushPage() {
     router.push({
       uri: 'pages/routerpage2/routerpage2',
@@ -48,23 +49,21 @@ export default {
     });
   }
 }
+export default new A()
 ```
 
 
-```js
+```ts
 // 在routerpage2页面中
-export default {
-  data: {
-    data1: 'default',
-    data2: {
-      data3: [1, 2, 3]
-    }
-  },
+class B{
+  data:Record<string,string> = {'data1': 'default'}
+  data2:Record<string,number[]> = {'data3': [1, 2, 3]}
   onInit() {
-    console.info('showData1:' + this.data1);
+    console.info('showData1:' + this.data.data1);
     console.info('showData3:' + this.data2.data3);
   }
 }
+export default new B()
 ```
 
 > **说明：**
@@ -87,9 +86,10 @@ replace(options: RouterOptions): void
 
 **示例：**
 
-```js
+```ts
 // 在当前页面中
-export default {
+import router from '@system.router';
+class C{
   replacePage() {
     router.replace({
       uri: 'pages/detail/detail',
@@ -99,19 +99,19 @@ export default {
     });
   }
 }
+export default new C()
 ```
 
 
-```js
+```ts
 // 在detail页面中
-export default {
-  data: {
-    data1: 'default'
-  },
+class Area {
+  data:Record<string,string> = {'data1': 'default'}
   onInit() {
-    console.info('showData1:' + this.data1)
+    console.info('showData1:' + this.data)
   }
 }
+export default new Area()
 ```
 
 ## router.back
@@ -130,57 +130,67 @@ back(options?: BackRouterOptions): void
 
 **示例：**
 
-```js
+```ts
 // index页面
-export default {    
-  indexPushPage() {        
-    router.push({            
-      uri: 'pages/detail/detail'     
-    });        
+import router from '@system.router';
+class D{
+  indexPushPage() {
+    router.push({
+      uri: 'pages/detail/detail'
+    });
   }
 }
+export default new D()
 ```
 
 
-```js
+```ts
 // detail页面
-export default {    
-  detailPushPage() {        
-    router.push({            
+import router from '@system.router';
+class E{
+  detailPushPage() {
+    router.push({
       uri: 'pages/mall/mall'
-    });    
+    });
   }
 }
+export default new E()
 ```
 
 
-```js
+```ts
 // mall页面通过back，将返回detail页面
-export default {    
-  mallBackPage() {        
-    router.back();    
+import router from '@system.router';
+class F{
+  mallBackPage() {
+    router.back();
   }
 }
+export default new F()
 ```
 
 
-```js
+```ts
 // detail页面通过back，将返回index页面
-export default {    
-  defaultBack() {        
-    router.back();    
+import router from '@system.router';
+class G{
+  defaultBack() {
+    router.back();
   }
 }
+export default new G()
 ```
 
 
-```js
+```ts
 // 通过back，返回到detail页面
-export default {    
-  backToDetail() {        
-    router.back({uri:'pages/detail/detail'});    
+import router from '@system.router';
+class H{
+  backToDetail() {
+    router.back({uri:'pages/detail/detail'});
   }
 }
+export default new H()
 ```
 
 > **说明：**
@@ -210,12 +220,14 @@ clear(): void
 
 **示例：**
 
-```js
-export default {    
-  clearPage() {        
-    router.clear();    
+```ts
+import router from '@system.router';
+class I{
+  clearPage() {
+    router.clear();
   }
 }
+export default new I()
 ```
 
 ## router.getLength
@@ -234,13 +246,15 @@ getLength(): string
 
 **示例：**
 
-```js
-export default {     
-  getLength() {        
-    let size = router.getLength();        
-    console.log('pages stack size = ' + size);    
+```ts
+import router from '@system.router';
+class J{
+  getLength() {
+    let size = router.getLength();
+    console.log('pages stack size = ' + size);
   }
 }
+export default new J()
 ```
 
 ## router.getState
@@ -259,15 +273,17 @@ getState(): RouterState
 
 **示例：**
 
-```js
-export default {     
-  getState() {        
+```ts
+import router from '@system.router';
+class K{
+  getState() {
     let page = router.getState();
     console.log('current index = ' + page.index);
     console.log('current name = ' + page.name);
     console.log('current path = ' + page.path);
   }
 }
+export default new K()
 ```
 
 ## router.enableAlertBeforeBackPage<sup>6+</sup>
@@ -286,20 +302,22 @@ enableAlertBeforeBackPage(options: EnableAlertBeforeBackPageOptions): void
 
 **示例：**
 
-```js
-export default {    
-  enableAlertBeforeBackPage() {        
-    router.enableAlertBeforeBackPage({            
-      message: 'Message Info',            
-      success: function() {                
-        console.log('success');            
-      },            
-      cancel: function() {                
-        console.log('cancel');            
-      }     
-    });    
+```ts
+import router from '@system.router';
+class L{
+  enableAlertBeforeBackPage() {
+    router.enableAlertBeforeBackPage({
+      message: 'Message Info',
+      success: ()=> {
+        console.log('success');
+      },
+      cancel: ()=> {
+        console.log('cancel');
+      }
+    });
   }
 }
+export default new L()
 ```
 
 ## router.disableAlertBeforeBackPage<sup>6+</sup>
@@ -318,19 +336,21 @@ disableAlertBeforeBackPage(options?: DisableAlertBeforeBackPageOptions): void
 
 **示例：**
 
-```js
-export default {    
-  disableAlertBeforeBackPage() {        
-    router.disableAlertBeforeBackPage({            
-      success: function() {                
-        console.log('success');            
-      },            
-      cancel: function() {                
-        console.log('cancel');            
-      }       
-    });    
+```ts
+import router from '@system.router';
+class Z{
+  disableAlertBeforeBackPage() {
+    router.disableAlertBeforeBackPage({
+      success: ()=> {
+        console.log('success');
+      },
+      cancel: ()=> {
+        console.log('cancel');
+      }
+    });
   }
 }
+export default new Z()
 ```
 
 ## RouterOptions