Versehen wir nun mal einfache Variablen mit einer Typisierung
+
+ const x: number = 5;
+ const y: string = "Hallo Welt!";
+ const isFalse: boolean = false;
+ In TypeScript erhalten Variablen einen Typ, indem nach dem Namen ein Doppelpunkt mit der Typ-Deklaration folgt.
+Standard-Typen umfassen in der Regel string, number, boolean, undefined, null.
Bei der Interaktion mit den Variablen sollten nun Informationen zu den Variablen besser angezeigt werden.
+Sehen wir uns nun das Beispiel mit einer String-Variable an.
+Generics in TypeScript sind ein wichtiges Feature um Typen dynamisch festzulegen
+Im Grunde geben wir mit einem Generic an, das der type von außen festgelegt oder durch Code-Analyse automatisch bestimmbar ist.
Fangen wir einfach an: Wir wollen den type einer Eigenschaft eines Objekts frei einstellen:
+ type MyObject<T> = {
+ value: T,
+ };
+
+ const x: MyObject<number> = {
+ value: 5,
+ };
+ const y: MyObject<string> = {
+ value: 'Hallo!',
+ };
+ Fangen wir einfach an
+
+ const convertToString = (thing): string => {
+ return thing.toString();
+ }
+ Nicht alles kann mit toString in etwas nützliches konvertiert werden (z.B. Objekte). Deshalb wollen wir nun nur "Sinnvolle" Typen zulassen
+ const convertToString = <T extends
+ string | number | boolean | null | undefined
+ >(thing: T): string => {
+ return thing.toString();
+ }
+ Wenn wir ein Projekt mit Vite aufsetzen, können wir aus den vielen Templates von Vite wählen. Viele "Vanilla"-Templates haben auch eine TS-Variante mit der unnötiges Setup vermieden werden kann.
+
+ npm create vite@latest my-first-ts-app\
+ -- --template vanilla-ts
+ In dem nun generierten Projekt sehen wir nun die ersten Unterschiede: Javascript-Dateien gibt es hier nicht mehr und sind mit .ts abgekürzt. Das sind entsprechende TypeScript-Dateien.
TypeScript wird diese Dateien analysieren, und während der Build-Phase diese in JavaScript umwandeln, sodass dieser dann in nachgelagerten Schritten weiter prozessiert werden kann.
+Euch wird wahrscheinlich eine tsconfig.json im Projekt aufgefallen sein.
+Dies ist die Konfigurations-Datei für TypeScript. Hier sind alle Einstellungen für den TypeScript-Compiler und können den eigenen Anforderungen entsprechend angepasst werden.
+TypeScript stellt im weitesten Sinne eine Erweiterung zu klassischem JavaScript dar. Hierbei wird JavaScript um ein Type-System erweitert.
+Die Types hierbei umfassen die normalen Datentypen wie number, boolean, oder string. Weitergehend können Objekte und Arrays mit Typen ausgestattet werden.
+Ziel des ganzen ist es hierbei, JavaScript's fehleranfälliges Verhalten aufgrund der schlechten Typ-Information sicherer zu gestalten. TypeScript bietet bei der Entwicklung viele Vorteile wie z.B. Type-Hints, Error-Meldungen bei unbekannten Typen und mehr.
+Da TypeScript nur eine Erweiterung darstellt, sind auch moderne Browser und JS-Parsende Systeme nicht in der Lage TypeScript zu verstehen. Für uns Entwickler heißt das konkret, dass wir unseren TypeScript (TS) Code vorher in JavaScript umwandeln müssen.
+Eine Ausnahme die sich zu dieser Aussage "anbahnt" ist NodeJS: Seit Version 23.8.0 ist NodeJS in der Lage, die Typ-Informationen aus der TS-Datei zu "strippen" und den Code der dahinter liegt auszuführen.
+Für Browser ist aber fürs erste weiterhin eine Konvertierung von TS -> JS durchzuführen. Wann gängige Browser-Engines nachziehen ist noch nicht abzusehen.
+Hierfür gibt es einen entsprechendes package auf npm: typescript.
TypeScript wurde durch Microsoft eingeführt und wird auch durch Microsoft ständig weiter entwickelt.
+Das typescript package ist ein Compiler der TypeScript Code analysiert, Fehlermeldungen auf Typen generiert und den Code letzten Endes zu JavaScript konvertiert.
In TS gibt es 2 Varianten Objekte zu Typisieren. Dabei definieren wir die Form bzw die Eigenschaften (Properties) innerhalb des Objektes.
+Mit Interfaces definieren wir Objekte. Dabei können wir uns das interface noch am ehesten wie eine normale JavaScript-Klasse vorstellen, die später durch weitere Interfaces erweitert werden kann.
+ interface Point2D {
+ x: number,
+ y: number,
+ };
+
+ const location: Point2D = {
+ x: 5,
+ y: 10,
+ };
+ Ein Interface kann nun mit einem bestehenden Interface "erweitert" (extended) werden.
+
+ interface Point3D extends Point2D {
+ z: number,
+ };
+
+ const location: Point3D = {
+ x: 5,
+ y: 10,
+ z: 20,
+ };
+ Ein type dient ähnlich zum interface dazu, ein Objekt zu definieren, beschränkt sich aber nicht darauf.
+ type Point2D = {
+ x: number;
+ y: number;
+ };
+
+ // Mit dem "&" können wir mehrere types zusammenführen
+ type Point3D = {
+ z: number;
+ } & Point2D;
+ Wie gesagt beschränkt sich eine type-Definition nicht nur auf Objekte, wir können zum Beispiel einen String auf bestimmte Werte "restriktieren".
+ type Animal = "cat" | "dog" | "hamster";
+
+ const pet: Animal = "cat";
+
+ // Mischformen sind auch möglich
+ type Falsy = null | undefined | "" | 0 | false;
+