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

作者站长头像
站长
· 阅读数 6
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 下

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

回复
1个回答
avatar
test
2024-06-26

如果是在 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 image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容