Array<Type> vs Type[] in TypeScript: 5 fatale Fehler und wie man sie vermeidet

Array<Type> vs Type[] in TypeScript: Der Syntaxkampf, den Sie gewinnen müssen

Wenn Sie jemals in TypeScript geschrieben haben, haben Sie definitiv zwei Möglichkeiten gesehen, ein Zahlen-Array zu deklarieren:

const numbers1: number[] = [1, 2, 3];\nconst numbers2: Array<number> = [1, 2, 3];

Beide Varianten funktionieren. Beide werden kompiliert. Beide sind gültiges TypeScript. Warum gibt es dann so viele Diskussionen darum? Warum hat diese Frage auf Stack Overflow tausende Aufrufe? Und vor allem – wie vermeidet man die Fallstricke, die Ihr Projekt ruinieren können?

Lassen Sie es uns ein für alle Mal klären. Ohne langweilige Theorie. Nur das, was im echten Einsatz wirklich nützlich ist.

Kurze Einführung: Was ist was

Syntax Type[] (Array-Literal-Syntax)

Dies ist die gebräuchlichste Methode, ein Array in TypeScript zu deklarieren. Sie stammt aus JavaScript und wirkt natürlich:

let fruits: string[] = ['apple', 'banana', 'cherry'];\nlet matrix: number[][] = [[1, 2], [3, 4]]; // Array von Arrays

Kurz, lesbar, intuitiv. Für 90% der Fälle reicht das aus.

Syntax Array<Type> (Generic-Syntax)

Dies ist die generische Form, die das eingebaute Interface Array<T> verwendet:

let fruits: Array<string> = ['apple', 'banana', 'cherry'];\nlet matrix: Array<Array<number>> = [[1, 2], [3, 4]];

Sieht "akademischer" aus, bietet aber in komplexen Szenarien mehr Flexibilität.

Die Top-5-Fehler, die selbst erfahrene Entwickler machen

Fehler Nr. 1: Blindes Vertrauen in die Autovervollständigung der IDE

Ihre IDE kann beide Varianten vorschlagen. Das bedeutet aber nicht, dass sie überall austauschbar sind. Betrachten wir ein Beispiel mit Union-Typen:

// So ist es erlaubt\ntype Status = 'active' | 'inactive';\nconst statuses1: Status[] = ['active', 'inactive'];\n\n// Aber so – ein Syntaxfehler!\n// const statuses2: Array<'active' | 'inactive'> = ['active', 'inactive']; \n// ❌ Fehler: ';' expected\n\n// Die korrekte Variante mit Generics:\nconst statuses3: Array<Status> = ['active', 'inactive'];

Fazit: Innerhalb von Array<> können komplexe Union-Typen nicht direkt verwendet werden. Lagern Sie sie zuerst in einen separaten Typ aus.

Fehler Nr. 2: Verwechslung bei readonly-Arrays

Wenn ein Array unveränderlich gemacht werden soll, verhalten sich die Syntaxen unterschiedlich:

// ✅ Richtig mit Type[]\nconst readonlyFruits: readonly string[] = ['apple', 'banana'];\n// readonlyFruits.push('orange'); // ❌ Fehler: readonly\n\n// ❌ So funktioniert es nicht:\n// const wrong: readonly Array<string> = ['apple']; \n// Fehler: 'readonly' modifier can only appear on array types\n\n// ✅ Richtig mit Array<> – verwenden Sie ReadonlyArray:\nconst correct: ReadonlyArray<string> = ['apple', 'banana'];

Fazit: Verwenden Sie für readonly-Arrays readonly Type[] oder ReadonlyArray<Type>. readonly mit Array<> zu mischen, ist nicht erlaubt.

Fehler Nr. 3: Probleme mit mehrstufigen Arrays

Wenn ein Array andere Arrays enthält, wird die Syntax Array<> unübersichtlich:

// Lesbar und verständlich\nconst grid1: number[][] = [[1, 2], [3, 4]];\n\n// Schon schwieriger zu lesen\nconst grid2: Array<Array<number>> = [[1, 2], [3, 4]];\n\n// Und bei drei Ebenen? Ein Albtraum:\nconst cube: Array<Array<Array<number>>> = [[[1]]]; // 🤯\n\n// Mit Type[] ist es einfacher:\nconst cube2: number[][][] = [[[1]]];

Fazit: Verwenden Sie für Arrays mit einer Verschachtelungstiefe von mehr als 2 Type[][]. Ihre Kollegen werden es Ihnen danken.

Fehler Nr. 4: Ignorieren des Nutzungskontexts

In manchen Frameworks (Angular, React) und Bibliotheken ist ein bestimmter Stil üblich. Das Verletzen der Konvention kann zu Verwirrung führen:

// Angular verwendet oft