英文:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type (key of forEach)
问题
以下是您要翻译的内容：
缺失的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;
}] = [
['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'
});
});
...
};
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
得分: 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; // <--- 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][] = [
['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; // <--- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'headerStyles'
}
});
});
};
Here's a playground link.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论