typescript - 如何将类型应用于对象属性名称以便只允许有效的 CSS 属性？

Question

我有一个代表 CSS 的对象：

{
color: "red",
position: "absolute",
display: "none"
}

属性名称颜色、位置、显示等是动态的（可以变化），我将这个对象传递给不同的函数。如何将类型应用于属性名称以确保仅允许有效的 CSS 属性？

标签： typescript

Answer 1

有一个名为CSSStyleDeclarationdefined的接口lib.dom.d.ts，您可以在其中使用。其中的属性都是必需的，所以如果你想要一个子集，你还需要Partial：

let c: Partial<CSSStyleDeclaration> = {
  color: "red",
  position: "absolute",
  display: "none"
  foo: "" // Error
}

游乐场链接