1.0.5

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 0.1.5
+
+* **主要变更**
+
+  - [+] 增加 `my.createIntersectionObserver` 及相关类型的声明。
+
+* **Refactor**
+
+  - 将 `ComponentOptions` 重构为 interface 以便业务自行扩展。
+
 # 0.1.4
 
 * **主要变更**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-types",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "TypeScript declarations for Alipay's mini program.",
   "scripts": {
     "lint": "dtslint types",

types/api/ui/intersectionObserver.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @file IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
+ */
+declare namespace my {
+  namespace intersectionObserver {
+    interface ICreateOptions {
+      /**
+       * 一个数值数组，包含所有阈值
+       */
+      thresholds?: number[];
+
+      /**
+       * 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数
+       */
+      initialRatio?: number;
+
+      /**
+       * 是否同时观测多个目标节点（而非一个），如果设为 `true` ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能）
+       */
+      selectAll?: boolean;
+    }
+
+    interface IRect {
+      /**
+       * 左边界
+       */
+      left: number;
+
+      /**
+       * 右边界
+       */
+      right: number;
+
+      /**
+       * 上边界
+       */
+      top: number;
+
+      /**
+       * 下边界
+       */
+      bottom: number;
+    }
+
+    interface IObserveResult {
+      /**
+       * 相交比例
+       */
+      intersectionRatio: number;
+
+      /**
+       * 相交区域的边界
+       */
+      intersectionRect: IRect;
+
+      /**
+       * 目标边界
+       */
+      boundingClientRect: IRect;
+
+      /**
+       * 参照区域的边界
+       */
+      relativeRect: IRect;
+
+      /**
+       * 相交检测时的时间戳
+       */
+      time: number;
+    }
+
+    interface IIntersectionObserverInstance {
+      /**
+       * 指定页面显示区域作为参照区域之一
+       */
+      relativeToViewport(margins?: Partial<IRect>): IIntersectionObserverInstance;
+
+      /**
+       * 使用选择器指定一个节点，作为参照区域之一
+       */
+      relativeTo(selector: string, margins?: Partial<IRect>): IIntersectionObserverInstance;
+
+      /**
+       * 指定目标节点，并开始监听相交状态变化情况
+       */
+      observe(
+        targetSelector: string,
+        callback: (res: IObserveResult) => any,
+      ): IIntersectionObserverInstance;
+
+      /**
+       * 停止监听回调函数将不再触发
+       */
+      disconnect(): void;
+    }
+  }
+
+  /**
+   * 获取一个相交监测对象 IntersectionObserver
+   */
+  function createIntersectionObserver(
+    options?: intersectionObserver.ICreateOptions,
+  ): intersectionObserver.IIntersectionObserverInstance;
+}

types/component.d.ts

@@ -69,31 +69,32 @@ declare namespace tinyapp {
     $spliceData: SpliceDataMethod;
   }
 
-  type ComponentOptions<
+  interface InternalComponentOptions<P, D, M> {
+    /**
+     * 组件间代码复用机制
+     */
+    mixins?: Array<ComponentOptions<any, any, any>>;
+
+    /**
+     * 组件内部状态
+     */
+    data?: D;
+
+    /**
+     * 为外部传入的数据设置默认值
+     */
+    props?: P;
+
+    /**
+     * 组件的方法，可以是事件响应函数或任意的自定义方法
+     */
+    methods?: M & ThisType<IComponentInstance<P, D> & M>;
+  }
+
+  interface ComponentOptions<
     P extends Record<string, any> = Record<string, any>,
     D = any,
     M extends IComponentMethods = IComponentMethods,
-  > = IComponentLifeCycleMethods<D, P>
-    & {
-      /**
-       * 组件间代码复用机制
-       */
-      mixins?: Array<ComponentOptions<any, any, any>>;
-
-      /**
-       * 组件内部状态
-       */
-      data?: D;
-
-      /**
-       * 为外部传入的数据设置默认值
-       */
-      props?: P;
-
-      /**
-       * 组件的方法，可以是事件响应函数或任意的自定义方法
-       */
-      methods?: M & ThisType<IComponentInstance<P, D> & M>;
-    }
-    & ThisType<IComponentInstance<P, D> & M>;
+  > extends IComponentLifeCycleMethods<D, P>, InternalComponentOptions<P, D, M>, ThisType<IComponentInstance<P, D> & M> {
+  }
 }