小程序Component TS声明

白丁_1
1,694 阅读8分钟

首先看一下微信官方文档小程序声明Component的方式

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

由上面的代码，我们可以简化为

Component(options)

我们主要的组件实现代码实际写在options中， 可以在这个对象中指定组件的属性、数据、方法等。

首先看一下Compeont声明文件

declare let Component: WechatMiniprogram.Component.Constructor

由上述代码可以看到 Component 类型是 WechatMiniprogram.Component.Constructor

interface Constructor {
    <
        TData extends DataOption,
        TProperty extends PropertyOption,
        TMethod extends MethodOption,
        TCustomInstanceProperty extends IAnyObject = {},
        TIsPage extends boolean = false
    >(
        options: Options<
            TData,
            TProperty,
            TMethod,
            TCustomInstanceProperty,
            TIsPage
        >
    ): string
}

这个写法可以转化为

function<
    TData extends DataOption,
    TProperty extends PropertyOption,
    TMethod extends MethodOption,
    TCustomInstanceProperty extends IAnyObject = {},
    TIsPage extends boolean = false
>Constructor(
    options: Options<
        TData,
        TProperty,
        TMethod,
        TCustomInstanceProperty,
        TIsPage
    >
): string

这个函数只有一个入参就是options， 我们可以在options中进行声明组件的属性、数据、方法。

我们接下来进行分析Options 这个类型是如何定义的。

type Options<
  TData extends DataOption,
  TProperty extends PropertyOption,
  TMethod extends MethodOption,
  TCustomInstanceProperty extends IAnyObject = {},
  TIsPage extends boolean = false
> = Partial<Data<TData>> &
    Partial<Property<TProperty>> &
    Partial<Method<TMethod, TIsPage>> &
    Partial<OtherOption> &
    Partial<Lifetimes> &
    ThisType<
        Instance<
            TData,
            TProperty,
            TMethod,
            TCustomInstanceProperty,
            TIsPage
        >
    >

注： Partial 类型工具方法的主要作用是将所有属性变为可选的

可以看到Options类型是由多个类型相交而成。接下来我们一个个分析：

Partial<Data<TData>> 和 Partial<Property<TProperty>>

interface Data<D extends DataOption> {
    /** 组件的内部数据，和 `properties` 一同用于组件的模板渲染 */
    data?: D
}

可以看到Data<TData> 是将 TData包装了一层成为 {data? :TData}

interface Property<P extends PropertyOption> {
    /** 组件的对外属性，是属性名到属性设置的映射表 */
    properties: P
}

Partial<Property<TProperty>> 与Data<TData> 类似, 也是包装了一层为 {properties?: TProperty}

Partial<Method<TMethod, TIsPage>>

interface Method<M extends MethodOption, TIsPage extends boolean = false> {
    /** 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 [组件间通信与事件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html) */
    methods: M & (TIsPage extends true ? Partial<Page.ILifetime> : {})
}

Method 这里会判断是否Component 是否被用于页面，如果用于页面 ，因为Components的生命周期也是写在methods中的， 所以这里将原有的方法和页面的生命周期类型进行合并，。

所以这里就会生成两种类型，如果不是页面的话就是 {methods?: TMethod}，如果是页面的话就是{methods?: TMethod & Partial<Page.ILifetime>}

Partial<Lifetimes>

这个是组件生命周期声明

interface Lifetimes {
      /** 组件生命周期声明对象，组件的生命周期：`created`、`attached`、`ready`、`moved`、`detached` 将收归到 `lifetimes` 字段内进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则 `lifetimes` 字段内声明方式优先级最高
       *
       * 最低基础库： `2.2.3` */
      lifetimes: Partial<{
          /**
           * 在组件实例刚刚被创建时执行，注意此时不能调用 `setData`
           *
           * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          created(): void
          /**
           * 在组件实例进入页面节点树时执行
           *
           * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          attached(): void
          /**
           * 在组件在视图层布局完成后执行
           *
           * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          ready(): void
          /**
           * 在组件实例被移动到节点树另一个位置时执行
           *
           * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          moved(): void
          /**
           * 在组件实例被从页面节点树移除时执行
           *
           * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          detached(): void
          /**
           * 每当组件方法抛出错误时执行
           *
           * 最低基础库版本：[`2.4.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
           */
          error(err: Error): void
      }>
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 在组件实例刚刚被创建时执行
       *
       * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      created(): void
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 在组件实例进入页面节点树时执行
       *
       * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      attached(): void
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 在组件在视图层布局完成后执行
       *
       * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      ready(): void
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 在组件实例被移动到节点树另一个位置时执行
       *
       * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      moved(): void
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 在组件实例被从页面节点树移除时执行
       *
       * 最低基础库版本：[`1.6.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      detached(): void
      /**
       * @deprecated 旧式的定义方式，基础库 `2.2.3` 起请在 lifetimes 中定义
       *
       * 每当组件方法抛出错误时执行
       *
       * 最低基础库版本：[`2.4.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      error(err: Error): void
  }

Partial<OtherOption>

主要为behaviors等组件其他的字段声明

 interface OtherOption {
      /** 类似于mixins和traits的组件间代码复用机制，参见 [behaviors](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html) */
      behaviors: Behavior.BehaviorIdentifier[]
      /**
       * 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 [数据监听器](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html)
       *
       * 最低基础库版本：[`2.6.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
       */
      observers: Record<string, (...args: any[]) => any>
      /** 组件间关系定义，参见 [组件间关系](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html) */
      relations: {
          [componentName: string]: RelationOption
      }
      /** 组件接受的外部样式类，参见 [外部样式类](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html) */
      externalClasses?: string[]
      /** 组件所在页面的生命周期声明对象，参见 [组件生命周期](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html)
       *
       * 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
      pageLifetimes?: Partial<PageLifetimes>
      /** 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举） */
      options: ComponentOptions

      /** 定义段过滤器，用于自定义组件扩展，参见 [自定义组件扩展](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html)
       *
       * 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
      definitionFilter?: DefinitionFilter
      /**
       * 组件自定义导出，当使用 `behavior: wx://component-export` 时，这个定义段可以用于指定组件被 selectComponent 调用时的返回值，参见 [组件间通信与事件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)
       * 最低基础库版本： [`2.2.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) */
      export: () => IAnyObject
  }

接下来分析options 内部的this是如何声明的

ThisType< Instance< TData, TProperty,TMethod,TCustomInstanceProperty, TIsPage>>

注：ThisType是一个工具函数， 主要作用是 标注 this 的类型，不过需要在noImplicitThis 开启下才能生效

那么Instance 将返回Options 实例的类型， 来提供类型推断和检测

type Instance<
    TData extends DataOption,
    TProperty extends PropertyOption,
    TMethod extends Partial<MethodOption>,
    TCustomInstanceProperty extends IAnyObject = {},
    TIsPage extends boolean = false
> = InstanceProperties &
    InstanceMethods<TData> &
    TMethod &
    (TIsPage extends true ? Page.ILifetime : {}) &
    TCustomInstanceProperty & {
        /** 组件数据，**包括内部数据和属性值** */
        data: TData & PropertyOptionToData<TProperty>
        /** 组件数据，**包括内部数据和属性值**（与 `data` 一致） */
        properties: TData & PropertyOptionToData<TProperty>
    }

InstanceProperties

这个主要是声明一些组件实例的属性

interface InstanceProperties {
    /** 组件的文件路径 */
    is: string
    /** 节点id */
    id: string
    /** 节点dataset */
    dataset: Record<string, string>
}

InstanceMethods<TData>

这个主要合并一些组件实例上的方法，例如 setData、selectComponent等

 interface InstanceMethods<D extends DataOption> {
    /** `setData` 函数用于将数据从逻辑层发送到视图层
     *（异步），同时改变对应的 `this.data` 的值（同步）。
     *
     * **注意：**
     *
     * 1. **直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致**。
     * 1. 仅支持设置可 JSON 化的数据。
     * 1. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
     * 1. 请不要把 data 中任何一项的 value 设为 `undefined` ，否则这一项将不被设置并可能遗留一些潜在问题。
     */
    setData(
        /** 这次要改变的数据
         *
         * 以 `key: value` 的形式表示，将 `this.data` 中的 `key` 对应的值改变成 `value`。
         *
         * 其中 `key` 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 `array[2].message`，`a.b.c.d`，并且不需要在 this.data 中预先定义。
         */
        data: Partial<D> & IAnyObject,
        /** setData引起的界面更新渲染完毕后的回调函数，最低基础库： `1.5.0` */
        callback?: () => void
    ): void

    /** 检查组件是否具有 `behavior` （检查时会递归检查被直接或间接引入的所有behavior） */
    hasBehavior(behavior: Behavior.BehaviorIdentifier): void
    /** 触发事件，参见组件事件 */
    triggerEvent<DetailType = any>(
        name: string,
        detail?: DetailType,
        options?: TriggerEventOption
    ): void
    /** 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内 */
    createSelectorQuery(): SelectorQuery
    /** 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内 */
    createIntersectionObserver(
        options: CreateIntersectionObserverOption
    ): IntersectionObserver
    /** 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 `wx://component-export` 影响） */
    selectComponent(selector: string): TrivialInstance
    /** 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组 */
    selectAllComponents(selector: string): TrivialInstance[]
    /**
     * 选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被 `wx://component-export` 影响）
     *
     * 最低基础库版本：[`2.8.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    selectOwnerComponent(): TrivialInstance
    /** 获取这个关系所对应的所有关联节点，参见 组件间关系 */
    getRelationNodes(relationKey: string): TrivialInstance[]
    /**
     * 立刻执行 callback ，其中的多个 setData 之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时 setData 时进行界面绘制同步）
     *
     * 最低基础库版本：[`2.4.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    groupSetData(callback?: () => void): void
    /**
     * 返回当前页面的 custom-tab-bar 的组件实例
     *
     * 最低基础库版本：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    getTabBar(): TrivialInstance
    /**
     * 返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
     *
     * 最低基础库版本：[`2.7.1`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    getPageId(): string
    /**
     * 执行关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
     *
     * 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    animate(
        selector: string,
        keyFrames: KeyFrame[],
        duration: number,
        callback?: () => void
    ): void
    /**
     * 执行关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
     *
     * 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    animate(
        selector: string,
        keyFrames: ScrollTimelineKeyframe[],
        duration: number,
        scrollTimeline: ScrollTimelineOption
    ): void
    /**
     * 清除关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
     *
     * 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    clearAnimation(selector: string, callback: () => void): void
    /**
     * 清除关键帧动画，详见[动画](https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html)
     *
     * 最低基础库版本：[`2.9.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     **/
    clearAnimation(
        selector: string,
        options?: ClearAnimationOptions,
        callback?: () => void
    ): void
    /**
     * 当从另一页面跳转到该页面时，获得与来源页面实例通信当事件通道，详见 [wx.navigateTo]((wx.navigateTo))
     *
     * 最低基础库版本：[`2.7.3`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     */
    getOpenerEventChannel(): EventChannel
    /**
     * 获取更新性能统计信息，详见 [获取更新性能统计信息]((custom-component/update-perf-stat))
     *
     *
     * 最低基础库版本：[`2.12.0`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
     */
    setUpdatePerformanceListener<WithDataPath extends boolean = false>(
        options: SetUpdatePerformanceListenerOption<WithDataPath>,
        callback?: UpdatePerformanceListener<WithDataPath>
    ): void
}

TMethod & (TIsPage extends true ? Page.ILifetime : {})

这个是合并组件的方法 ， 还有如果是页面的话也需要合并生命周期的方法类型

TCustomInstanceProperty

这个类型约束是 type IAnyObject = Record<string, any>， 意味着这里可以声明一些在组件实例上的其他方法

{
    /** 组件数据，**包括内部数据和属性值** */
    data: TData & PropertyOptionToData<TProperty>
    /** 组件数据，**包括内部数据和属性值**（与 `data` 一致） */
    properties: TData & PropertyOptionToData<TProperty>
}

这段代码是合并组件data 和 properties

avatar
文章
阅读
粉丝