TypeScript动态设置表格th样式时隐式any类型错误解决咨询

各位好，我正在尝试为表格th元素编写一个动态添加样式的函数：

type headerStyles = { textAlign: string; backgroundColor?: string };

const exampleData:[string, {
    textAlign: string;
    backgroundColor?: string;
}] = [
['header text1', { textAlign: 'left' }],
['header text2', { textAlign: 'center' }],
['header text3', { textAlign: 'left', backgroundColor: '#ddd' }],
['header text4', { textAlign: 'left' }]
]

const renderHeader = (headers: [string, headerStyles][]) => {
  const head = document.createElement('thead');
  const row = document.createElement('tr');
  headers.forEach(headerProps => {
    const th = document.createElement('th');
    const styles = headerProps[1];

    Object.keys(styles).forEach(prop => {
      th.style[prop] = styles[prop]; // <--- 元素隐式拥有'any'类型，因为'string'类型的表达式不能用于索引'headerStyles'类型
    });
  });
  ...
};

我尝试过[prop as keyof typeof styles]的写法，但由于部分键可能未定义（比如backgroundColor），该方法无效。也尝试添加if (prop !== undefined)判断，同样没有效果。还试过[key:string]类型声明，还是因为键可能未定义而无法解决问题。有没有办法可以不用在数据对象中添加大量空的'backgroundColor'键来解决这个问题？

解决方案 #

1. 类型断言+值存在性检查

先把prop断言为headerStyles的合法键，再检查对应值是否存在，避免赋值undefined：

Object.keys(styles).forEach(prop => {
  const styleKey = prop as keyof headerStyles;
  const styleValue = styles[styleKey];
  if (styleValue !== undefined) {
    th.style[styleKey] = styleValue;
  }
});

2. 用Object.entries遍历键值对

直接遍历键值对，天然过滤未定义属性，同时给属性做合法CSS样式断言：

Object.entries(styles).forEach(([prop, value]) => {
  if (value !== undefined) {
    th.style[prop as keyof CSSStyleDeclaration] = value;
  }
});

3. 自定义类型守卫（更严谨）

通过类型守卫确保遍历的键是headerStyles的有效键，再做值检查：

function isValidHeaderStyleProp(prop: string): prop is keyof headerStyles {
  return ['textAlign', 'backgroundColor'].includes(prop);
}

Object.keys(styles).forEach(prop => {
  if (isValidHeaderStyleProp(prop)) {
    const value = styles[prop];
    if (value !== undefined) {
      th.style[prop] = value;
    }
  }
});

以上三种方法都无需给数据对象添加空的backgroundColor键，同时解决TypeScript类型错误。

内容的提问来源于stack exchange，提问作者Little_bugfixer