Sie können dieses Kapitel überspringen, wenn Sie bereits sicher sind, dass Sie TypeScript lernen und verwenden werden.
Wenn Sie noch unsicher sind – dieses Kapitel ist mein Verkaufsgespräch.
Während Sie TypeScript-Code in einer integrierten Entwicklungsumgebung bearbeiten, erhalten Sie Warnungen, wenn Sie Namen falsch schreiben, Funktionen falsch aufrufen usw.
Betrachten Sie die folgenden zwei Codezeilen
function func() {}
funcc();Für die zweite Zeile erhalten wir diese Warnung
Cannot find name 'funcc'. Did you mean 'func'?Ein weiteres Beispiel
const a = 0;
const b = true;
const result = a + b;Diesmal lautet die Fehlermeldung für die letzte Zeile
Operator '+' cannot be applied to types 'number' and 'boolean'.Die Dokumentation von Parametern von Funktionen und Methoden ist etwas, das viele Leute ohnehin tun
/**
* @param {number} num - The number to convert to string
* @returns {string} `num`, converted to string
*/
function toString(num) {
return String(num);
}Die Angabe der Typen über {number} und {string} ist nicht erforderlich, aber die Beschreibungen in englischer Sprache erwähnen sie ebenfalls.
Wenn wir die Notation von TypeScript verwenden, um Typen zu dokumentieren, erhalten wir den zusätzlichen Vorteil, dass diese Informationen auf Konsistenz geprüft werden
function toString(num: number): string {
return String(num);
}Immer wenn ich JavaScript-Code nach TypeScript migriere, stelle ich ein interessantes Phänomen fest: Um die geeigneten Typen für Parameter einer Funktion oder Methode zu finden, muss ich prüfen, wo sie aufgerufen wird. Das bedeutet, dass statische Typen mir lokal Informationen geben, die ich sonst woanders nachschlagen müsste.
Und ich finde es tatsächlich einfacher, TypeScript-Codebasen zu verstehen als JavaScript-Codebasen: TypeScript bietet eine zusätzliche Dokumentationsschicht.
Diese zusätzliche Dokumentation hilft auch bei der Teamarbeit, da klarer ist, wie Code verwendet werden soll, und TypeScript uns oft warnt, wenn wir etwas falsch machen.
Wenn es Typdefinitionen für JavaScript-Code gibt, können Editoren diese zur Verbesserung der Autovervollständigung nutzen.
Eine Alternative zur Verwendung der TypeScript-Syntax ist, alle Typinformationen über JSDoc-Kommentare bereitzustellen – wie wir es zu Beginn dieses Kapitels getan haben. In diesem Fall kann TypeScript auch den Code auf Konsistenz prüfen und Typdefinitionen generieren. Weitere Informationen finden Sie in Kapitel „Type Checking JavaScript Files“ im TypeScript-Handbuch.
Refactorings sind automatisierte Code-Transformationen, die viele integrierte Entwicklungsumgebungen anbieten.
Das Umbenennen von Methoden ist ein Beispiel für ein Refactoring. Dies in reinem JavaScript zu tun, kann knifflig sein, da derselbe Name auf verschiedene Methoden verweisen könnte. TypeScript hat mehr Informationen darüber, wie Methoden und Typen verbunden sind, was das Umbenennen von Methoden dort sicherer macht.
TypeScript unterstützt in der Regel schnell ECMAScript-Stage-4-Features (solche Features sind für die Aufnahme in die nächste ECMAScript-Version geplant). Wenn wir zu JavaScript kompilieren, können wir mit der Compiler-Option --target die ECMAScript-Version angeben, mit der die Ausgabe kompatibel ist. Dann wird jedes inkompatible Feature (das später eingeführt wurde) in äquivalenten, kompatiblen Code kompiliert.
Beachten Sie, dass diese Art der Unterstützung für ältere ECMAScript-Versionen kein TypeScript oder statische Typisierung erfordert: Der JavaScript-Compiler Babel macht das auch, kompiliert aber JavaScript zu JavaScript.
TypeScript-Code kann sehr aufgebläht sein. Aber das muss er nicht. Zum Beispiel können wir dank Typinferenz oft mit wenigen Typannotationen auskommen
function selectionSort(arr: number[]) { // (A)
for (let i=0; i<arr.length; i++) {
const minIndex = findMinIndex(arr, i);
[arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]; // swap
}
}
function findMinIndex(arr: number[], startIndex: number) { // (B)
let minValue = arr[startIndex];
let minIndex = startIndex;
for (let i=startIndex+1; i < arr.length; i++) {
const curValue = arr[i];
if (curValue < minValue) {
minValue = curValue;
minIndex = i;
}
}
return minIndex;
}
const arr = [4, 2, 6, 3, 1, 5];
selectionSort(arr);
assert.deepEqual(
arr, [1, 2, 3, 4, 5, 6]);Die einzigen Stellen, an denen sich dieser TypeScript-Code von JavaScript-Code unterscheidet, sind Zeile A und Zeile B.
Es gibt eine Vielzahl von Stilen, in denen TypeScript geschrieben wird
Anfangs erfand TypeScript einige eigene Sprachkonstrukte (z. B. Enums). Aber seit ECMAScript 6 blieb es meistens eine strenge Obermenge von JavaScript.
Mein Eindruck ist, dass das TypeScript-Team JavaScript mag und es nicht durch etwas „Besseres“ ersetzen möchte (was das Ziel von z. B. Dart ist). Sie möchten es ermöglichen, so viel JavaScript-Code wie möglich statisch zu typisieren. Viele neue TypeScript-Features werden von diesem Wunsch angetrieben.