Fatal编程技术网

Javascript 带流的类型转换

javascript reactjs

Javascript 带流的类型转换,javascript,reactjs,flowtype,Javascript,Reactjs,Flowtype,我正在尝试编写以下代码行，这些代码应该采用ClientRect | DOMRect类型的对象，并将其转换为更易于使用的对象 （ClientRect使用left和top，而DOMRect使用x和y） 在前面的代码中，ref是对HTMLElement的引用 getBoundingClientRect（）返回类型为ClientRect | DOMRect的对象，其类型定义如下： interface ClientRect { bottom: number; readonly height

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

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

在前面的代码中，
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;
}
但有了这段代码，我从flow中得到：

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`
那么，如何创建一个函数，从
getBoundingClientRect（）
返回的对象中为我提供类型为
Bounds
的对象呢

正如错误所说，您需要将x和y添加到ClientRect

interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
    x: number,
    y: number
}
正如错误所说，您需要将x和y添加到ClientRect

interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
    x: number,
    y: number
}
使用
top
代替
y
和
left
代替
x
。我认为
top
在大多数浏览器中都有更高的可用性。Chrome支持
y
和
top
，但其他浏览器可能不支持。这就是为什么
top
最受支持的原因，跨浏览器支持
y

使用
top
而不是
y
和
left
而不是
x
。我认为
top
在大多数浏览器中都有更高的可用性。Chrome支持
y
和
top
，但其他浏览器可能不支持。这就是为什么
top
最受支持的原因，跨浏览器支持
y

如果
ref.current
是
HTMLElement
，那么
getBoundingClientRect
应该根据返回
ClientRect
。你在使用一些自定义类型吗？这很奇怪。。。我正在使用“流动箱”：“^0.102.0-rc”。也许这只是我的VSCode集成的flow使用了一个过时的版本。但是，除了这种特殊情况之外，你如何处理这种情况呢？操纵a | B对象时，如何访问类型的道具？检查
rect.x==未定义的
还不够？请查看文档中的“不相交的并集”和“具有确切类型的不相交的并集”部分。两种对象类型
A
和
B
之间的细化将取决于
A
和
B
是否精确，以及两者之间共享哪些属性（如果有的话）。我阅读了这一部分，这就是为什么我要检查：
rect.x==在我的代码中未定义
，希望它能改进类型。但是为什么它在这里不起作用呢？如果不是这样的话，我看不到一个……好吧，我最终成功了。我只需要更改
rect.top的测试==未定义
并交换条件以使精炼工作。感谢您给我指明了正确的方向。如果
ref.current
是
HTMLElement
，则
getBoundingClientRect
应根据返回
ClientRect
。你在使用一些自定义类型吗？这很奇怪。。。我正在使用“流动箱”：“^0.102.0-rc”。也许这只是我的VSCode集成的flow使用了一个过时的版本。但是，除了这种特殊情况之外，你如何处理这种情况呢？操纵a | B对象时，如何访问类型的道具？检查
rect.x==未定义的
还不够？请查看文档中的“不相交的并集”和“具有确切类型的不相交的并集”部分。两种对象类型
A
和
B
之间的细化将取决于
A
和
B
是否精确，以及两者之间共享哪些属性（如果有的话）。我阅读了这一部分，这就是为什么我要检查：
rect.x==在我的代码中未定义
，希望它能改进类型。但是为什么它在这里不起作用呢？如果不是这样的话，我看不到一个……好吧，我最终成功了。我只需要更改
rect.top的测试==未定义
并交换条件以使精炼工作。谢谢你告诉我正确的方向。但是。。。ClientRect类型来自react代码，如getBoundingClientRect。。。我无法控制它…创建一个新接口扩展ClientRect，但
getBoundingClientRect
仍将返回ClientRect的实例，而不是我新创建的接口的实例。但是。。。ClientRect类型来自react代码，如getBoundingClientRect。。。我无法控制它…创建一个新接口扩展ClientRect，但
getBoundingClientRect
仍将返回ClientRect的实例，而不是我新创建的接口的实例。 
interface ClientRect {
    bottom: number;
    readonly height: number;
    left: number;
    right: number;
    top: number;
    readonly width: number;
    x: number,
    y: number
}