如何在打字稿中插入接口数组的特定索引？

Question

我有一个angular(typescript)应用程序，其中有一个类似的界面

export interface PartnerCnic{
id: string;
shipperRegCnicFront: File;
shipperRegCnicBack: File;
}

在我的组件中，我有一个类似的数组

partnerCnics: PartnerCnic[] = [];

现在我想插入这个接口数组的不存在的索引。因为最初我的this数组将为空。然后我有fileUpload函数，每次用户选择file时，我的fileUpload函数都会调用，我正试图执行这个

fileUpload(index: number, key: string, dropFile: File){
this.partnerCnics[index][key] = dropFile;
}

但当这个函数被排除时，它会给我一个类似的错误

Cannot set property 'shipperRegCnicFront' of undefined

那么，如何在typescript中的接口数组的特定索引上插入值呢？

Answer 1

如果是插入空数组(partnerCnics(，我认为你需要先插入这个安排。

像这样.partnerCnics.push(｛''，null，null｝(；之后.文件上传

Answer 2

我使用这个实现了这一点

if (this.partnerCnics[index]) {
this.partnerCnics[index][key] = dropFile;
} else {
this.partnerCnics.push({
shipperRegCnicFront: key === 'shipperRegCnicFront' ? dropFile : null,
shipperRegCnicBack: key === 'shipperRegCnicBack' ? dropFile : null,
})
}

在这篇文章中，我首先检查是否存在索引，如果存在索引，那么我直接插入vlaue，如果不存在，我使用.push插入值。

Answer 3

您不能设置partnerCnics[index][key] = yourVariable，因为这可能会违背您定义的接口。请参见以下示例。

interface PartnerCnic {
id: string;
shipperRegCnicFront: string;
shipperRegCnicBack: string;
}
let partnerCnics: PartnerCnic[] = [{id: '1', shipperRegCnicFront: 'aa', shipperRegCnicBack: 'zz'}];
type PartnerCnicType = keyof PartnerCnic;
// OR
// type PartnerCnicType = 'shipperRegCnicFront' | 'shipperRegCnicBack';
function fileUpload(index: number, key: PartnerCnicType, dropFile: string)
{
partnerCnics[index][key] = dropFile;
}
fileUpload(0, 'shipperRegCnicFront', 'test');

注意：为了这个示例，我已将File更改为string。你可以保留它当然是档案。

你也可以在这里有索引超出范围的问题。无论是在数组中插入还是确保更新数组中的现有对象，都必须更改fileUpload函数中的逻辑。例如

if (this.partnerCnics[index]) 
{
this.partnerCnics[index][key] = dropFile;
}
else 
{
let partnerNic: PartnerCnic = {} as PartnerCnic;
partnerNic[key] = dropFile;
this.partnerCnics.push(partnerNic);
}