# TypeScript: Arrays erstellen und manipulieren

Die statische Typisierung ermöglicht es dem **TypeScript-Compiler**, den Datentyp der Array-Elemente zu überwachen. Dadurch reduzieren TypeScript Arrays die Fehleranfälligkeit in Ihrem Code, sodass Sie sichere und zuverlässigere Anwendungen entwickeln können.

## Was sind TypeScript Arrays?

In TypeScript sind Arrays **geordnete Listen von Werten**. Wie in JavaScript können Sie in TypeScript Arrays verwenden, um eine Sammlung von Elementen zu speichern. Diese Elemente dürfen verschiedene Datentypen haben, einschließlich Zahlen, Zeichenketten, Objekte oder anderer Arrays. [TypeScript](https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/typescript/) bietet den Vorteil, dass es statische Typisierung unterstützt, was bedeutet, dass Sie den Datentyp der Elemente in einem Array festlegen können. Das verbessert die Fehlererkennung bei der Entwicklung.

Eine entscheidende Eigenschaft von Arrays ist ihre dynamische Größe. So können Sie Elemente hinzufügen oder entfernen, ohne im Voraus die Größe bestimmen zu müssen. In TypeScript sind Arrays standardmäßig veränderbar. Sie können aber **unveränderliche (immutable) Arrays** erstellen, indem Sie Array-Methoden wie `map` und `filter` verwenden, um neue Arrays basierend auf bestehenden Arrays zu erstellen. Arrays erleichtern das Filtern, Sortieren und die Iteration über Elemente und bieten eine konsistente Struktur zur Datenorganisation.

Darüber hinaus können TypeScript Arrays als Grundlage für die Implementierung von Datenstrukturen wie Stapeln (LIFO – Last-In-First-Out) und Warteschlangen (FIFO – First-In-First-Out) dienen. Sie eignen sich auch zur **Repräsentation von Listen, Tabellen und Sammlungen** in einer Vielzahl von Anwendungen. Durch die einfache Verwaltung von Elementen desselben Typs sind Arrays besonders nützlich beim Verarbeiten von Daten aus externen Quellen, sei es von APIs oder Datenbanken.

## Das ist die Syntax von TypeScript Arrays

In TypeScript werden Arrays mit den Schlüsselwörtern `let`, `const` oder `var` gefolgt von einem Variablennamen und einer **Datentyp-Angabe** deklariert. Die Erklärung des Datentyps erfolgt mit einem Doppelpunkt und gibt an, welchen Datentyp die Elemente im Array haben sollen. Diese Elemente werden in eckigen Klammern und durch Kommas getrennt in einem Array-Initialisierungsblock platziert.

Die allgemeine Syntax für die Deklaration eines TypeScript Arrays sieht wie folgt aus:

```typescript
const variableName: datatype[] = [element1, element2, ...];
```

- **variableName** ist der von Ihnen gewählte Name für das Array.
- **datatype** gibt an, welchen Datentyp die Elemente im Array haben sollen.
- **\[element1, element2, …\]** sind die tatsächlichen Elemente oder Werte, die im Array gespeichert werden sollen. Diese Elemente sollten den zuvor definierten Datentyp besitzen.

Hier sind Beispiele zur Veranschaulichung der Syntax:

```typescript
// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];
```

## TypeScript-Array-Methoden

TypeScript-Array-Methoden sind äußerst nützlich und leistungsstark, da sie Ihnen erlauben, Daten in Arrays auf effiziente Weise **zu verarbeiten, zu transformieren und zu organisieren**. Die folgende Tabelle gibt Ihnen einen Überblick über gängige Array-Methoden in TypeScript und ihre Anwendungsbereiche.

<table>
  <thead>
    <tr>
      <th>Methode</th>
      <th>Beschreibung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`push()`</td>
      <td>Fügt ein oder mehrere Elemente am Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück.</td>
    </tr>
    <tr>
      <td>`pop()`</td>
      <td>Entfernt das letzte Element aus dem Array und gibt dieses zurück.</td>
    </tr>
    <tr>
      <td>`unshift()`</td>
      <td>Fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge des Arrays zurück.</td>
    </tr>
    <tr>
      <td>`shift()`</td>
      <td>Entfernt das erste Element aus dem Array und gibt dieses zurück.</td>
    </tr>
    <tr>
      <td>`concat()`</td>
      <td>Kombiniert das aktuelle Array mit einem oder mehreren anderen Arrays und gibt ein neues Array zurück. Das ursprüngliche Array bleibt unverändert.</td>
    </tr>
    <tr>
      <td>`join(separator)`</td>
      <td>Wandelt die Elemente des Arrays in eine Zeichenkette um und gibt sie zurück, wobei Sie ein Trennzeichen für die Elemente wählen können.</td>
    </tr>
    <tr>
      <td>`slice(start, end)`</td>
      <td>Erstellt eine flache Kopie des Arrays, die aus den Elementen zwischen den angegebenen Indizes `start` (inklusive) und `end` (exklusive) besteht. Das ursprüngliche Array bleibt unverändert.</td>
    </tr>
    <tr>
      <td>`splice(start, deleteCount, element1, element2, ...)`</td>
      <td>Fügt neue Elemente an der angegebenen Position ein und/oder entfernt Elemente aus dem Array.</td>
    </tr>
    <tr>
      <td>`forEach(callback)`</td>
      <td>Führt eine bereitgestellte Funktion für jedes Element im Array aus.</td>
    </tr>
    <tr>
      <td>`map(callback)`</td>
      <td>Erstellt ein neues Array, indem eine Funktion auf jedes Element im Array angewendet wird.</td>
    </tr>
    <tr>
      <td>`filter(callback)`</td>
      <td>Erstellt ein neues Array, das alle Elemente enthält, für die die bereitgestellte Funktion `true` zurückgibt.</td>
    </tr>
  </tbody>
</table>

## Beispiele für den Einsatz von TypeScript Arrays

TypeScript Arrays sind unerlässliche Werkzeuge, wenn es darum geht, Daten in Anwendungen zu organisieren und zu verarbeiten. Wir stellen Ihnen einige der wichtigsten Arbeitsschritte vor.

### Auf Array-Elemente zugreifen

Der Zugriff auf Array-Elemente in TypeScript ist eine grundlegende Operation, die es Ihnen ermöglicht, spezifische Elemente innerhalb eines Arrays abzurufen. Sie können auf Array-Elemente mithilfe ihres Index zugreifen, der ihre Position im Array darstellt. In TypeScript ist die **Indexierung von Arrays nullbasiert**. Das erste Element hat demzufolge den Index 0 und das zweite Element den Index 1.

```typescript
let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99
```

### Array-Destrukturierung

Mit **Array-Destrukturierung** in TypeScript können Sie Werte aus einem Array schnell und einfach extrahieren und sie Variablen zuweisen.

```typescript
let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3
```

### Iteration über Elemente in TypeScript Arrays

Hier ist ein Beispiel für eine Iteration über ein Array in TypeScript mithilfe einer **for-Schleife**:

```typescript
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
```

In diesem Beispiel haben wir ein Array `numbers`, das Zahlen enthält. Wir verwenden eine for-Schleife, um durch das Array zu iterieren. Die Schleife beginnt bei `i = 0`, und wir erhöhen `i` in jedem Schleifendurchlauf. Mit `numbers[i]` greifen wir auf das jeweilige Element des Arrays zu und geben es aus.

Wir erhalten die Ausgabe:

```typescript
1
2
3
4
5
```


This is a markdown version of: [https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/typescript-arrays/](https://www.ionos.com/de-ch/digitalguide/websites/web-entwicklung/typescript-arrays/) for AI/LLM consumption.