Interface-Array von Objekten in TypeScript

Rana Hasnain Khan 21 Juni 2023
Interface-Array von Objekten in TypeScript

Wir werden vorstellen, wie ein Array von Objekten und die verschiedenen Methoden zum Verbinden des Arrays eines Objekts mit Beispielen in TypeScript verbunden werden.

Interface-Array von Objekten in TypeScript

Wir haben eine Schnittstelle für ein Array von Objekten definiert; Wir haben die Schnittstelle für den Typ jedes Objekts erklärt. Setzen Sie das Array auf Type[].

Zum Beispiel:

# typescript
 const arr: Worker[] =[];

Alle dem Array hinzugefügten Objekte müssen dem Typ gehorchen, oder die Typprüfung gibt einen Fehler aus.

# typescript
interface student {
studentId: number;
studentName: string;
}
const arr: Employee[] = [
{ studentId: 1, studentName: 'Maham' },
{ studentId: 2, studentName: 'Maryam' },
];

Im obigen Beispiel wird als Schnittstelle der Typ eines Arrays von Objekten verwendet. Jedes Objekt hat eine Id vom Typ Nummer und einen Namen vom Typ string.

Wir versuchen, einem Array ein Objekt eines anderen Typs hinzuzufügen, wodurch der Typprüfer einen Fehler verursacht.

# typescript
interface Company {
CompanyId: number;
CompanyName: string;
[key: string]: any;
}

Dies kann sehr hilfreich sein, wenn Sie das Array als null zuweisen. Wenn wir ein Null-Array zuweisen, nimmt TypeScript an, dass sein Typ any[] ist.

# typescript
const arr2: Student[] = [
{ StudentId: 1, StudentName: 'Maham' },
{ StudentId: 2, StudentName: 'Maryam', wage: 100 },
];

Aus dem obigen Beispiel wissen wir, dass wir einem Array Elemente jeden Typs hinzufügen könnten, und wir hatten keine Hilfe von der Typprüfung erhalten.

Vielmehr sollten wir den Typ aller Null-Arrays ausdrücken.

# typescript
interface Student {
  StudentId: number;
  StudentName: string;
}
const arr: Student[] = [
  { StudentId: 1, StudentName: 'Maham' },
  { StudentId: 2, StudentName: 'Maryam' },
];
arr.push({ Wage: 100 });

Wir können dem Array arr nur die Objekte hinzufügen, die dem Typ Worker gehorchen.

Angenommen, wir haben nicht vor einiger Zeit die Namen aller Eigenschaften im Objekt. Wir haben eine Index-Signatur in der Schnittstelle verwendet.

# typescript
const worker = [];

Eine Indexsignatur ist nützlich, wenn wir nicht alle Namen der Eigenschaften eines Typs und den Wert der Form im Laufe der Zeit kennen können.

# typescript
interface Worker {
  WorkerId: number;
  WorkerName: string;
}

const arr: Worker[] = [];

Aus dem obigen Beispiel können wir die Indexsignatur {[Schlüssel: Zeichenfolge]: Zeichenfolge} sehen. Es drückte eine Schlüssel-Wert-Struktur aus, die, wenn sie mit einem string indiziert wurde, zum Wert des Typs string zurückkehrte.

Wir wissen auch, dass jedes Element im Array eine id vom Typ number und den name vom Typ string haben wird. Es kann auch andere Eigenschaften haben.

Wobei der Schlüssel eine Zeichenfolge ist und der darin enthaltene Wert von beliebigem Typ sein kann.

Bei diesem Ansatz sollten wir der Schnittstelle ausdrücklich alle Eigenschaften hinzufügen, die wir im Voraus kennen.

Es ist ideal, unsere Verwendung des Typprüfers so weit wie möglich einzuschränken.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Verwandter Artikel - TypeScript Interface