英文:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type (key of forEach)

问题 {#heading}

以下是您要翻译的内容：

缺失的headerStyles类型已更新

大家好。我一直在尝试为表格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]; // <--- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'headerStyles'
        });
    });
    ...
};

我尝试过从这里分配[prop as keyof typeof styles]，但由于某些键可能未定义（例如backgroundColor），它并没有帮助。

我尝试添加if (prop !== undefined)检查，这也没有帮助。

我尝试分配[key: string]类型链接，然而，键可能是未定义的。

是否有办法可以在不添加大量空的'backgroundColor'键到数据对象的情况下解决这个问题？英文:

Updated with missing headerStyles type

Good day everyone. I've been trying to create a dynamic style adding function for table th elements:

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

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



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

    Object.keys(styles).forEach(prop =&gt; {
      th.style[prop] = styles[prop]; // &lt;--- Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;headerStyles&#39;
    });
  });
  ...
};

I've tried assigning [prop as keyof typeof styles] from here, however it didn't help since some keys might be undefined (like backgroundColor).

Tried adding if (prop !== undefined) check, which also didn't help.

Tried assigning [key:string] type link, however again, key might be undefined.

Is there any way without adding a bunch of empty 'backgroundColor keys in data object?

答案1 {#1}

得分: 0

以下是代码的翻译部分：

type HeaderStyles = {
textAlign: string;
backgroundColor?: string;
}
const exampleData: [string, HeaderStyles][] = [
['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) as Array<keyof HeaderStyles>).forEach(prop => {
const style = styles[prop];
if (style) {
th.style[prop] = style; // &lt;--- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'headerStyles'
}
});
});
};

这是你提供的代码的中文翻译部分。英文:

Here's one way about it -

type HeaderStyles = {
textAlign: string;
backgroundColor?: string;
}
const exampleData: [string, HeaderStyles][] = [
[&#39;header text1&#39;, { textAlign: &#39;left&#39; }],
[&#39;header text2&#39;, { textAlign: &#39;center&#39; }],
[&#39;header text3&#39;, { textAlign: &#39;left&#39;, backgroundColor: &#39;#ddd&#39; }],
[&#39;header text4&#39;, { textAlign: &#39;left&#39; }]
]
const renderHeader = (headers: [string, HeaderStyles][]) =&gt; {
const head = document.createElement(&#39;thead&#39;);
const row = document.createElement(&#39;tr&#39;);
headers.forEach(headerProps =&gt; {
const th = document.createElement(&#39;th&#39;);
const styles = headerProps[1];
(Object.keys(styles) as Array&lt;keyof HeaderStyles&gt;).forEach(prop =&gt; {
const style = styles[prop];
if (style) {
th.style[prop] = style; // &lt;--- Element implicitly has an &#39;any&#39; type because expression of type &#39;string&#39; can&#39;t be used to index type &#39;headerStyles&#39;
}
});
});
};

Here's a playground link.