如何修复 typescript 中缺少的类型

Question

 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)
  }

What I'm trying to do here is to update the data based on the row number. but on the new it has no ID. but I'm getting an error which is:

Answer 1

We can indicate that an item my not have an id by using a type annotation indicating that it is optional.

First, let's declare a type:

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

The ? on id above indicates that it is an optional property. It may or may not be specified.

Now let's apply it:

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)
}

Notice, that I've snuck in an additional type, in the form of the object literal type { data: Item[] } . This was done because of the nesting of the code in the question. If DATA has only one property, data , I would unwrap it to simplify things.

Then you could write

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

Which is easier to read and to write. Alternately, we can declare a type for the outer object

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: "" }
  ]
}

Lastly, and unrelatedly, we can clean this code up a bit by removing the unecessary forEach .

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

Answer 2

set null on a property id of the variable new .

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

Answer 3

this is probably a case where typescript is forcing you to write better code. I can't think of any reason why you would want to generate data with a null id. Why not something like this:

var id = generateId();
new = { id: id, row: 1, assetType: "1fKBO4w0XHg7H", status: "ACTIVE" };

Answer 4

I suggest to create a type for your object in data and set the type accordingly like below so it will help you hint what you're missing to avoid this kind of confusion:

interface DataType {
 id: string
 row: number
 assetType: string
 status: string
}

DATA: Record<'data', DataType[]> = { data: [
  { id: "1r5WioSdYLVqp", row: 1, assetType: "1r5WioSdYLVqp", status: "" },
  { id: "w1muKlmY4lsR", row: 2, assetType: "w1muKlmY4lsR", status: "" },
  { id: "1foDN2HDHiAbT", row: 3, assetType: "1foDN2HDHiAbT", status: "" }
]} 

new: DataType = { 
  id: 'yourNewId', 
  row: 1, 
  assetType: "1fKBO4w0XHg7H", 
  status: "ACTIVE" 
}