TypeScript Basic Types - Primitive Datentypen

In diesem Artikel lernst du alle wichtigen Basic Types in TypeScript kennen.

Primitive Types

string

Für Texte:

let name: string = "Max"
let greeting: string = 'Hallo'
let template: string = `Hello ${name}` // Template Strings

// Type Inference: TypeScript erkennt den Typ automatisch
let auto = "TypeScript" // auto ist vom Typ 'string'

number

Für Zahlen (Ganzzahlen und Dezimalzahlen):

let age: number = 25
let price: number = 19.99
let hex: number = 0xf00d // Hexadezimal
let binary: number = 0b1010 // Binär
let octal: number = 0o744 // Oktal

Wichtig: Es gibt nur EINEN number-Typ (kein int/float wie in anderen Sprachen)!

boolean

Für true/false:

let isActive: boolean = true
let hasAccess: boolean = false
let isValid: boolean = age > 18 // Ergebnis von Vergleich

null und undefined

let nothing: null = null
let notDefined: undefined = undefined

// Mit strictNullChecks: false (nicht empfohlen)
let name: string = null // OK

// Mit strictNullChecks: true (empfohlen)
let name: string = null // ❌ Error
let name: string | null = null // ✅ OK - Union Type

Best Practice: Nutze strictNullChecks: true in tsconfig.json!

Array Types

Syntax 1: Type[]

let numbers: number[] = [1, 2, 3, 4, 5]
let names: string[] = ["Max", "Anna", "Tom"]
let flags: boolean[] = [true, false, true]

// Methoden sind typsicher
numbers.push(6) // ✅ OK
numbers.push("7") // ❌ Error

Syntax 2: Array<Type>

let numbers: Array<number> = [1, 2, 3]
let names: Array<string> = ["Max", "Anna"]

Beide Syntaxen sind identisch, aber Type[] ist üblicher.

Mehrdimensionale Arrays

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

let grid: string[][] = [
  ["A", "B"],
  ["C", "D"]
]

Tuple Types

Tuples sind Arrays mit fester Länge und festen Typen:

// [string, number] - Genau 2 Elemente
let person: [string, number] = ["Max", 25]

// Zugriff
console.log(person[0]) // "Max" (string)
console.log(person[1]) // 25 (number)

// Fehler
let invalid: [string, number] = [25, "Max"] // ❌ Falsche Reihenfolge
let tooMany: [string, number] = ["Max", 25, true] // ❌ Zu viele

Tuple mit optionalen Elementen

let user: [string, number?] = ["Max"] // OK ohne age
let user2: [string, number?] = ["Anna", 30] // OK mit age

Labeled Tuples (seit TS 4.0)

let person: [name: string, age: number] = ["Max", 25]
// Bessere Lesbarkeit!

Enum Types

Enums für benannte Konstanten:

Numeric Enums

enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

let dir: Direction = Direction.Up
console.log(dir) // 0

// Custom Start-Wert
enum Status {
  Active = 1,
  Inactive = 2,
  Pending = 3
}

String Enums

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let color: Color = Color.Red
console.log(color) // "RED"

Empfehlung: Nutze String Enums für bessere Lesbarkeit im Runtime-Code!

Const Enums

const enum Direction {
  Up,
  Down,
  Left,
  Right
}

let dir = Direction.Up
// Im kompilierten JS: let dir = 0 (inline!)

Const Enums werden komplett wegoptimiert beim Kompilieren.

any Type

Der any Typ deaktiviert Type-Checking:

let anything: any = "Hello"
anything = 42 // OK
anything = true // OK
anything.foo.bar.baz // Kein Error! (aber Runtime-Crash möglich)

⚠️ WARNUNG: Vermeide any so gut es geht!

Wann any OK ist:

// Migrations-Code von JS zu TS
let legacy: any = oldJavaScriptFunction()

// JSON.parse() gibt any zurück
let data: any = JSON.parse('{"name": "Max"}')
// Besser: Validieren und typen

unknown Type

unknown ist der sichere any:

let value: unknown = "Hello"

// ❌ Direkter Zugriff nicht möglich
console.log(value.toUpperCase()) // Error

// ✅ Type Check nötig
if (typeof value === "string") {
  console.log(value.toUpperCase()) // OK!
}

Best Practice: Nutze unknown statt any!

void Type

Für Funktionen die nichts zurückgeben:

function logMessage(message: string): void {
  console.log(message)
  // Kein return
}

function doSomething(): void {
  return // OK - ohne Wert
  return undefined // OK
  return 42 // ❌ Error
}

never Type

Für Funktionen die nie zurückkehren:

// Wirft immer einen Error
function throwError(message: string): never {
  throw new Error(message)
}

// Endlosschleife
function infiniteLoop(): never {
  while (true) {
    // ...
  }
}

Unterschied zu void:

• void = Funktion kehrt zurück (ohne Wert)
• never = Funktion kehrt NIE zurück

object Type

Für Non-Primitives:

let obj: object = { name: "Max" }
let arr: object = [1, 2, 3]
let func: object = () => {}

// Aber: Keine Autovervollständigung!
console.log(obj.name) // ❌ Error

// Besser: Interfaces verwenden (nächster Artikel)

Type Inference

TypeScript erkennt Typen automatisch:

let name = "Max" // Type: string
let age = 25 // Type: number
let active = true // Type: boolean
let numbers = [1, 2, 3] // Type: number[]

// Keine manuelle Annotation nötig!

Best Practice: Nutze Type Inference wo möglich, spare explizite Typen!

// ❌ Zu verbose
let name: string = "Max"
let age: number = 25

// ✅ Besser - Type Inference
let name = "Max"
let age = 25

// ✅ Explizit wenn nötig
let name: string | null = null // Union Type
let callback: (x: number) => void // Funktions-Typ

// ❌ Unnötig
const add = (a: number, b: number): number => {
  return a + b
}

// ✅ Return-Typ wird automatisch erkannt
const add = (a: number, b: number) => {
  return a + b // Type: number
}

// Type: string
let name = "Max"

// Type: "Max" (literal type)
const name = "Max"

// as const für Arrays/Objects
const colors = ["red", "green", "blue"] as const
// Type: readonly ["red", "green", "blue"]

let x = 3 // Type: number (widened)
const y = 3 // Type: 3 (literal)

let arr = [1, 2, 3] // Type: number[]
const tuple = [1, 2, 3] as const // Type: readonly [1, 2, 3]

let data: any = fetchData()
let result: any = processData(data)

interface Data {
  id: number
  name: string
}

let data: Data = fetchData()

let person: [string, number] = ["Max", 25]
person.push(true) // Runtime OK, aber semantisch falsch!

// Tuple mit readonly
let person: readonly [string, number] = ["Max", 25]
person.push(true) // ❌ Compile Error

// noImplicitAny: false
function process(data) { // implizites 'any'
  return data.value
}

// noImplicitAny: true
function process(data: { value: string }) {
  return data.value
}

Nächste Schritte

Als Nächstes lernst du:

• Interfaces und Type Aliases
• Union und Intersection Types
• Type Guards und Type Narrowing
• Advanced Types

Viel Erfolg! 🚀