TypeScript - Arrays: Your Gateway to Organized Data

Hallo da, ambitionierte Programmierer! Heute tauchen wir in die wunderbare Welt der Arrays in TypeScript ein. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich auf dieser Reise zu führen. Arrays sind wie die Schweizer Army knives der Programmierung - unglaublich vielseitig und nützlich. Also, rollen wir die Ärmel hoch und los geht's!

Was sind Arrays?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Arrays sind. Stell dir vor, du hast eine Menge bunte Murmeln. Anstatt sie überall im Zimmer verstreut zu lassen, entscheidest du dich, sie in einer sauberen Linie zu platzieren. Das ist im Grunde das, was ein Array in der Programmierung macht - es organisiert ähnliche Elemente auf eine strukturierte Weise.

Features eines Arrays

Arrays in TypeScript kommen mit einigen coolen Features, die sie super handlich machen:

1. Geordnete Sammlung: Wie unsere Murmelreihe behalten Arrays eine bestimmte Ordnung bei.
2. Indexbasiert: Jedes Element hat eine Nummer (Index) zugeordnet, beginnend mit 0.
3. Homogen: Im Allgemeinen enthalten Arrays Elemente desselben Typs.
4. Dynamische Größe: In TypeScript können Arrays wachsen oder schrumpfen, wie erforderlich.

Deklaration und Initialisierung von Arrays

Lassen Sie uns mit der Erstellung unseres ersten Arrays beginnen. In TypeScript haben wir einige Möglichkeiten, dies zu tun:

// Methode 1: Verwenden von eckigen Klammern
let fruits: string[] = ['apple', 'banana', 'orange'];

// Methode 2: Verwenden des Array-Konstruktors
let numbers: number[] = new Array(1, 2, 3, 4, 5);

// Methode 3: Verwenden des generischen Array-Typs
let colors: Array<string> = ['red', 'green', 'blue'];

Im ersten Beispiel haben wir ein Array von Früchten erstellt. Das string[] tells TypeScript, dass dieses Array nur Strings enthalten wird. Es ist wie dem sagen: "Diese Box ist nur für Murmeln, keine Spielzeugautos erlaubt!"

Das zweite Beispiel zeigt, wie man ein Array von Zahlen mit dem Array-Konstruktor erstellt. Es ist ein bisschen wie eine spezielle Maschine zu verwenden, um deine Murmelreihe zu erstellen.

Die dritte Methode verwendet, was wir eine "generische" Art nennen. Mach dir keine zu großen Sorgen über den Begriff jetzt, weiß nur, es ist eine andere Möglichkeit zu sagen "dieses Array ist für Strings".

Zugriff auf Array-Elemente

Nun, da wir unsere Arrays haben, wie bekommen wir die Elemente darin? Es ist so einfach wie Pie! Wir verwenden den Index des Elements:

let fruits: string[] = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // Ausgabe: 'apple'
console.log(fruits[1]); // Ausgabe: 'banana'
console.log(fruits[2]); // Ausgabe: 'orange'

Denke daran, Array-Indizes beginnen bei 0, nicht bei 1. Es ist wie ein komisches Zählsystem, bei dem wir mit 0 anfangen anstatt mit 1. Ich weiß, Programmierer sind eine seltsame Gruppe!

Array-Objekt

In TypeScript sind Arrays actually objects. Das bedeutet, sie kommen mit einigen eingebauten Eigenschaften und Methoden. Eine der nützlichsten Eigenschaften ist length:

let fruits: string[] = ['apple', 'banana', 'orange'];
console.log(fruits.length); // Ausgabe: 3

Dies tells uns, wie viele Elemente in unserem Array sind. Super praktisch, wenn man die Größe deiner Sammlung wissen muss!

Array-Methoden

Arrays kommen mit einer Werkzeugkiste von Methoden, um sie zu manipulieren. Sehen wir uns einige der häufigsten an:

Methode	Beschreibung	Beispiel
push()	Fügt einem oder mehreren Elementen an das Ende hinzu	fruits.push('grape')
pop()	Entfernt das letzte Element	let lastFruit = fruits.pop()
unshift()	Fügt einem oder mehreren Elementen an den Anfang hinzu	fruits.unshift('kiwi')
shift()	Entfernt das erste Element	let firstFruit = fruits.shift()
indexOf()	Gibt den Index eines bestimmten Elements zurück	let index = fruits.indexOf('banana')
slice()	Gibt eine flache Kopie eines Teils des Arrays zurück	let someFruits = fruits.slice(1, 3)
splice()	Ändert den Inhalt eines Arrays	fruits.splice(1, 1, 'mango')

Sehen wir uns das in Aktion an:

let fruits: string[] = ['apple', 'banana', 'orange'];

fruits.push('grape');
console.log(fruits); // Ausgabe: ['apple', 'banana', 'orange', 'grape']

let lastFruit = fruits.pop();
console.log(lastFruit); // Ausgabe: 'grape'
console.log(fruits); // Ausgabe: ['apple', 'banana', 'orange']

fruits.unshift('kiwi');
console.log(fruits); // Ausgabe: ['kiwi', 'apple', 'banana', 'orange']

let firstFruit = fruits.shift();
console.log(firstFruit); // Ausgabe: 'kiwi'
console.log(fruits); // Ausgabe: ['apple', 'banana', 'orange']

Array-Destructuring

TypeScript unterstützt eine coole Funktion namens Array-Destructuring. Es ist wie das Entpacken eines Koffers, aber für Arrays:

let fruits: string[] = ['apple', 'banana', 'orange'];
let [first, second, third] = fruits;

console.log(first);  // Ausgabe: 'apple'
console.log(second); // Ausgabe: 'banana'
console.log(third);  // Ausgabe: 'orange'

Dies ist eine schicke Möglichkeit, Array-Elemente auf einmal zu variablen zuzuweisen!

Array-Through-Traversal mit for...of-Schleife

Wenn wir durch jedes Element in einem Array gehen möchten, können wir eine for...of-Schleife verwenden. Es ist wie jede Murmel aus der Box herauszunehmen:

let fruits: string[] = ['apple', 'banana', 'orange'];

for (let fruit of fruits) {
console.log(fruit);
}
// Ausgabe:
// apple
// banana
// orange

Diese Schleife geht durch jede Frucht in unserem Array und gibt sie aus. Super einfach und sauber!

Arrays in TypeScript

TypeScript verleiht Arrays einige zusätzliche Superkräfte. Zum Beispiel kannst du Arrays von benutzerdefinierten Typen erstellen:

// Definiere einen benutzerdefinierten Typ
type Person = {
name: string;
age: number;
};

// Erstelle ein Array von Person-Objekten
let people: Person[] = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 },
{ name: "Charlie", age: 35 }
];

console.log(people[1].name); // Ausgabe: "Bob"

Hier haben wir ein Array von Person-Objekten erstellt. TypeScript stellt sicher, dass jedes Objekt in diesem Array einen name und ein age hat.

Und das war's, Leute! Wir haben die Welt der TypeScript-Arrays bereist. Von der Erstellung bis hin zur Manipulation und sogar einige TypeScript-spezifische Features. Denke daran, Arrays sind deine Freunde in der Programmierung. Sie helfen dir, Daten zu organisieren und deinen Code sauberer und effizienter zu machen.

Als wir aufhören, möchte ich, dass du daran denkst, Arrays wie eine gut organisierte Werkzeugkiste zu betrachten. Jedes Werkzeug (oder Element) hat seinen Platz, und wenn du es brauchst, weißt du genau, wo du es finden kannst. Übe weiter mit Arrays, und bald wirst du Daten wie ein Profi jonglieren!

Frohes Coden und möge deine Arrays immer perfekt sortiert sein!

Credits: Image by storyset