css - 在 Typescript 中定义 CSS Position 接口(interface)的正确方法是什么？

Question

如您所知，有效的 CSS 绝对定位可以通过设置 top left、top right、bottom left 或 bottom 来实现对了。 ( false )

在 Typescript 中反射(reflect)此要求的最佳方式是什么？

这是我的做法:

interface TopLeft {

    top: number,
    left: number

}

interface TopRight {

    top: number,
    right: number

}

interface BottomLeft {

    bottom: number,
    left: number

}

interface BottomRight {

    bottom: number,
    right: number

}


type Position = TopLeft | TopRight | BottomLeft | BottomRight;

注意: 请记住，我使用的是 number 类型而不是 string 类型，因为我总是期望绝对定位以像素为单位的值。

也许有更简单的方法？

Answer 1

As you know, effective CSS absolute positioning can be achieved by setting top left, top right, bottom left or bottom right.

这是一个错误的前提。如果“effective”意味着“有效”，那么无论您指定何种偏移量组合，CSS 都会确保绝对定位有效。如果放弃的元素没有指定这些值(即它们都默认为自动)，it will remain in its static position .如果将这些值中的一个设置为其他值，它将单独朝那个方向偏移。它不“要求”偏移其中两个，它可以使用两个以上，with compensation for overconstrained values where appropriate .

如果您只打算支持 使用 Angular 偏移的绝对定位，您所拥有的就可以了。但是，如果您希望您的 API 与规范尽可能匹配所有可用选项，请通过定义单个接口(interface)来支持所有可能的组合，并将未定义的值转换为 auto 或将它们排除在外(取决于如何您的脚本实际上设置了这些值):

interface CSSPositionOffsets {
    top: number,
    right: number,
    bottom: number,
    left: number
}

type Position = CSSPositionOffsets;