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

huangapple
go评论149阅读模式
英文:

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

问题

以下是您要翻译的内容：

缺失的headerStyles类型已更新

大家好。我一直在尝试为表格th元素创建一个动态添加样式的函数：

  1. type headerStyles = { textAlign: string; backgroundColor?: string };
  3. const exampleData:[string, {
  4.     textAlign: string;
  5.     backgroundColor?: string;
  6. }] = [
  7.     ['header text1', { textAlign: 'left' }],
  8.     ['header text2', { textAlign: 'center' }],
  9.     ['header text3', { textAlign: 'left', backgroundColor: '#ddd' }],
  10.     ['header text4', { textAlign: 'left' }]
  11. ]
  13. const renderHeader = (headers: [string, headerStyles][]) => {
  14.     const head = document.createElement('thead');
  15.     const row = document.createElement('tr');
  16.     headers.forEach(headerProps => {
  17.         const th = document.createElement('th');
  18.         const styles = headerProps[1];
  20.         Object.keys(styles).forEach(prop => {
  21.             th.style[prop] = styles[prop]; // <--- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'headerStyles'
  22.         });
  23.     });
  24.     ...
  25. };

我尝试过从这里分配[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:

  2. type headerStyles = { textAlign: string; backgroundColor?: string };
  4. const exampleData:[string, {
  5.     textAlign: string;
  6.     backgroundColor?: string;
  7. }] = [
  8. [&#39;header text1&#39;, { textAlign: &#39;left&#39; }],
  9. [&#39;header text2&#39;, { textAlign: &#39;center&#39; }]
  10. [&#39;header text3&#39;, { textAlign: &#39;left&#39;, backgroundColor: &#39;#ddd&#39; }]
  11. [&#39;header text4&#39;, { textAlign: &#39;left&#39; }]
  12. ]
  16. const renderHeader = (headers: [string, headerStyles][]) =&gt; {
  17.   const head = document.createElement(&#39;thead&#39;);
  18.   const row = document.createElement(&#39;tr&#39;);
  19.   headers.forEach(headerProps =&gt; {
  20.     const th = document.createElement(&#39;th&#39;);
  21.     const styles = headerProps[1];
  23.     Object.keys(styles).forEach(prop =&gt; {
  24.       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;
  25.     });
  26.   });
  27.   ...
  28. };

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 &#39;backgroundColor keys in data object?

答案1

得分: 0

以下是代码的翻译部分：

  1. type HeaderStyles = {
  2. textAlign: string;
  3. backgroundColor?: string;
  4. }
  5. const exampleData: [string, HeaderStyles][] = [
  6. ['header text1', { textAlign: 'left' }],
  7. ['header text2', { textAlign: 'center' }],
  8. ['header text3', { textAlign: 'left', backgroundColor: '#ddd' }],
  9. ['header text4', { textAlign: 'left' }]
  10. ]
  11. const renderHeader = (headers: [string, HeaderStyles][]) => {
  12. const head = document.createElement('thead');
  13. const row = document.createElement('tr');
  14. headers.forEach(headerProps => {
  15. const th = document.createElement('th');
  16. const styles = headerProps[1];
  17. (Object.keys(styles) as Array<keyof HeaderStyles>).forEach(prop => {
  18. const style = styles[prop];
  19. if (style) {
  20. th.style[prop] = style; // &lt;--- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'headerStyles'
  21. }
  22. });
  23. });
  24. };

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

英文:

Here's one way about it -

  1. type HeaderStyles = {
  2. textAlign: string;
  3. backgroundColor?: string;
  4. }
  5. const exampleData: [string, HeaderStyles][] = [
  6. [&#39;header text1&#39;, { textAlign: &#39;left&#39; }],
  7. [&#39;header text2&#39;, { textAlign: &#39;center&#39; }],
  8. [&#39;header text3&#39;, { textAlign: &#39;left&#39;, backgroundColor: &#39;#ddd&#39; }],
  9. [&#39;header text4&#39;, { textAlign: &#39;left&#39; }]
  10. ]
  11. const renderHeader = (headers: [string, HeaderStyles][]) =&gt; {
  12. const head = document.createElement(&#39;thead&#39;);
  13. const row = document.createElement(&#39;tr&#39;);
  14. headers.forEach(headerProps =&gt; {
  15. const th = document.createElement(&#39;th&#39;);
  16. const styles = headerProps[1];
  17. (Object.keys(styles) as Array&lt;keyof HeaderStyles&gt;).forEach(prop =&gt; {
  18. const style = styles[prop];
  19. if (style) {
  20. 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;
  21. }
  22. });
  23. });
  24. };

Here's a playground link.

huangapple
  • 本文由 发表于 2023年8月10日 14:28:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76873114.html
  • css
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定