javascript - 流式类型转换

Question

我正在尝试编写以下代码行，这些代码应该采用类型对象ClientRect | DOMRect并将其转换为更易于使用的东西。

（ClientRect使用left和top，而DOMRect使用x和y）

type Bounds = {|
  x: number,
  y: number,
  width: number,
  height: number,
|}

function getLocation() => {
  //ref denote a reference to an HTMLElement
  const rect = ref.current ? ref.current.getBoundingClientRect() : ({ height: 0, width: 0, x: 0, y: 0 }: Bounds);
  if(rect.x!==undefined && rect.y!==undefined) {
    return ({
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
    }: Bounds);
  } else {
    return ({
      x: rect.left,
      y: rect.top,
      width: rect.width,
      height: rect.height,
    }: Bounds);
  }
}

在前面的代码中，ref是对一个 HTMLElement 的引用。

getBoundingClientRect()返回一个ClientRect | DOMRect类型定义如下的对象：

interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
}

interface DOMRect extends DOMRectReadOnly {
    height: number;
    width: number;
    x: number;
    y: number;
}

但是使用这段代码，我从流程中得到：

Cannot get `rect.y` because property `y` is missing in `ClientRect`
Cannot cast object literal to `Bounds` because property `x` of unknown type [1] is incompatible with number [2] in property `x`

那么如何创建一个函数，Bounds从返回的对象中给我一个类型的对象getBoundingClientRect()呢？

标签： javascriptreactjsflowtype

Answer 1

Cannot get `rect.y` because property `y` is missing in `ClientRect`

就像错误所说的那样，您需要将 x 和 y 添加到 ClientRect

interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
    x: number,
    y: number
}