Merge pull request #33335 from Jimexist/add-observers

[weixin-app] add defs for observers

types/weixin-app/index.d.ts

@@ -87,16 +87,14 @@ declare namespace wx {
 		 * @version 1.4.0
 		 */
 		onProgressUpdate(
-			callback?: (
-				res: {
-					/** 上传进度百分比 */
-					progress: number;
-					/** 已经上传的数据长度，单位 Bytes */
-					totalBytesSent: number;
-					/** 预期需要上传的数据总长度，单位 Bytes */
-					totalBytesExpectedToSend: number;
-				}
-			) => void
+			callback?: (res: {
+				/** 上传进度百分比 */
+				progress: number;
+				/** 已经上传的数据长度，单位 Bytes */
+				totalBytesSent: number;
+				/** 预期需要上传的数据总长度，单位 Bytes */
+				totalBytesExpectedToSend: number;
+			}) => void
 		): void;
 		/**
 		 * 中断下载任务
@@ -135,16 +133,14 @@ declare namespace wx {
 		 * @version 1.4.0
 		 */
 		onProgressUpdate(
-			callback?: (
-				res: {
-					/** 下载进度百分比 */
-					progress: number;
-					/** 已经下载的数据长度，单位 Bytes */
-					totalBytesWritten: number;
-					/** 预期需要下载的数据总长度，单位 Bytes */
-					totalBytesExpectedToWrite: number;
-				}
-			) => void
+			callback?: (res: {
+				/** 下载进度百分比 */
+				progress: number;
+				/** 已经下载的数据长度，单位 Bytes */
+				totalBytesWritten: number;
+				/** 预期需要下载的数据总长度，单位 Bytes */
+				totalBytesExpectedToWrite: number;
+			}) => void
 		): void;
 		/**
 		 * 中断下载任务
@@ -1147,12 +1143,7 @@ declare namespace wx {
 	 * @version 1.1.0
 	 */
 	function onNetworkStatusChange(
-		callback: (
-			res: {
-				isConnected: boolean;
-				networkType: networkType;
-			}
-		) => void
+		callback: (res: { isConnected: boolean; networkType: networkType }) => void
 	): void;
 	// 设备-----加速度计
 	interface AccelerometerData {
@@ -1391,11 +1382,7 @@ declare namespace wx {
 	 * @version 1.1.0
 	 */
 	function onBluetoothDeviceFound(
-		callback: (
-			res: {
-				devices: BluetoothDevice[];
-			}
-		) => void
+		callback: (res: { devices: BluetoothDevice[] }) => void
 	): void;
 	interface GetConnectedBluetoothDevicesOptions extends BaseOptions {
 		services: string[];
@@ -1604,43 +1591,39 @@ declare namespace wx {
 	 * 监听低功耗蓝牙连接的错误事件，包括设备丢失，连接异常断开等等。
 	 */
 	function onBLEConnectionStateChanged(
-		callback: (
-			res: {
-				/**
-				 * 蓝牙设备 id，参考 device 对象
-				 */
-				deviceId: string;
-				/**
-				 * 连接目前的状态
-				 */
-				connected: boolean;
-			}
-		) => void
+		callback: (res: {
+			/**
+			 * 蓝牙设备 id，参考 device 对象
+			 */
+			deviceId: string;
+			/**
+			 * 连接目前的状态
+			 */
+			connected: boolean;
+		}) => void
 	): void;
 	/**
 	 * 监听低功耗蓝牙设备的特征值变化。必须先启用notify接口才能接收到设备推送的notification。
 	 */
 	function onBLECharacteristicValueChange(
-		callback: (
-			res: {
-				/**
-				 * 蓝牙设备 id，参考 device 对象
-				 */
-				deviceId: string;
-				/**
-				 * 特征值所属服务 uuid
-				 */
-				serviceId: string;
-				/**
-				 * 特征值 uuid
-				 */
-				characteristicId: string;
-				/**
-				 * 特征值最新的值
-				 */
-				value: ArrayBuffer;
-			}
-		) => void
+		callback: (res: {
+			/**
+			 * 蓝牙设备 id，参考 device 对象
+			 */
+			deviceId: string;
+			/**
+			 * 特征值所属服务 uuid
+			 */
+			serviceId: string;
+			/**
+			 * 特征值 uuid
+			 */
+			characteristicId: string;
+			/**
+			 * 特征值最新的值
+			 */
+			value: ArrayBuffer;
+		}) => void
 	): void;
 	// #region iBeacon
 	interface StartBeaconDiscoveryOptions extends BaseOptions {
@@ -3729,9 +3712,9 @@ declare namespace wx {
 
 	type DefaultProps = object | Record<string, any>;
 
-	type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((
-		k: infer I,
-	) => void)
+	type UnionToIntersection<U> = (U extends any
+		? (k: U) => void
+		: never) extends ((k: infer I) => void)
 		? I
 		: never;
 
@@ -3743,20 +3726,26 @@ declare namespace wx {
 		__DO_NOT_USE_INTERNAL_FIELD_METHODS: Methods;
 	}
 
-  type UnboxBehaviorData<T> = T extends Behavior<{}, {}, {}> ? T['__DO_NOT_USE_INTERNAL_FIELD_DATA'] : {};
-  type UnboxBehaviorProps<T> = T extends Behavior<{}, {}, {}> ? T['__DO_NOT_USE_INTERNAL_FIELD_PROPS'] : {};
-	type UnboxBehaviorMethods<T> = T extends Behavior<{}, {}, {}> ? T['__DO_NOT_USE_INTERNAL_FIELD_METHODS'] : {};
+	type UnboxBehaviorData<T> = T extends Behavior<{}, {}, {}>
+		? T["__DO_NOT_USE_INTERNAL_FIELD_DATA"]
+		: {};
+	type UnboxBehaviorProps<T> = T extends Behavior<{}, {}, {}>
+		? T["__DO_NOT_USE_INTERNAL_FIELD_PROPS"]
+		: {};
+	type UnboxBehaviorMethods<T> = T extends Behavior<{}, {}, {}>
+		? T["__DO_NOT_USE_INTERNAL_FIELD_METHODS"]
+		: {};
 
-  type UnboxBehaviorsMethods<
-    Behaviors extends Array<Behavior<{}, {}, {}> | string>
+	type UnboxBehaviorsMethods<
+		Behaviors extends Array<Behavior<{}, {}, {}> | string>
 	> = UnboxBehaviorMethods<UnionToIntersection<ArrayType<Behaviors>>>;
 
-  type UnboxBehaviorsData<
-    Behaviors extends Array<Behavior<{}, {}, {}> | string>
+	type UnboxBehaviorsData<
+		Behaviors extends Array<Behavior<{}, {}, {}> | string>
 	> = UnboxBehaviorData<UnionToIntersection<ArrayType<Behaviors>>>;
 
-  type UnboxBehaviorsProps<
-    Behaviors extends Array<Behavior<{}, {}, {}> | string>
+	type UnboxBehaviorsProps<
+		Behaviors extends Array<Behavior<{}, {}, {}> | string>
 	> = UnboxBehaviorProps<UnionToIntersection<ArrayType<Behaviors>>>;
 
 	// CombinedInstance models the `this`, i.e. instance type for (user defined) component
@@ -3765,7 +3754,7 @@ declare namespace wx {
 		Data,
 		Methods,
 		Props,
-    Behaviors extends Array<Behavior<{}, {}, {}> | string>
+		Behaviors extends Array<Behavior<{}, {}, {}> | string>
 	> = Methods & Instance & UnboxBehaviorsMethods<Behaviors>;
 
 	type Prop<T> = (() => T) | { new (...args: any[]): T & object };
@@ -3791,6 +3780,13 @@ declare namespace wx {
 
 	type PropsDefinition<T> = ArrayPropsDefinition<T> | RecordPropsDefinition<T>;
 
+	/**
+	 * https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html
+	 */
+	interface ObserversDefs<V> {
+		[expression: string]: (this: V, ...fields: any[]) => any;
+	}
+
 	interface ComponentRelation<D = any, P = any> {
 		/** 目标组件的相对关系，可选的值为 parent 、 child 、 ancestor 、 descendant */
 		type: "parent" | "child" | "ancestor" | "descendant";
@@ -3808,7 +3804,7 @@ declare namespace wx {
 		Data,
 		Methods,
 		Props,
-    Behaviors extends Array<Behavior<{}, {}, {}> | string>
+		Behaviors extends Array<Behavior<{}, {}, {}> | string>
 	> = object &
 		ComponentOptions<V, Data, Methods, Props, Behaviors> &
 		ThisType<CombinedInstance<V, Data, Methods, Readonly<Props>, Behaviors>>;
@@ -3872,7 +3868,7 @@ declare namespace wx {
 		Data = DefaultData<Instance>,
 		Methods = DefaultMethods<Instance>,
 		Props = PropsDefinition<DefaultProps>,
-    Behaviors extends Array<Behavior<{}, {}, {}> | string> = []
+		Behaviors extends Array<Behavior<{}, {}, {}> | string> = []
 	> extends Partial<Lifetimes> {
 		/**
 		 * 组件的对外属性，是属性名到属性设置的映射表
@@ -3886,6 +3882,12 @@ declare namespace wx {
 		 */
 		data?: Data;
 
+		/**
+		 * 数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持
+		 * @since 2.6.1
+		 */
+		observers?: ObserversDefs<Instance>;
+
 		/**
 		 * 组件的方法，包括事件响应函数和任意的自定义方法
 		 * 关于事件响应函数的使用
@@ -3925,7 +3927,7 @@ declare namespace wx {
 		 * 类似于mixins和traits的组件间代码复用机制
 		 * 参见 [behaviors](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/behaviors.html)
 		 */
-    behaviors?: Behaviors;
+		behaviors?: Behaviors;
 
 		/**
 		 * 组件生命周期声明对象，组件的生命周期：created、attached、ready、moved、detached将收归到lifetimes字段内进行声明，
@@ -3965,7 +3967,11 @@ declare namespace wx {
 	/**
 	 * Component实例方法
 	 */
-	interface Component<D, P, B extends Array<Behavior<{}, {}, {}> | string> = []> {
+	interface Component<
+		D,
+		P,
+		B extends Array<Behavior<{}, {}, {}> | string> = []
+	> {
 		/**
 		 * 组件的文件路径
 		 */
@@ -3981,20 +3987,24 @@ declare namespace wx {
 		/**
 		 * 组件数据，包括内部数据和属性值
 		 */
-    data: D & UnboxBehaviorsData<B> & {
-      [key in keyof (P & UnboxBehaviorsProps<B>)]: PropValueType<
-        (P & UnboxBehaviorsProps<B>)[key]
-      >
-    };
+		data: D &
+			UnboxBehaviorsData<B> &
+			{
+				[key in keyof (P & UnboxBehaviorsProps<B>)]: PropValueType<
+					(P & UnboxBehaviorsProps<B>)[key]
+				>
+			};
 
 		/**
 		 * 组件数据，包括内部数据和属性值（与 data 一致）
 		 */
-    properties: D & UnboxBehaviorsData<B> & {
-      [key in keyof (P & UnboxBehaviorsProps<B>)]: PropValueType<
-        (P & UnboxBehaviorsProps<B>)[key]
-      >
-    };
+		properties: D &
+			UnboxBehaviorsData<B> &
+			{
+				[key in keyof (P & UnboxBehaviorsProps<B>)]: PropValueType<
+					(P & UnboxBehaviorsProps<B>)[key]
+				>
+			};
 		/**
 		 * 将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值
 		 * 1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
@@ -4397,7 +4407,12 @@ declare function App<T extends wx.AppOptions>(
 declare function getApp(): wx.App;
 // #endregion
 // #region Compontent组件
-declare function Component<D, M, P, B extends Array<wx.Behavior<{}, {}, {}> | string> = []>(
+declare function Component<
+	D,
+	M,
+	P,
+	B extends Array<wx.Behavior<{}, {}, {}> | string> = []
+>(
 	options?: wx.ThisTypedComponentOptionsWithRecordProps<
 		wx.Component<D, P, B>,
 		D,
@@ -4414,7 +4429,12 @@ declare function Component<D, M, P, B extends Array<wx.Behavior<{}, {}, {}> | st
  * 每个组件可以引用多个 behavior
  * behavior 也可以引用其他 behavior
  */
-declare function Behavior<D, M, P, B extends Array<wx.Behavior<{}, {}, {}> | string> = []>(
+declare function Behavior<
+	D,
+	M,
+	P,
+	B extends Array<wx.Behavior<{}, {}, {}> | string> = []
+>(
 	options?: wx.ThisTypedComponentOptionsWithRecordProps<
 		wx.Component<D, P, B>,
 		D,
@@ -4422,7 +4442,11 @@ declare function Behavior<D, M, P, B extends Array<wx.Behavior<{}, {}, {}> | str
 		P,
 		B
 	>
-): wx.Behavior<D & wx.UnboxBehaviorsData<B>, P & wx.UnboxBehaviorsProps<B>, M & wx.UnboxBehaviorsMethods<B>>;
+): wx.Behavior<
+	D & wx.UnboxBehaviorsData<B>,
+	P & wx.UnboxBehaviorsProps<B>,
+	M & wx.UnboxBehaviorsMethods<B>
+>;
 // #endregion
 // #region Page
 /**

types/weixin-app/weixin-app-tests.ts

@@ -16,7 +16,7 @@ const parentBehavior = Behavior({
 		}
 	},
 	data: {
-		myParentBehaviorData: "",
+		myParentBehaviorData: ""
 	},
 	methods: {
 		myParentBehaviorMethod(input: number) {
@@ -26,31 +26,40 @@ const parentBehavior = Behavior({
 });
 
 function createBehaviorWithUnionTypes(n: number) {
-	const properties = n % 2 < 1 ? {
-		unionPropA: {
-			type: String,
-		},
-	} : {
-		unionPropB: {
-			type: Number,
-		},
-	};
+	const properties =
+		n % 2 < 1
+			? {
+					unionPropA: {
+						type: String
+					}
+			  }
+			: {
+					unionPropB: {
+						type: Number
+					}
+			  };
 
-	const data = n % 4 < 2 ? {
-		unionDataA: 'a',
-	} : {
-		unionDataB: 1,
-	};
+	const data =
+		n % 4 < 2
+			? {
+					unionDataA: "a"
+			  }
+			: {
+					unionDataB: 1
+			  };
 
-	const methods = n % 8 < 4 ? {
-		unionMethodA(a: number) {
-			return n + 1;
-		},
-	} : {
-		unionMethodB(a: string) {
-			return {value: a};
-		},
-	};
+	const methods =
+		n % 8 < 4
+			? {
+					unionMethodA(a: number) {
+						return n + 1;
+					}
+			  }
+			: {
+					unionMethodB(a: string) {
+						return { value: a };
+					}
+			  };
 
 	return Behavior({
 		properties,
@@ -63,7 +72,7 @@ const behavior = Behavior({
 	behaviors: [
 		createBehaviorWithUnionTypes(1),
 		parentBehavior,
-		"wx://form-field",
+		"wx://form-field"
 	],
 	properties: {
 		myBehaviorProperty: {
@@ -168,7 +177,7 @@ Component({
 				console.log(this.unionMethodA(5));
 			}
 			if (this.unionMethodB) {
-				console.log(this.unionMethodB('test').value);
+				console.log(this.unionMethodB("test").value);
 			}
 			console.log(this.data.unionDataA);
 			console.log(this.data.unionDataB);
@@ -568,3 +577,26 @@ App({
 		});
 	}
 });
+
+Component({
+	observers: {
+		"name, age": function nameAgeObserver(name: string, age: number) {
+			this.setData({
+				nameStr: `Dear ${name}`,
+				ageStr: `${age}`
+			});
+		}
+	},
+	properties: {
+		name: {
+			type: String
+		},
+		age: {
+			type: Number
+		}
+	},
+	data: {
+		nameStr: "",
+		ageStr: ""
+	}
+});