TypeScript Typen: string, number, boolean und mehr

TypeScript-Typen beschreiben, welche Art von Wert eine Variable enthalten darf. Du schreibst den Typ hinter einen Doppelpunkt, let name: string, und der Compiler lehnt jeden Code ab, der dort die falsche Art von Wert ablegt. Die Grundtypen sind die sieben primitiven Typen von JavaScript plus Objekttypen für Arrays und Objekte.

let title: string = "TypeScript";
let version: number = 7;
let isStrict: boolean = true;
let big: bigint = 9007199254740993n;
let id: symbol = Symbol("id");
let nothing: null = null;
let notSet: undefined = undefined;

let scores: number[] = [90, 72, 85];
let user: { name: string; age: number } = { name: "Ada", age: 36 };

console.log(title, version, isStrict, big, id);
console.log(nothing, notSet);
console.log(scores, user);

Die Annotationen werden beim Kompilieren geprüft und danach entfernt. Das Programm, das läuft, ist reines JavaScript.

Die primitiven Typen

Die Typnamen sind kleingeschrieben. typeof liefert zur Laufzeit für die meisten davon dieselben Wörter, daher prüfst du mit typeof x === "number" den primitiven Typ eines Werts, während das Programm läuft.

Typannotationen

Eine Annotation ist : Type hinter einer Variablen, einem Parameter oder der Parameterliste einer Funktion. Am wichtigsten sind Annotationen bei Parametern, denn TypeScript kann nicht erraten, was ein Aufrufer übergibt.

function describe(name: string, age: number, admin: boolean): string {
    return `${name} (${age})${admin ? " [admin]" : ""}`;
}

let label: string = describe("Ada", 36, true);
console.log(label); // Ada (36) [admin]

// Without an annotation, TypeScript infers the type from the value:
let count = 10; // count: number
count = count + 1;
console.log(count); // 11

Wird eine Variable in derselben Zeile initialisiert, ist die Annotation meist überflüssig: let count = 10 hat bereits den Typ number. Die Regeln dafür, wann man Typen weglassen kann, stehen auf der Seite zur Typinferenz.

Ein falscher Typ ist ein Compilerfehler

Weist du einen Wert des falschen Typs zu, bricht der Compiler ab, bevor irgendetwas läuft:

// This does not compile: a string is not a number.
let port: number = 8080;
port = "3000";
console.log(port);

Der Compiler gibt aus:

index.ts(3,1): error TS2322: Type 'string' is not assignable to type 'number'.

Die Lösung ist, den Wert umzuwandeln, port = Number("3000"), oder die Annotation zu ändern, falls die Variable wirklich Text enthalten soll.

number: Es gibt keinen Integer-Typ

JavaScript speichert jede Zahl als 64-Bit-Gleitkommawert, deshalb hat TypeScript einen einzigen Typ number. Ganze Zahlen sind bis Number.MAX_SAFE_INTEGER (2 ** 53 - 1) exakt. Darüber hinaus nimmst du bigint.

let price: number = 19.99;
let quantity: number = 3; // also number: no int type

console.log(Number.isInteger(quantity)); // true
console.log(Number.isInteger(price));    // false
console.log(Math.trunc(7 / 2));          // 3 (integer division)
console.log(0.1 + 0.2);                  // 0.30000000000000004

console.log(Number.MAX_SAFE_INTEGER);     // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER + 2); // 9007199254740992 (wrong)

let exact: bigint = 9007199254740991n + 2n;
console.log(exact); // 9007199254740993n

// @ts-expect-error: bigint and number cannot be mixed
const mixed = () => exact + 1;
console.log(exact + BigInt(1), Number(exact)); // 9007199254740994n 9007199254740992

bigint und number lassen sich nicht mischen: exact + 1 ist ein Compilerfehler (TS2365: Operator '+' cannot be applied to types 'bigint' and '1'., wobei '1' der Literaltyp der 1 ist) und wäre, falls es je liefe, zur Laufzeit auch ein TypeError. Wandle eine Seite ausdrücklich mit BigInt(1) oder Number(exact) um, wobei Number Werte außerhalb des sicheren Bereichs rundet.

Einen Typ, der nur ganze Zahlen akzeptiert, kann TypeScript für beliebige Werte nicht ausdrücken. Prüfe mit Number.isInteger an der Stelle, an der der Wert in dein Programm kommt.

boolean

boolean hat genau zwei Werte, true und false. Werte, die nur truthy sind (1, "yes"), sind keine Booleans. Mach mit Boolean(x) oder x !== 0 einen daraus.

let loggedIn: boolean = false;
const items: string[] = ["a", "b"];

const hasItems: boolean = items.length > 0;
const hasName: boolean = Boolean("Ada");

console.log(loggedIn, hasItems, hasName); // false true true

null und undefined

Mit strict (seit TypeScript 6.0 der Standard) sind null und undefined eigene Typen und gehören nicht zu string, number oder einem anderen Typ. Eine Variable, die leer sein kann, sagt das mit einer Union:

let nickname: string | undefined;
console.log(nickname); // undefined

nickname = "Ace";
console.log(nickname.toUpperCase()); // ACE

let middleName: string | null = null;
console.log(middleName ?? "(none)"); // (none)

Eine Eigenschaft eines Werts zu lesen, der undefined sein könnte, ist ein Compilerfehler, bis du ihn prüfst. Die Seite zu null und undefined behandelt die Prüfungen, ?. und ??.

Arrays und Objekte im Überblick

Alles, was kein primitiver Wert ist, hat einen Objekttyp. Die drei Formen, die dir zuerst begegnen:

let tags: string[] = ["ts", "js"];               // array of strings
let point: { x: number; y: number } = { x: 1, y: 2 }; // object with two number properties
let greet: (name: string) => string = (n) => `hi ${n}`; // function type

Jede davon hat eine eigene Seite: Arrays, Tupel (Arrays fester Länge), Objekttypen und Funktionstypen.

string, number, boolean vs String, Number, Boolean

Die großgeschriebenen Namen sind die Typen der Wrapper-Objekte von JavaScript (new String("x")), nicht die gewöhnlicher Werte. Annotiere mit den kleingeschriebenen Namen.

// This does not compile: String (the wrapper) is not string (the primitive).
const wrapped: String = "text";
const plain: string = wrapped;
console.log(plain);

index.ts(3,7): error TS2322: Type 'String' is not assignable to type 'string'.
  'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.

Ändere in der ersten Zeile String zu string, und der Block läuft. Dasselbe gilt für Number, Boolean, Symbol und BigInt. (Object ist ein anderer Fall: Es akzeptiert fast jeden Wert, primitive eingeschlossen; siehe Objekttypen.)

Weitere eingebaute Typen

Ein paar weitere Typen tauchen früh auf. Jeder hat eine eigene Seite.