javascript - hur man fixar den saknade typen i typescript

 DATA = {
    data: [
      { id: "1r5WioSdYLVqp", row: 1, assetType: "1r5WioSdYLVqp", status: "" },
      { id: "w1muKlmY4lsR", row: 2, assetType: "w1muKlmY4lsR", status: "" },
      { id: "1foDN2HDHiAbT", row: 3, assetType: "1foDN2HDHiAbT", status: "" }
    ]
  };

  new = { row: 1, assetType: "1fKBO4w0XHg7H", status: "ACTIVE" }
  constructor() { }

  ngOnInit() {
    console.log(this.DATA);

    this.DATA['data'].forEach((dt, index) => {
      if (dt.row === this.new.row) {
        this.DATA['data'][index] = this.new;
      }
    });

    console.log(this.DATA)
  }

Det jag försöker göra här är att uppdatera datan baserat på radnummer. men på den nya finns det inget ID. men jag får ett fel som är:

Svar #1

Vi kan ange att ett objekt kanske inte har ett id genom att använda en typnotering som visar att det är valfritt.

Först, låt oss deklarera en typ:

interface Item {
  id?: string;
  row: number;
  assetType: string;
  status: string;
}

? på id ovan indikerar att det är en valfri egenskap. Den kan anges eller inte anges.

Nu låt oss tillämpa det:

DATA: { data: Item[] } = {
  data: [
    { id: "1r5WioSdYLVqp", row: 1, assetType: "1r5WioSdYLVqp", status: "" },
    { id: "w1muKlmY4lsR", row: 2, assetType: "w1muKlmY4lsR", status: "" },
    { id: "1foDN2HDHiAbT", row: 3, assetType: "1foDN2HDHiAbT", status: "" }
  ]
};

new = { row: 1, assetType: "1fKBO4w0XHg7H", status: "ACTIVE" }
constructor() { }

ngOnInit() {
  console.log(this.DATA);

  this.DATA.data.forEach((dt, index) => {
    if (dt.row === this.new.row) {
      this.DATA.data[index] = this.new; // no error.
    }
  });

  console.log(this.DATA)
}

Observera att jag har smugit in en ytterligare typ, i form av objektliteraltypen { data: Item[] }. Detta gjordes på grund av inbäddningen av koden i frågan. Om DATA bara har en egenskap, data, skulle jag packa upp den för att förenkla saker.

Då skulle du kunna skriva

data: Item[] = [
  { id: "1r5WioSdYLVqp", row: 1, assetType: "1r5WioSdYLVqp", status: "" },
  { id: "w1muKlmY4lsR", row: 2, assetType: "w1muKlmY4lsR", status: "" },
  { id: "1foDN2HDHiAbT", row: 3, assetType: "1foDN2HDHiAbT", status: "" }
]

Vilket är lättare att läsa och skriva. Alternativt kan vi deklarera en typ för det yttre objektet

interface DataWrapper {
  data: Item[];
}

DATA: DataWrapper = {
  data: [
    { id: "1r5WioSdYLVqp", row: 1, assetType: "1r5WioSdYLVqp", status: "" },
    { id: "w1muKlmY4lsR", row: 2, assetType: "w1muKlmY4lsR", status: "" },
    { id: "1foDN2HDHiAbT", row: 3, assetType: "1foDN2HDHiAbT", status: "" }
  ]
}

Slutligen, och utan samband, kan vi rensa upp den här koden lite genom att ta bort den onödiga forEach.

const index = this.DATA.data.findIndex(({row}) => row === this.new.row);
if (index !== -1) {
  this.DATA.data[index] = this.new;
}

Svar #2

sätt null på en egenskap id av variabeln new.

  new = { id: null, row: 1, assetType: "1fKBO4w0XHg7H", status: "ACTIVE" }