vue3 reactive中的泛型使用

overlay组件定义了ConnectionPosition类，用于设置位置

export type HorizontalConnectionPos = 'left' | 'center' | 'right';
export type VerticalConnectionPos = 'top' | 'center' | 'bottom';

export interface ConnectionPosition {
  originX: HorizontalConnectionPos
  originY: VerticalConnectionPos
  overlayX: HorizontalConnectionPos
  overlayY: VerticalConnectionPos
}
复制代码

但是在父组件使用该组件时碰到了个问题

首先定义position

    const position = reactive({
      originX: 'center', 
      originY: 'center', 
      overlayX: 'center', 
      overlayY: 'center'
    })
复制代码

然后就报了以下错误

简单来说就是传值传的center被解析成了string，然而由于ts的类型兼容保护，也就是string不能赋值给string的子集。

为了解决这个问题，可以使用 as const 定义reactive

    const position = reactive({
      originX: 'center', 
      originY: 'center', 
      overlayX: 'center', 
      overlayY: 'center'
    } as const)
复制代码

查看position，可以看到position里面的属性已经有了明确的类型，满足类型兼容，而不是string类型了

第二个方法就是使用泛型定义reactive

    interface Position<T, K> {
      originX: T
      originY: K, 
      overlayX: T, 
      overlayY: K
    }
    const position: Position<HorizontalConnectionPos, VerticalConnectionPos> = {
      originX: 'center', 
      originY: 'center', 
      overlayX: 'center', 
      overlayY: 'center'
    }
复制代码

这样严格规范了每个属性的参数类型