英文:
TS18048: '' is possibly 'undefined'
问题
我正在使用TypeScript，但是我遇到了一个错误"TS18048：'record.childList1' 可能为 'undefined'。"，我猜这是因为CheckListItemVO中的childList1是可选的。我尝试了以下两种写法：
record.childList1[0]?.pciName(record.childList1[0] as CheckListItemChildVO).pciName
但仍然出现相同的错误。
这是我的代码：
<Table.Column
key='childList1'
dataIndex='childList1'
title={<div style={{ textAlign: 'center' }}>standard</div>}
render={(text, record: CheckListItemVOExtender) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<p style={{ whiteSpace: 'pre-wrap' }}>{record.childList1[0]?.pciName}</p>
</div>)}
/>
type CheckListItemVOExtender = CheckListItemVO & {
sparPoint: string | number;
};
export type CheckListItemVO = CCheckListItem & {
childList1?: CheckListItemChildVO[];
}
export type CCheckListItem = {
pciName?: string;
}
大多数情况下，当我遇到这种错误时，我会使用可选标记或在末尾使用"as Type"（就像第二种方法一样），但在这种情况下不起作用。是否有人可以帮助？
英文:
I am using TypeScript, but I got an error "TS18048: 'record.childList1' is possibly 'undefined'.", which I guess it caused due to childList1 was optional in CheckListItemVO. I tried to write
- record.childList1[0]?.pciName
- (record.childList1[0] as CheckListItemChildVO).pciName
but sill get the same error.
Here is my code
<Table.Column
key='childList1'
dataIndex='childList1'
title={<div style={{ textAlign: 'center' }}>standard</div>}
render={(text, record: CheckListItemVOExtender) => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<p style={{ whiteSpace: 'pre-wrap' }}>{record.childList1[0].pciName}</p>
</div>)}
/>
type CheckListItemVOExtender = CheckListItemVO & {
sparPoint: string | number;
};
export type CheckListItemVO = CCheckListItem & {
childList1?:CheckListItemChildVO[];
}
export type CCheckListItem = {
pciName?:string;
}
Most of time, when I get the error, I put optional mark or did put "as Type" at the end (like second method), but it did not work in this case.
Could anyone help?
答案1
得分: 1
请查看表达式的可选链接。
您还可以使用可选链接运算符与方括号表示法一起使用，允许将表达式作为属性名称传递
...
这对于数组特别有用，因为必须使用方括号来访问数组索引。
安全的语法如下...
record.childList1?.[0]?.pciName
- 第一个
?.[0]用于因为childList1可能为未定义。 - 第二个
?.pciName用于即使childList1是数组，它也可能为空，而[0]也可能为未定义。
但如果您只对第一个元素感兴趣，为什么 childList1 是一个数组呢？
通常，要迭代数组，例如
<div style={{ display: 'flex', flexDirection: 'column' }}>
{record.childList1?.map(({ pciName }, index) => (
<p key={index} style={{ whiteSpace: 'pre-wrap' }}>
{pciName}
</p>
))}
</div>
英文:
See Optional chaining with expressions.
> You can also use the optional chaining operator with bracket notation, which allows passing an expression as the property name
> ...
> This is particularly useful for arrays, since array indices must be accessed with brackets
The safe syntax would be...
record.childList1?.[0]?.pciName
- The first
?.[0]is used becausechildList1may be undefined. - The second
?.pciNameis used because even ifchildList1is an array, it may be empty and[0]could also be undefined.
But why is childList1 an array if you're only interested in the first element?
It's typical to iterate arrays, for example
<div style={{ display: 'flex', flexDirection: 'column' }}>
{record.childList1?.map(({ pciName }, index) => (
<p key={index} style={{ whiteSpace: 'pre-wrap' }}>
{pciName}
</p>
))}
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论