题外-如何使用typescript重构组件

需要长远考虑，独立组件，并不依赖页面

组件的分类

• 通用UI组件
  不论在何种项目中，都可以被复用的UI组件。比如写一个npm头像组件，这就属于通用UI组件。
• 业务UI组件
  业务UI组件应承担展示业务中的UI表现的部分，但是不执行业务逻辑。其将具体的业务逻辑通过触发事件或接受属性的方式交给业务容器组件去处理。
• 业务容器组件
  存在于业务组件和页面/其他业务容器罪案之间，其负责处理业务逻辑。一般需要在不同业务间复用的组件经常会需要业务容器组件，因为UI虽然可能大致相同，但具体业务逻辑并不相同，所以需要一个业务容器组件来适配不同的页面间对UI和业务的需求。

思考清楚重写组件的原因

当我们决定要去重写一个组件都是有一定的原因的，要么是这个页面代码冗余多、重复CV一段代码导致我们重写。大致的原因都是因为：重复代码-------相似的逻辑、相似的样式。

如何写

抽象出相似，暴露出不同

• 分析组件所需数据解构，mock所需数据
• 新建一个测试页，在测试页引入组件，在测试页当中把组件的wxml、scss完成，并且把组件的基本功能完成（不要依赖原页面干扰）要把组件独立出来。
• 实现组件的功能之后再拿到真正的页面上替换，去测试。

结合自己项目技术，我们项目主要是原生小程序，在小程序方法triggerEvent中，触发一个事件的方式为传入事件名，事件数据和事件配置。但是如果只依赖这种方式会需要在WXML文件中绑定很多的event handler

<Demo
  bind:event1="onEvent1"
  bind:event2="onEvent2"
  bind:event3="onEvent3"
  bind:event4="onEvent4"
  bind:event5="onEvent5"
/>

为了减少绑定事件的数量，将事件分为交互事件。
例如有一个叫做Demo的组件，其需要触发交互事件，则需要写4个type，分别是：

• 此组件的交互事件类型
• 此组件的event.detail条件类型
• 在页面中使用的event.detail的联合类型
• 在页面中使用的event handler的类型

// 假设此组件名为 Demo
// 此组件的交互事件类型
export type DemoClickEventType = 'event1' | 'event2' | 'event3';


// 此组件的 event.detail 条件类型
export type DemoClickEventTrigger<T extends DemoClickEventType> = XDK.EventTrigger<
  T,
  T extends 'event1'
    ? {
        eventValue?: boolean;
      }
    : T extends 'event2'
    ? {
        eventValue?: number;
      }
    : XDK.DefaultEventContent
>;

// 在页面中使用的 event.detail 的联合类型
export type DemoClickEvent = XDK.Event<
    | DemoClickEventTrigger<DemoClickEventType>
    | DemoClickEventTrigger<'event1'>
    | DemoClickEventTrigger<'event2'>
>;
    
// 在页面中使用的 event handler 的类型
export type DemoClickEventHandler = {
    [key in DemoClickEventType]: XDK.EventHandler<DemoClickEventTrigger<key>['content']>;
};