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 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:
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:
// 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.
| Methode | Beschreibung |
|---|---|
push()
|
Fügt ein oder mehrere Elemente am Ende des Arrays hinzu und gibt die neue Länge des Arrays zurück. |
pop()
|
Entfernt das letzte Element aus dem Array und gibt dieses zurück. |
unshift()
|
Fügt ein oder mehrere Elemente am Anfang des Arrays hinzu und gibt die neue Länge des Arrays zurück. |
shift()
|
Entfernt das erste Element aus dem Array und gibt dieses zurück. |
concat()
|
Kombiniert das aktuelle Array mit einem oder mehreren anderen Arrays und gibt ein neues Array zurück. Das ursprüngliche Array bleibt unverändert. |
join(separator)
|
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. |
slice(start, end)
|
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.
|
splice(start, deleteCount, element1, element2, ...)
|
Fügt neue Elemente an der angegebenen Position ein und/oder entfernt Elemente aus dem Array. |
forEach(callback)
|
Führt eine bereitgestellte Funktion für jedes Element im Array aus. |
map(callback)
|
Erstellt ein neues Array, indem eine Funktion auf jedes Element im Array angewendet wird. |
filter(callback)
|
Erstellt ein neues Array, das alle Elemente enthält, für die die bereitgestellte Funktion true zurückgibt.
|
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.
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 = 99Array-Destrukturierung
Mit Array-Destrukturierung in TypeScript können Sie Werte aus einem Array schnell und einfach extrahieren und sie Variablen zuweisen.
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 3Iteration über Elemente in TypeScript Arrays
Hier ist ein Beispiel für eine Iteration über ein Array in TypeScript mithilfe einer for-Schleife:
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:
1
2
3
4
5- DSGVO-konform & sicher gehostet in Deutschland
- Produktivität steigern – weniger Aufwand, mehr Output
- Direkt im Browser starten – ohne Installation