TS 如何约束一个对象为 CSS 属性？

Question

function setAttrsToElement(el: HTMLElement, attr: Record<string, any>) {
  for (const key in attr) {
    el.setAttribute(key, attr[key])
  }
}

1. 第一个参数是一个element 类型。
2. 第二个参数我想约束为 css 属性。

这个函数接收两个参数，这个函数会遍历第二个参数的 key value 附加给 el 作为属性。

想达到的目的：
在调用这个函数时，代码可以提示自动补全出属性值。

问题补充，在 ts 4.6.4 下

Answer 1

如果是在 React 项目中最方便的方式是使用 React 提供 CSSProperties 类型：

import { CSSProperties } from "react";

function setAttrsToElement(el: HTMLElement, attr: CSSProperties) {
    for (const key in attr) {
        el.setAttribute(key, attr[key]);
    }
}

如果不是 React 项目，则可以安装 csstype 库：

import * as CSS from 'csstype';

function setAttrsToElement(el: HTMLElement, attr: CSS.Properties) {
    for (const key in attr) {
        el.setAttribute(key, attr[key]);
    }
}

Answer 2

如果按照提问来看 这是答案

  public setAttrsToElement<T = CSSStyleDeclaration>(el: HTMLElement, attr: T) {
    for (const key in attr) {
      el.setAttribute(key, attr[key] as string);
    }
  }

但是按照题意来看 应该这样

public setAttrsToElement(el: HTMLElement, attr: Partial<CSSStyleDeclaration>) {
   for (const key in attr) {
     el.style[key] = attr[key] as string;
   }
 }