TypeScript Starter
Dieses Tutorial wird laufend erweitert!
TypeScript ist Microsofts Versuch, JavaScript ins 21. Jahrhundert zu bringen. Im Gegenteil zu anderen Versuchen wie beispielsweise Google's Dart ist TypeScript ein Superset von JavaScript. Das hat den großen Vorteil, dass jede bestehende JavaScript Anwendung / Library sofort in TypeScript verwendet werden kann. TypeScript kompiliert direkt in JavaScript und ist somit überall lauffähig, wo eine JavaScript-Engine zur Verfügung steht. Es werden für die Ausführung keine weiteren Addons benötigt. Für dieses Tutorial werden wir den Playground von der offiziellen TypeScript-Website verwenden, da er neben einem Instant-Compiler samt Fehlerausgabe auch Syntax-Highlighting und IntelliSense anbietet -
TypeScript Playground.
Noch eine kleine Anmerkung am Rande: Der TypeScript-Compiler selbst ist in TypeScript geschrieben und OpenSource.
| Zitat: |
| Jedes JavaScript Programm ist ein TypeScript Programm. |
Folgendes Snippet ist funktionierendes JavaScript, und gleichzeitig valides TypeScript.
JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
| function greeter(person) {
return "Hello, " + person;
}
var user = "Jon Good";
document.body.innerHTML = greeter(user); |
Anhand dieses Beispiels wollen wir gleich mal die eine oder andere wertvolle Funktion von TypeScript kennenlernen.
TypeScript unterstützt typisierte Funktionsparameter. Diese werden wie in Pascal hinter dem Parameternamen geschrieben. In unserem Beispiel legen wir den Parameter "person" als
string fest. TypeScript unterstützt folgende Basistypen: number, string, boolean, null, undefined.
JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
| function greeter(person: string) {
return "Hello, " + person;
}
var user = "Jon Good";
document.body.innerHTML = greeter(user); |
Wird
greeter ein anderer Typ als
string übergeben, wirft der Compiler eine Fehlermeldung. Versuch beispielsweise der Funktion den Wert 3 zu übergeben; im Playground wird der Funktionsaufruf sofort rot unterstrichen und beim Überfahren mit der Maus wird die Fehlermeldung angezeigt. Dieses Feature hilft enorm bei der Erstellung größerer Anwendungen.
Dieses Beispiel können wir noch weiter ausbauen, wenn wir beispielsweise einen Vor- und Nachnamen getrennt übergeben möchten. Natürlich könnten wir einfach zwei Parameter vom Typ string übergeben, allerdings geht dann der Zusammenhalt verloren und die spätere Erweiterung des Codes ist nicht so einfach. Aus diesem Grund verwenden wir ein Interface, welche in TypeScript auch als eine Art Record verwendet werden kann.
JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
| interface Person {
FirstName: string;
LastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.FirstName + " " + person.LastName;
}
var user: Person = { FirstName: 'Jon', LastName: 'Good' };
document.body.innerHTML = greeter(user); |
