javascript - 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 作为属性。

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

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;   } }