typescript中的css object类型

Question

在ts中写css对象属性时，不知道该使用哪种类型去校验

const styleObj: ??? = {
    width: '300px'
    transForm: 'translateX(10px)'
}

代码中的问号该写哪种内置类型，才能让属性名称（width， transForm）有提示，现在一直写的any，感觉不太对

Answer 1

• CSSStyleDeclaration

let c: CSSStyleDeclaration = {
    width: "300px",
    transform: "translateX(10px)",
    backgroundColor: "darkgray"
};

Answer 2

强烈推荐 使用 csstype, React内部就是使用的这个。

Answer 3

使用ts的类型工具Partial，将指定的类型中所有属性都设为可选

const styleObj: Partial<CSSStyleDeclaration> = {
    width: '300px'
    transForm: 'translateX(10px)'
}

就不会有类似下面的报错了

Type '{...}' is missing the following properties from type 'CSSStyleDeclaration': alignContent, alignItems, alignSelf, alignmentBaseline, and 385 more.

Answer 4

刚入门TS不久, 写一下自己的见解做参考。

虽然内容是类似于CSS属性, 但从声明上看是对象结构, 自定义类型可以选择TS的interface接口写法, 设置公共接口声明Class用来保证编辑器会提示对应内容, 同时使用时会按接口定义的格式校验。
对于内部每个属性如果需要指定类型, 可以使用泛型来做处理, 高阶泛型我还没有掌握, 这里就不过多说明了, 教程还是很多的。

Answer 5

const styleObj: {width: string, transForm: string} = {
    width: '300px',
    transForm: 'translateX(10px)'
}