TypeScript Primitive Types: String vs string – Was ihr wirklich wissen müsst

Als Webdeveloper stolpert ihr früher oder später über diese kleinen, aber feinen Unterschiede in TypeScript: String vs string, Number vs number, Boolean vs boolean. Diese Verwirrung kostet euch wertvolle Entwicklungszeit und kann zu subtilen Bugs führen, die nur schwer zu debuggen sind.

Der Unterschied, der alles verändert

In TypeScript gibt es zwei verschiedene Arten, primitive Typen zu deklarieren – und die Wahl zwischen ihnen kann über Clean Code oder technische Schulden entscheiden. Hier ist der Punkt: Verwendet immer die lowercase Varianten (string, number, boolean). Die uppercase Versionen (String, Number, Boolean) sind Object Wrapper Types und führen zu unerwünschtem Verhalten.

typescript// ❌ Macht das nicht - Object Wrapper Types
let userNameBad: String = "Roland";
let ageBad: Number = 35;
let isDeveloperBad: Boolean = true;

// ✅ Das ist der Weg - Primitive Types
let userName: string = "Roland";
let age: number = 35;
let isDeveloper: boolean = true;

Warum das so wichtig ist

Die Object Wrapper Types können alle primitiven Werte akzeptieren, aber nicht umgekehrt. Das führt zu diesem Problem:

typescriptfunction greetUser(name: string) {
    return `Hallo ${name}!`;
}

let userNameWrong: String = "Never Code Alone";
// ❌ TypeScript Error: Argument of type 'String' is not assignable to parameter of type 'string'
greetUser(userNameWrong);

let userNameRight: string = "Never Code Alone";
// ✅ Funktioniert perfekt
greetUser(userNameRight);

Best Practices für euer Team

1. Primitive Types für Variablen und Parameter

typescript// ✅ Korrekte Deklarationen
interface User {
    name: string;
    email: string;
    age: number;
    isActive: boolean;
}

function createUser(name: string, email: string): User {
    return {
        name,
        email,
        age: 0,
        isActive: true
    };
}

2. Object Wrapper nur bei expliziter Objektnutzung

typescript// ✅ Nur wenn ihr wirklich das String-Objekt braucht
let stringObject: String = new String("Hallo Welt");
console.log(stringObject.length); // Zugriff auf String-Methoden

3. Union Types richtig einsetzen

typescript// ✅ Kombiniert primitive und null/undefined
type UserName = string | null;
type UserAge = number | undefined;

function processUser(name: UserName, age: UserAge) {
    if (name && age) {
        console.log(`User: ${name}, Age: ${age}`);
    }
}

Arrays und komplexe Typen

Auch bei Arrays und komplexeren Datenstrukturen gilt die gleiche Regel:

typescript// ❌ Vermeidet das
let tags: Array<String> = ["typescript", "javascript"];

// ✅ Verwendet das
let tags: string[] = ["typescript", "javascript"];
// oder
let tags: Array<string> = ["typescript", "javascript"];

Häufige Fallstricke in der Praxis

Problem 1: API Response Typing

typescript// ❌ Typischer Fehler
interface ApiResponse {
    message: String;
    status: Number;
    success: Boolean;
}

// ✅ Richtige Lösung
interface ApiResponse {
    message: string;
    status: number;
    success: boolean;
}

Problem 2: Function Overloading

typescript// ❌ Inkonsistent
function formatValue(value: string): string;
function formatValue(value: Number): string;

// ✅ Konsistent
function formatValue(value: string): string;
function formatValue(value: number): string;

Tools und Linting

Damit euer Team diese Fehler automatisch vermeidet, konfiguriert ESLint mit der TypeScript-Regel:

json{
    "rules": {
        "@typescript-eslint/ban-types": [
            "error",
            {
                "types": {
                    "String": "Use string instead",
                    "Number": "Use number instead",
                    "Boolean": "Use boolean instead"
                }
            }
        ]
    }
}

Fazit: Kleine Änderung, große Wirkung

Die Unterscheidung zwischen String und string mag trivial erscheinen, aber sie ist fundamental für sauberen TypeScript-Code. Mit den richtigen primitiven Typen schreibt ihr Code, der vorhersagbar ist, weniger Bugs produziert und von eurem gesamten Team verstanden wird.

Nächste Schritte:

• Überprüft euren bestehenden Code auf Object Wrapper Types
• Richtet die ESLint-Regel in eurem Projekt ein
• Teilt dieses Wissen mit eurem Team

Habt ihr Fragen zu TypeScript Best Practices oder wollt ihr euer Team schulen? Sprecht uns an – wir helfen euch dabei, eure Entwicklungsprozesse zu optimieren und die Codequalität nachhaltig zu verbessern.

---

Dieser Artikel ist Teil unserer TypeScript Best Practice Serie. Folgt uns für mehr Insights zu modernem Web Development und Clean Code Praktiken.