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.
+ +Neben diesen normalen Datentypen, kennt TypeScript noch zwei weitere wichtige: any und unknown.
Sobald man any verwendet, gibt man dem TypeScript Type-Checker die Information, dass diese Variable nicht weiter beachtet werden soll. Für diese Variable wird also jegliches Type-Checking deaktiviert und wir erhalten keine Warnungen und Informationen mehr.
Als sichere alternative gibt es hierfür unknown. Hiermit teilen wir TypeScript mit, dass wir zum aktuellen Zeitpunkt nicht wissen, was das für ein Datentyp ist.
Wenn wir den Datentyp einer unknown Variable später eindeutig kennen, können wir diesen mit folgendem Code-Schnipsel konvertieren:
+
+ function x(y: unknown): number | undefined {
+ if (typeof y === 'number') {
+ return y as number;
+ }
+ return undefined;
+ }
+ Funktionen in TypeScript lassen sich einfach definieren. Wir verwenden dazu das Type-Keyword und geben eine Funktion ähnlich zu einer Standard-Arrow-Function an:
+
+ type MyFunction = () => void;
+ In den runden Klammern können wir die notwendigen Parameter für die Funktion definieren:
+
+ type MyFunction = (paramA: string, paramB: string) => void;
+ Der Rückgabe-Type wird nach dem "Fat-Arrow" definiert. void signalisiert, dass die Funktion keinen Wert zurückggibt.
+ type MyFunction = () => string;
+
- npm create vite@latest my-first-ts-app\
+ npm create vite@latest my-first-ts-app
-- --template vanilla-ts
Manchmal benötigen wir einzelne Properties in einem Objekt nicht immer, also können wir diese auch weg lassen.
+In TypeScript werden optionale Properties in einem Objekt mit einem Fragezeichen markiert:
+
+ type MyObject = {
+ required: boolean;
+ optional?: boolean;
+ };
+ Der spezielle Type Record, ist ein generischer Type von TypeScript, der ein Objekt beschreiben kann.
Er nimmt 2 Parameter an: Einen Keys-Type und einen Value-Type.
+ type Keys = "cat" | "dog" | "hamster";
+ type Value = {
+ name: string;
+ age: number;
+ }
+
+ type Pets = Record<Keys, Value>;
+ Dies erzeugt folgenden Typ:
+
+ type Pets = {
+ cat: Value,
+ dog: Value,
+ hamster: Value
+ }
+ Jeder Key wird als Property mit dem angegebenen Value definiert!
+Manchmal macht es Sinn, einen Datentypen (Interface oder Type) anhand eines bereits existierenden JavaScript-Objektes zu generieren.
+Hierfür haben wir das keyword typeof. TypeScript wandelt bei der Verwendung eines JS-Ojbektes mit diesem keyword, in einen Datentypen um:
+ const myObject = {
+ key1: 'Hello',
+ key2: 'World',
+ };
+
+ const MyObject = typeof myObject;
+ /**
+ * {
+ * key1: string;
+ * key2: string;
+ * }
+ */
+ Das keyword keyof ist ein weiterer nützliches Tool. Damit können wir die property-keys aus einem Type extrahieren:
+ type Keys = keyof MyObject;
+ // Keys => 'key1' | 'key2';
+