typescript中行内样式的类型定义是？

Question

const oDiv: HTMLElement | null = document.getElementBy('app');

// 此处的类型应该是? CSSStyleDeclaration不对...
const oDivStyle = { color: 'red' };

oDiv.style = oDivStyle;

然后想请教下大佬们。在webstorm里怎么查这些类型。。。vscode里可以查到。但是webstorm貌似就没有这个类型提示

Answer 1

1.document下没有getElementBy方法

2.你可能期待的代码为

        const oDiv: HTMLElement | null = document.getElementById('app');
        const xxx: CSSStyleDeclaration = oDiv.style;
        xxx.color = 'red';

1. webstorm中，你没有直接能定位到这个属性的类型的原因，也应该是由于原因1引起的。
2. 你上面这种写法可能是不对的

// 此处的类型应该是? CSSStyleDeclaration不对...
const oDivStyle = { color: 'red' };

// 在这oDivStyle需要实现CSSStyleDeclaration接口才行。而oDivStyle只实现了该接口的1个属性。我简单看了下CSSStyleDeclaration这个接口，有些属性应该是不能省略的。
oDiv.style = oDivStyle; 

Answer 2

使用 react 的 CSSProperties 可以直接传递 css style

import React, {CSSProperties } from 'react';

export interface option {
 customStyle?: CSSProperties;
}

<div style={customStyle}>
......
</div>

Answer 3

const oDiv: HTMLElement | null = document.getElementById('app');
const oDivStyle = { color: 'red' };

Object.assign(oDiv.style, oDivStyle)

style 是 HTMLElement 的只读属性，本身是不能赋值的，但你可以 Object.assign 改变 style 内的属性值.