EMZETT.
Login

Emzett Wiki

TypeScript: Grundtypen und Typinferenz

Properties1
tagsprogrammiersprachen, typescript

4 Min. Lesezeit

Kurz: TypeScript erkennt Typen aus dem Wert. Du musst nicht alles hinschreiben:

Teil des Kurses TypeScript

Kapitel 2 von 15 im Kurs TypeScript (Abschnitt „Grundlagen“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Die einfachen Typen

TypBeispielBedeutung
string"Hallo"Text
number42, 3.14alle Zahlen
bigint10nsehr große ganze Zahlen
booleantrueWahrheitswert
null, undefined”leer”, “nicht gesetzt”
symbolSymbol("x")eindeutiger Bezeichner
string[]["a", "b"]Array von Texten
anyallesschaltet die Typprüfung ab
unknownallessicheres “weiß ich noch nicht”
voidFunktion ohne Rückgabewert
neverkommt nie vor (Fehler, Endlosschleife)
const name: string = "Mia";
const alter: number = 17;
const aktiv: boolean = true;
const werte: number[] = [1, 2, 3];
const noten: Array<number> = [1, 2];          // gleichbedeutend
console.log(name, alter, aktiv, werte.length, noten.length);

Ausgabe:

Mia 17 true 3 2

Typinferenz

TypeScript erkennt Typen aus dem Wert. Du musst nicht alles hinschreiben:

let zahl = 42;                 // number
const text = "Hallo";          // "Hallo" (Literaltyp, weil const)
let liste = [1, 2, 3];         // number[]
const person = { name: "Mia", alter: 17 };   // { name: string; alter: number }
 
zahl = zahl + 1;
liste.push(4);
console.log(zahl, text, liste, person.name);

Ausgabe:

43 Hallo [ 1, 2, 3, 4 ] Mia

Falsche Zuweisungen werden abgefangen:

let zahl = 42;
zahl = "zweiundvierzig";

Fehlermeldung:

error TS2322: Type 'string' is not assignable to type 'number'.

Tipp

Lass TypeScript Typen erkennen, wo es geht. Beschrifte Funktionsparameter und was nach außen sichtbar ist.

const und let

Bei const erkennt TypeScript den genauen Wert als Typ (const x = 5 hat den Typ 5), bei let den allgemeinen (number). Das spielt bei Literaltypen (nächste Kapitel) eine Rolle.

any und unknown

any bedeutet “keine Prüfung”. Es steckt an: Alles, was damit zu tun hat, wird ebenfalls ungeprüft. Besser ist unknown: Du musst den Wert erst prüfen, bevor du ihn benutzt.

function lang(wert: unknown): number {
  if (typeof wert === "string") {
    return wert.length;           // hier weiß TypeScript: string
  }
  if (Array.isArray(wert)) {
    return wert.length;
  }
  return 0;
}
console.log(lang("Hallo"), lang([1, 2, 3]), lang(42));

Ausgabe:

5 3 0

Ohne die Prüfung gibt es einen Fehler:

function lang(wert: unknown) {
  return wert.length;
}

Fehlermeldung:

error TS18046: 'wert' is of type 'unknown'.

null und undefined

Mit der Option strict (empfohlen) sind null und undefined keine gültigen Werte für andere Typen. Das verhindert den berüchtigten Fehler “Cannot read properties of undefined”:

function erstes(liste: string[]): string | undefined {
  return liste[0];
}
const e = erstes([]);
console.log(e?.toUpperCase() ?? "leer");

Ausgabe:

leer

Typ-Zusicherung (as)

Wenn du mehr weißt als der Compiler, kannst du mit as einen Typ behaupten. Das ist eine Zusage ohne Prüfung, also sparsam einsetzen:

const eingabe: unknown = "42";
const zahl = Number(eingabe as string);
console.log(zahl + 1);

Ausgabe:

43

Typ-Aliase

Mit type gibst du einem Typ einen Namen:

type ID = number | string;
type Punkt = { x: number; y: number };
 
const a: ID = 5;
const b: ID = "A-5";
const p: Punkt = { x: 1, y: 2 };
console.log(a, b, p);

Ausgabe:

5 A-5 { x: 1, y: 2 }

Merke

  • Grundtypen: string, number, boolean, null, undefined, Arrays als typ[]
  • Typinferenz spart Schreibarbeit; beschrifte Parameter und Rückgaben nach außen
  • unknown statt any: erst prüfen, dann nutzen
  • Mit strict sind null/undefined eigene Typen
  • as behauptet einen Typ ohne Prüfung

Übungsaufgabe

Deklariere Variablen für Name, Alter und Hobbys (Array). Schreibe eine Funktion, die ein unknown annimmt und es als Text zurückgibt, wenn es ein String ist.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Was ist TypeScript?

Weiter: Funktionen mit Typen

Alle Kapitel: TypeScript im Überblick

Graphansicht

Backlinks