css - 包含 CSS 属性的对象类型

Question

我有一个函数，它接受页面上的一个元素并将 CSS 添加到它的样式属性中。我希望传递给它的参数是一个对象，其中包含 height、minWidth、flexDirection 等键。

function addStyle (el: HTMLElement, style: Style): void {
  for (const property in style) {
    el.style[property] = style[property]
  }
}

我的问题是输入这个对象。自己定义每一个 CSS 属性显然是不可行的。我很确定 TypeScript 应该能够自己做到这一点，我只是不确定如何做。这是我最好的猜测:

type Style = Partial<CSSStyleDeclaration>

...但这会导致错误“Type 'string | undefined' is not assignable to type 'string'”:TypeScript playground

这个特定的错误可以很容易地被覆盖，但我很小心，它表明我做错了什么或不符合直觉。

是否有一种标准方法来键入包含 CSS 属性的对象？

Answer 1

我不认为有做这种事情的好方法，当键入对象上可能存在或不存在的属性时，TypeScript 不会区分存在的属性和包含值 undefined 的属性。 ，并且该属性根本不存在。

例如，忽略样式和其他一切，考虑键入一个可能具有 foo 的对象属性是一个字符串。你不能做 { foo: string }因为该属性可能不存在。你可以做 { foo: string | undefined } .你也可以做 { foo?: string } , 但这种类型与前一种相同。我不认为有任何其他选择:你不能说“这个属性可能存在也可能不存在，但如果它存在，它不包含 undefined 。”

CSSStyleDeclaration 是同一种情况，除了有更多的属性。 Partial<CSSStyleDeclaration>是正确的方法，但不幸的是，由于 TypeScript 不会区分具有包含 undefined 属性的部分类型并且根本没有这些属性，如果处理单个值，则必须断言该值确实存在

但是，还有另一种方法可以绕过必须引用和断言单个值，即使用 Object.assign :

type Style = Partial<CSSStyleDeclaration>;
function addStyle(el: HTMLElement, style: Style) {
    Object.assign(el.style, style);
}

(还请记住，如果 TS 可以自动确定函数的返回类型，则无需指定函数的返回类型 - 读写代码越少通常是一件好事)