Die 40 wichtigsten Fragen und Antworten zu TypeScript für 2025

TypeScript hat sich von einer Nischen-Erweiterung von JavaScript zu einer wichtigen Sprache für moderne Webentwicklung entwickelt. 

Bei meiner Arbeit an Webanwendungen habe ich selbst gesehen, wie starke Typisierung und Wartbarkeit Fehler deutlich reduzieren und die Zusammenarbeit zwischen Teams verbessern können. 

TypeScript bietet all das, deshalb ist es zum Standard für moderne Entwicklung geworden.

Von Microsoft (dem Entwickler) bis hin zu Google, Airbnb und Netflix setzen viele Unternehmen auf TypeScript, um Produkte zu entwickeln, die in Frameworks wie React, Angular und Node.js geschrieben sind. 

In meinem Job habe ich oft Stellenanzeigen gesehen, in denen TypeScript-Kenntnisse als Kernanforderung und nicht als optionale Fähigkeit aufgeführt sind.

Da ich selbst TypeScript benutzt habe, kann ich sagen, dass es für jeden Entwickler, der sich auf technische Vorstellungsgespräche vorbereitet, wichtig ist, die Typen, Schnittstellen und erweiterten Funktionen zu verstehen.

Grundlegende Fragen zum Thema TypeScript im Vorstellungsgespräch

Schauen wir uns jetzt ein paar typische Fragen aus TypeScript-Vorstellungsgesprächen an und wie sie mit der Sicherheit und Klarheit von Code zusammenhängen.

1. Warum sollte man TypeScript statt JavaScript nutzen?

TypeScript bringt statische Typisierung und Fehlerprüfung beim Kompilieren mit, was Entwicklern hilft, Fehler früh zu erkennen und den Code berechenbarer zu machen.

Das sorgt für bessere Wartbarkeit und Skalierbarkeit.

2. Welche Probleme löst TypeScript?

TypeScript macht die Schwächen von JavaScript in Sachen Typsicherheit, Skalierbarkeit und Lesbarkeit klar.

Das Durchsetzen klarer Typdefinitionen verhindert kleine Laufzeitfehler und macht das Refactoring sicherer.

3. Was sind die Hauptvorteile der statischen Typisierung in TypeScript?

Statische Typisierung macht den Code zuverlässiger, die Autovervollständigung besser und die Entwickler produktiver.

Es hilft bei der frühen Erkennung von Typfehlern und ermöglicht es IDEs, umfangreichere Tool-Unterstützung anzubieten.

4. Was sind Typ-Annotationen und wozu sind sie gut?

Mit Typ-Annotationen können Entwickler Variablentypen klar angeben.

Das macht den Code übersichtlicher und reduziert Laufzeitfehler.

Hier ist ein Beispiel:

let username: string = "DataCamper";
let age: number = 25;
let isAdmin: boolean = true;

Im obigen Code stellt der Compiler sicher, dass jeder Variablen nur der richtige Typ zugewiesen werden kann.

Wenn du zum Beispiel versuchst, eine Zeichenfolge dem Alter zuzuweisen, gibt TypeScript eine Fehlermeldung aus, wodurch Fehler frühzeitig erkannt werden können.

Explizite Typisierung ist besonders wichtig für Funktionsparameter, Rückgabetypen und API-Verträge, weil sie anderen Entwicklern klar macht, was erwartet wird.

5. Was ist Typinferenz in TypeScript?

TypeScript kann Typen automatisch anhand der zugewiesenen Werte ermitteln.

Das heißt, du musst nicht immer explizit einen Typ angeben. TypeScript findet das für dich raus.

Hier ist ein Beispiel:

let count = 10;  // inferred as number
count = "hello"; // Error: Type 'string' is not assignable to type 'number'

In diesem Beispiel denkt TypeScript, dass count eine Zahl sein muss, weil es so anfängt. Wenn du später eine Zeichenkette zuweist, gibt's einen Fehler beim Kompilieren. 

Zu den besten Vorgehensweisen für die Typinferenz gehören:

• Benutze explizite Typen für exportierte Funktionen, Klassen und Schnittstellen, um klare Verträge zu schaffen.
• Lass Rückschlüsse auf lokale Variablen zu, wenn der Typ klar ist.
• Vermeide es, wenn möglich, weil es die Sicherheitsfunktionen von TypeScript umgeht.

6. Wie geht TypeScript mit Arrays, Tupeln und Enums um?

Mit TypeScript können Entwickler strenge Typen für Arrays, Tupel und Enums festlegen, um die Übersichtlichkeit zu verbessern und Laufzeitfehler zu vermeiden.

Hier ist ein Beispiel für ein typisiertes Array:

let scores: number[] = [95, 80, 85];
scores.push(100); // OK
scores.push("A+"); // Error

Typisierte Arrays sorgen dafür, dass alle Elemente im Array denselben Typ haben.

Hier ist ein Beispiel für ein Tupel:

let user: [string, number] = ["Don", 25];

Tupel sind Arrays mit fester Länge und bestimmten Typen für jede Position.

Sie sind nützlich für strukturierte Daten, bei denen die Reihenfolge und der Typ der Elemente wichtig sind.

Hier ist ein Beispiel für eine Aufzählung:

enum Status {
  Active,
  Inactive,
  Pending,
}
let currentStatus: Status = Status.Active;

Enums bieten benannte Konstanten, was die Lesbarkeit verbessert und ungültige Werte reduziert.

Sie sind besonders nützlich für Statuscodes, Rollen und Konfigurationsoptionen.

7. Was ist der Unterschied zwischen den Typen „any“, „unknown“ und „never“?

Die folgende Tabelle zeigt die wichtigsten Unterschiede zwischen den Typen „any“, „unknown“ und „never“ in TypeScript.

Hier ist ein Beispiel:

function fail(): never {
  throw new Error("Something went wrong");
}

Ein Tipp wäre, unbekannt gegenüber allen anderen zu bevorzugen, um die Typsicherheit zu wahren und gleichzeitig flexibel zu bleiben.

8. Was ist der Unterschied zwischen null und undefined in TypeScript?

Die Hauptunterschiede zwischen null und undefined sind:

• undefined bedeutet, dass eine Variable deklariert, aber noch nicht mit einem Wert belegt wurde.

• null ist ein expliziter Wert, der keinen Wert bedeutet.

Der Modus „strictNullChecks” von TypeScript behandelt sie als separate Typen, was versehentliche Fehler im Zusammenhang mit Null-Werten verhindert.

Hier ist ein Beispiel:

let a: string | null = null;
let b: string | undefined = undefined;

9. Was macht die Option „strict compiler“?

Das Flag „ strict “ aktiviert alle strengen Typüberprüfungsregeln von TypeScript, wie zum Beispiel:

• strictNullChecks: Verhindert, dass Variablen die Werte „ null “ und „ undefined “ zugewiesen werden, es sei denn, das ist ausdrücklich erlaubt. So lassen sich Nullreferenzfehler zur Laufzeit vermeiden.

• noImplicitAny: Alle Variablen müssen explizite Typen oder abgeleitete Typen haben, damit TypeScript nicht automatisch „ any “ verwendet.

• strictFunctionTypes: Sorgt für strengere Regeln bei der Kompatibilität von Funktionstypen und findet so Unstimmigkeiten bei den Parametern und Rückgabetypen von Funktionen.

• strictBindCallApply: Stellt sicher, dass die Methoden „ bind “, „ call “ und „ apply “ mit den richtigen Argumenttypen für Funktionen verwendet werden.

Es sorgt für sichereren, besser vorhersehbaren Code und findet kleine Fehler frühzeitig.

Interviewfragen zum TypeScript-Typsystem

Schauen wir uns jetzt ein paar wichtige Konzepte des TypeScript-Typsystems an, die in technischen Vorstellungsgesprächen oft angesprochen werden.

10. Was ist der Unterschied zwischen Schnittstellen und Typ-Aliasen in TypeScript?

Sowohl Schnittstellen als auch Typ-Aliase beschreiben die Form von Objekten, haben aber leicht unterschiedliche Zwecke.

Schnittstellen können mit „extends“ erweitert werden, was sie super für hierarchische Objektmodelle macht.

Typ-Aliase können Vereinigungen, Schnittmengen, Primitive und komplexere zusammengesetzte Typen darstellen.

Hier ist ein Beispiel:

interface Person {
  name: string;
  age: number;
}

type Employee = {
  name: string;
  department: string;
};

Benutze Schnittstellen, wenn du Objektformen oder Klassenverträge festlegst.

Benutze Typ-Aliase, wenn du flexible, zusammensetzbare Typen wie Vereinigungen oder Schnittmengen brauchst.

11. Was sind Vereinigungs- und Schnittmengen-Typen in TypeScript?

Union-Typen lassen zu, dass eine Variable mehrere mögliche Typen haben kann, während Schnittmengen-Typen mehrere Typen zu einem kombinieren.

Hier ist ein Beispiel für eine Vereinigung:

let id: string | number;
id = ‘abc’; // OK
id = 123; // OK

Hier ist ein Beispiel für eine Kreuzung:

type Admin = { name: string };
type Permissions = { canEdit: boolean };
type AdminUser = Admin & Permissions;

Union-Typen werden oft in Funktionsparametern benutzt.

Schnittpunkttypen kommen oft in komplizierten Objektkompositionen vor.

12. Was ist Typverengung und wie funktionieren Typ-Guards?

Durch Typverengung kann TypeScript anhand des Kontrollflusses einen genaueren Typ ermitteln.

Hier ist ein Beispiel:

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed());
  }
}

Typüberprüfungen sorgen für einen sicheren Laufzeitbetrieb, indem sie den Typ überprüfen, bevor bestimmte Aktionen durchgeführt werden.

Du kannst Folgendes verwenden:

• typeoffür Primitive

• instanceoffür den Unterricht

• Custom type guards: Mit dem Parameter „ Type “

Typenschutz verbessert die Typsicherheit und reduziert Laufzeitfehler.

13. Was sind Literaltypen und diskriminierte Vereinigungen in TypeScript?

Literaltypen beschränken eine Variable auf eine bestimmte Menge vordefinierter Werte.

Hier ist ein Beispiel:

let direction: "up" | "down" | "left" | "right";

Diskriminierte Unionen kombinieren Literaltypen mit Objektvarianten für das Musterabgleich.

Hier ist ein Beispiel:

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(shape: Shape): number {
  if (shape.kind === "circle") return Math.PI * shape.radius ** 2;
  return shape.side ** 2;
}

Diskriminierte Unions machen sicheres Branching bei Objekttypen möglich und vereinfachen die Logik in komplexen Anwendungen.

14. Was sind keyof, typeof und in in TypeScript?

Diese Operatoren bieten leistungsstarke Reflexion auf Typebene.

• Keyof: Ruft die Eigenschaftsnamen eines Typs ab.

• typeof: Ruft den Typ eines Werts ab

• in: wird in abgebildeten Typen benutzt

Hier ist ein Beispiel:

type Keys = keyof User; // "name" | "age"
const person = { name: "Alice", age: 25 };
type PersonType = typeof person; // { name: string; age: number }

15. Was sind Indexsignaturen in TypeScript?

Indexsignaturen lassen Objekte mit dynamischen Schlüsseln zu.

Hier ist ein Beispiel:

interface Errors {
  [key: string]: string;
}

const messages: Errors = {
  email: "Invalid email",
  password: "Required"
};

Die werden für Wörterbücher, kartenähnliche Sachen oder dynamische Konfigurationsmuster benutzt.

16. Was ist strukturelle Typisierung in TypeScript?

Strukturelle Typisierung (Duck Typing) heißt, dass Typen aufgrund ihrer Struktur kompatibel sind, nicht wegen ihres Namens.

Hier ist ein Beispiel:

interface Point { x: number; y: number; }
let p = { x: 10, y: 20, z: 30 };
let q: Point = p; // OK because structural match

Das macht TypeScript flexibel und passt super zu JavaScript-Mustern.

17. Was ist das Zusammenführen von Deklarationen in TypeScript?

Eine Deklarationszusammenführung passiert, wenn TypeScript mehrere Deklarationen mit demselben Namen zusammenwirft.

Hier ist ein Beispiel, wie man zwei Schnittstellen zusammenführt:

interface User { name: string; }
interface User { age: number; }
const u: User = { name: "Rob", age: 30 }; // merged

Das ist praktisch, wenn du Typen von Drittanbietern erweitern oder Bibliotheken ergänzen willst.

Fragen für Fortgeschrittene zu TypeScript im Vorstellungsgespräch

Hier sind ein paar fortgeschrittene Fragen und Antworten zum Thema TypeScript für Vorstellungsgespräche.

18. Was sind Generika in TypeScript und wozu sind sie gut?

Mit Generika kannst du wiederverwendbare, typsichere Funktionen und Klassen schreiben, die mit mehreren Datentypen funktionieren.

Hier ist ein Beispiel für eine generische Funktion:

function identity<T>(value: T): T {
  return value;
}

let output = identity<string>("DataCamp");
let outputNumber = identity<number>(42);

Hier ist ein Beispiel für eine generische Klasse:

class Box<T> {
  content: T;
  constructor(content: T) {
    this.content = content;
  }
  getContent(): T {
    return this.content;
  }
}

let stringBox = new Box("Hello");
let numberBox = new Box(123);

Zu den bewährten Methoden gehören:

• Benutz beschreibende Namen wie „ “, „ “ oder domänenspezifische Namen.

• Vermeide unnötige Komplexität.

• Benutze Einschränkungen (extends), um die akzeptierten Typen zu beschränken.

Generics machen den Code wiederverwendbarer, indem sie doppelte Arbeit vermeiden und für einheitliche Typisierung sorgen.

19. Was sind TypeScript-Utility-Typen und wie werden sie benutzt?

TypeScript hat eingebaute Utility-Typen, mit denen du vorhandene Typen effizient bearbeiten und umwandeln kannst.

Hier ist ein Beispiel:

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type PartialTodo = Partial<Todo>; // all properties optional
type RequiredTodo = Required<Todo>; // all properties required
type TodoPreview = Pick<Todo, "title" | "completed">; // select specific properties
type TodoWithoutDescription = Omit<Todo, "description">; // exclude properties

Die sind besonders praktisch, wenn du mit API-Antworten, Formularen oder Komponenten-Props arbeitest.

Ein Tipp wäre, wann immer möglich Utility-Typen zu nutzen, um den Code zu vereinfachen und die Typkonsistenz sicherzustellen.

20. Was sind bedingte und zugeordnete Typen in TypeScript?

Mit bedingten Typen kannst du Logik innerhalb von Typen basierend auf den Beziehungen zwischen ihnen definieren.

Hier ist ein Beispiel:

type IsString<T> = T extends string ? "yes" : "no";
type Result1 = IsString<string>; // "yes"
type Result2 = IsString<number>; // "no"

Mit zugeordneten Typen kannst du alle Eigenschaften eines Typs auf einmal umwandeln.

Hier ist ein Beispiel:

type ReadonlyTodo = {
  readonly [K in keyof Todo]: Todo[K];
};

type OptionalTodo = {
  [K in keyof Todo]?: Todo[K];
};

Die wichtigsten Unterschiede sind:

• keyof holt die Eigenschaftsnamen eines Typs raus.
• typeof ermittelt den Typ einer Variablen oder eines Objekts. Wenn man sie kombiniert, kann man Typen dynamisch bearbeiten und sicherer umgestalten.

21. Wofürwird das Schlüsselwort „infer“in TypeScript benutzt?

infer Lässt dich einen Typ innerhalb eines bedingten Typs extrahieren (ableiten).

Hier ist ein Beispiel:

type ReturnType<T> =
  T extends (...args: any[]) => infer R ? R : never;

type R = ReturnType<() => number>; // number

Wird oft in fortgeschrittenen Dienstprogrammen und generischen Typumwandlungen benutzt.

22. Was sind Template-Literal-Typen?

Template-Literal-Typen machen String-Typen mit Interpolation.

Hier ist ein Beispiel:

type Event = ${string}Changed;
let e: Event = "nameChanged"; // OK

Das ist nützlich für:

• Veranstaltungsbenennung
• CSS-Klassenmuster
• API-Routenmuster

23. Was sind „satisfies“ und „as const“ inTypeScript?

satisfies sorgt dafür, dass ein Wert einem Typ entspricht, aber seinen eigenen Literaltyp behält. 

Zum Beispiel:

const config = {
  mode: "dark",
  version: 1
} satisfies { mode: string; version: number };

as const macht alle Eigenschaften schreibgeschützt und unveränderlich. 

Zum Beispiel:

const directions = ["up", "down"] as const;
// type is readonly ["up", "down"]

Sowohl „ satisfies ” als auch „ as const ” sind nützlich in React, Konfigurationsobjekten und diskriminierten Vereinigungen.

Interviewfragen zu TypeScript-Funktionen und -Objekten

In diesem Abschnitt schauen wir uns TypeScript-Interviewfragen zu Funktionen und Objekten an.

24. Wie funktioniert Funktionsüberladung in TypeScript?

Mit Funktionsüberladung kannst du mehrere Funktionssignaturen für verschiedene Argumenttypen oder -muster festlegen.

Hier ist ein Beispiel:

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
  return a + b;
}

let sumNumbers = add(5, 10); // 15
let sumStrings = add("Hello, ", "World"); // "Hello, World"

Zu den bewährten Methoden gehören:

• Sag alle möglichen Überladungen vor der Umsetzung an.
• Benutz Typenschutz, um sicher mit mehreren Typen umzugehen.

25. Was sind optionale Parameter und Restparameter in TypeScript?

Optionale Parameter und Restparameter machen Funktionen flexibler und ausdrucksstärker.

Hier ist ein Beispiel:

function greet(name: string, age?: number) {
  console.log(Hello ${name}, age: ${age ?? "unknown"});
}

function sum(...numbers: number[]) {
  return numbers.reduce((a, b) => a + b, 0);
}

Die wichtigsten Regeln für die Verwendung von optionalen Parametern und Restparametern sind:

• Benutze ? für optionale Parameter.

• Benutze „ ... ” für Restparameter (variadische Argumente).

Diese werden oft in Vorstellungsgesprächen getestet, um zu sehen, wie gut du mit dynamischen Aufgaben umgehen kannst.

26. Was ist der Unterschied zwischen „readonly“ und „const“ in TypeScript?

const gilt für Variablen, während „ readonly “ für Objekteigenschaften gilt.

Hier ist ein Beispiel:

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "Bob" };
// user.id = 2; // Error: Cannot assign to 'id'

const { id, name } = user;
console.log(User ${name} has ID ${id});

Ein paar Tipps für die Nutzung von readonly und const sind:

• Benutze „readonly” für Objekte, die nicht geändert werden sollen, wie zum Beispiel Daten, die von einer API zurückgegeben werden.
• Benutze const für Variablen, die nicht neu zugewiesen werden sollen.
• Kombiniere Destrukturierung mit Typ-Annotationen, um saubereren, selbstdokumentierenden Code zu schreiben.

27. Was ist Funktionsartvarianz (Kovarianz und Kontravarianz)?

Die Funktionsvarianz beschreibt, wie TypeScript anhand der Parametertypen und Rückgabetypen entscheidet, ob ein Funktionstyp einen anderen sicher ersetzen kann.

Rückgabetypen: Kovariant

Eine Funktion darf einen spezifischeren Typ zurückgeben, als der Aufrufer erwartet. Zum Beispiel:

type Animal = { name: string };
type Dog = Animal & { bark: () => void };

let f: () => Animal;
let g: () => Dog = () => ({ name: "Rex", bark() {} });

f = g; // OK: Dog is a subtype of Animal

Parametertypen: Kontravariant

Eine Funktion darf allgemeinere Parametertypen akzeptieren als erwartet. Zum Beispiel:

type Dog = { name: string; bark: () => void };
type Animal = { name: string };

type HandleDog = (dog: Dog) => void;
type HandleAnimal = (animal: Animal) => void;

let handleDog: HandleDog = d => console.log(d.bark());
let handleAnimal: HandleAnimal = a => console.log(a.name);

// A function that accepts an Animal is more general,
// so it can stand in for one that accepts a Dog
handleDog = handleAnimal; // OK

28. Was sind diese Typen in TypeScript?

this Typen lassen Methoden denselben Typ wie die Klasse zurückgeben, was für flüssige APIs nützlich ist:

class Builder {
  setName(name: string): this {
    // ...
    return this;
  }
}
new Builder().setName("Test"); // chaining works

Interviewfragen zu TypeScript OOP

Die folgenden Fragen decken wichtige TypeScript-OOP-Konzepte ab, die in technischen Vorstellungsgesprächen oft angesprochen werden.

29. Wie unterstützt TypeScript die objektorientierte Programmierung (OOP)?

TypeScript unterstützt OOP-Prinzipien wie Klassen, Vererbung und Zugriffsmodifizierer.

Klassen sind wie wiederverwendbare Blaupausen für Objekte, und durch Vererbung kann eine Klasse eine andere erweitern, um Eigenschaften und Verhaltensweisen zu teilen.

Hier ist ein Beispiel:

class Animal {
  constructor(public name: string) {}

  move(distance: number) {
    console.log(${this.name} moved ${distance}m.);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark();       // Woof!
dog.move(10);     // Buddy moved 10m.

Zugriffsmodifizierer sind:

• öffentlich: überall zugänglich
• geschützt: in der Klasse und ihren Unterklassen zugänglich
• privat: nur innerhalb der Klasse zugänglich, in der es deklariert ist

Ein Tipp wäre, Zugriffsmodifizierer zu verwenden, um die Kapselung sicherzustellen, wodurch eine unbeabsichtigte Änderung der internen Klassenlogik oder des internen Zustands verhindert wird.

30. Was ist der Unterschied zwischen abstrakten Klassen und Schnittstellen in TypeScript?

Sowohl abstrakte Klassen als auch Schnittstellen legen Verträge für Objekte oder Klassen fest, haben aber unterschiedliche Aufgaben.

Abstrakte Klassen können gemeinsame Implementierungen und abstrakte Methoden haben.

Schnittstellen beschreiben nur die Struktur, nicht die Umsetzung.

Hier ist ein Beispiel:

abstract class Shape {
  abstract getArea(): number; // must be implemented
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
  }

  getArea(): number {
    return Math.PI * this.radius ** 2;
  }
}

Zu den bewährten Methoden gehören:

• Benutz abstrakte Klassen, wenn du gemeinsame Logik für verwandte Klassen brauchst.
• Nutze Schnittstellen für flexible Typverträge und ein entkoppeltes Code-Design.

31. Was ist der Unterschied zwischen den Modifikatoren „private“, „protected“ und „public“?

Hier ist ein Vergleich der Zugriffsmodifizierer von TypeScript und was sie steuern:

Die Verwendung des richtigen Zugriffsmodifizierers fördert die Kapselung, wodurch sichergestellt wird, dass der interne Zustand und die interne Logik nicht unerwartet abgerufen oder geändert werden können.

32. Was ist der Unterschied zwischen „implements“ und „extends“?

extends übernimmt Verhalten und Eigenschaften, während implements einen Vertrag durchsetzt, aber keine Implementierung bereitstellt.

Hier ist ein Beispiel:

interface Logger { log(msg: string): void; }

class Base { foo() {} }

class MyClass extends Base implements Logger {
  log(msg: string) {}
}

33. Wie funktionieren Mixins in TypeScript?

Mixins ermöglichen mehrere wiederverwendbare Klassenkomponenten.

Hier ist ein Beispiel:

type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

class User {}
const TimestampedUser = Timestamped(User);

Nützlich, wenn du mehrere Vererbungsmuster brauchst.

Praktische Fragen zum Thema TypeScript für Vorstellungsgespräche

Diese Fragen drehen sich um echte Anwendungen von TypeScript, die in Vorstellungsgesprächen oft auftauchen.

34. Wie würdest du ein JavaScript-Projekt nach TypeScript umsetzen?

Die Umstellung einer alten JavaScript-Codebasis auf TypeScript sollte schrittweise erfolgen, um Risiken und Störungen zu minimieren.

Der empfohlene Ansatz ist:

1. Benenne die Dateien „ .js “ in „ .ts “ um.

2. Aktiviere „ allowJs “ und „ checkJs “ in der Datei „tsconfig.json“.

3. Füge nach und nach Typen hinzu, fang mit den Kernfunktionen oder -modulen an.

4. Benutz das vorübergehend und ersetz es dann durch die richtigen Typen, wenn du den Code verfeinerst.

Beispiel für tsconfig.json für eine schrittweise Migration:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "strict": true
  }
}

Die schrittweise Migration sorgt für Stabilität und lässt Teams frühzeitig von der Typprüfung profitieren, ohne dass große Umschreibungen nötig sind.

35. Wie benutzt man TypeScript mit React?

Die Verwendung von TypeScript in React macht die Typsicherheit für Props und State besser, was dabei hilft, Laufzeitfehler zu vermeiden.

Hier ist ein Beispiel:

interface Props {
  title: string;
}

const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

Durch das Definieren von Prop-Typen kann TypeScript fehlende oder falsch eingegebene Props schon beim Kompilieren erkennen, was die Zuverlässigkeit und die Produktivität der Entwickler verbessert.

36. Wie benutzt man TypeScript mit Node.js?

TypeScript macht Node.js-Apps besser, indem es Typsicherheit für API-Routen, Konfigurationen und Middleware bringt.

Hier ist ein Beispiel:

import express, { Request, Response } from "express";
const app = express();

app.get("/", (req: Request, res: Response) => res.send("Hello TypeScript"));

Wenn du Request und Response eingibst, stellst du sicher, dass die Parameter richtig verwendet werden, und vermeidest häufige Laufzeitfehler.

TypeScript macht es einfacher, Node.js-APIs zu pflegen und sicher umzugestalten.

37. Wie gehst du mit JavaScript-Bibliotheken von Drittanbietern um, für die es keine TypeScript-Definitionen gibt?

Einige Bibliotheken haben keine eingebauten Typen. In diesen Fällen hast du zwei Möglichkeiten:

Option 1: Von der Community gepflegte Typen installieren

npm install --save-dev @types/library-name

Option 2: Erstell eine eigene Deklarationsdatei

// custom.d.ts
declare module "legacy-library" {
  export function init(): void;
}

Tipps sind zum Beispiel:

• Schau immer auf @types vorbei, bevor du Zollanmeldungen machst.

• Füge nach und nach Typen für komplexe Bibliotheken hinzu, um die Kompatibilität sicherzustellen.

Das richtige Typisieren von Bibliotheken von Drittanbietern macht die Sache zuverlässiger und reduziert Fehler während der Laufzeit.

Interviewfragen zu TypeScript-Konfiguration und -Tools

In diesem Abschnitt geht's um wichtige Themen rund um die Konfiguration und die Tools von TypeScript, die oft in technischen Vorstellungsgesprächen angesprochen werden.

38. Was ist tsconfig.json und warum ist es wichtig?

Die Datei „tsconfig.json“ ist die zentrale Konfiguration für jedes TypeScript-Projekt. 

Es legt das Verhalten des Compilers fest, fügt Dateien hinzu und aktiviert Funktionen.

Hier ist ein Beispiel:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Die wichtigsten Einstellungen sind:

• target: JavaScript-Version für die Ausgabe

• module: Modulsystem (CommonJS, ESNext usw.)

• strict: Aktiviert alle Optionen für strenge Typprüfung

• outDir: Ausgabeordner für kompilierten Code

• esModuleInterop: Ermöglicht den Import von CommonJS-Modulen

Stell sicher, dass du den strengen Modus aktivierst, um mögliche Fehler frühzeitig zu erkennen und die Wartbarkeit zu verbessern.

39. Wie richtest du TypeScript mit Build-Tools wie Webpack, Vite oder Babel ein?

TypeScript lässt sich super in moderne Build-Systeme einbinden.

Typische Konfigurationen sind:

• Webpack: ts-loader für die Kompilierung im laufenden Betrieb

• Vite: vite-plugin-ts für schnelle Builds

• Babel: @babel/preset-typescript für Umgebungen mit viel JavaScript

Beispiel für eine Vite-Konfiguration:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  build: {
    target: "es2020"
  }
});

Stell die Einstellungen für den Compiler und den Bundler richtig ein, schalte inkrementelle Builds frei und nutze Source Maps, um das Debuggen einfacher zu machen.

40. Wie stellst du ESLint mit TypeScript ein, um die Codequalität zu verbessern?

ESLint hilft dabei, einheitliche Codierungsstandards einzuhalten und Fehler frühzeitig zu erkennen.

Installiere die benötigten Pakete:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Beispiel für eine ESLint-Konfiguration:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

Tipps sind zum Beispiel:

• Vermeide es, Regeln komplett zu deaktivieren.
• Passe die Regeln pro Projekt an, um Typsicherheit und Flexibilität unter einen Hut zu bringen.
• Benutz ESLint zusammen mit Prettier, um einen einheitlichen und sauberen Code zu haben.

Tipps für ein erfolgreiches TypeScript-Vorstellungsgespräch

Vor deinem Vorstellungsgespräch solltest du dich darauf konzentrieren, sowohl deine technischen Fähigkeiten als auch deine Kommunikationsfähigkeiten zu verbessern.

Hier sind ein paar Möglichkeiten, wie du das machen kannst:

Studienansatz:

• Schau dir die offiziellen Unterlagen zu fortgeschrittenen Typen, Generika und Utility-Typen an.
• Konzentrier dich lieber auf echte Anwendungsfälle als aufs Auswendiglernen.
• Übe, Typfehler zu lesen und zu verstehen, vor allem weil TypeScript-Compiler-Meldungen oft Teil von technischen Bewertungen sind.

Praxisprojekte:

• Mach kleine, aber komplette Apps, um praktische Fähigkeiten zu zeigen:
• React-To-Do-Liste mit eingegebenen Props und Status.
• Express REST API mit typisierten Anfrage- und Antwortobjekten.
• Hilfsbibliotheken, die Generika und abgebildete Typen nutzen.

Häufige Probleme:

• Überbeanspruchung beliebiger, was die Typsicherheit von TypeScript beeinträchtigt.
• Den strengen Modus ignorieren, was zu Laufzeitfehlern führt.
• Verwirrend null und undefined in Typdefinitionen.
• Vergessen, Typdefinitionen für Bibliotheken von Drittanbietern zu installieren oder einzurichten.

Kommunikationstipps:

• Erkläre in Vorstellungsgesprächen klar deine Gründe für Entscheidungen bezüglich der Schriftart.
• Erkläre die Vor- und Nachteile der verschiedenen Ansätze (z. B. Schnittstelle vs. Typalias oder abstrakte Klasse vs. Schnittstelle).
• Zeig mal, wie TypeScript die Wartbarkeit und Skalierbarkeit in Projekten verbessert.

Fazit

TypeScript ist immer noch top in der modernen Webentwicklung, weil es klare, einheitliche Datentypen durchsetzt, die helfen, Fehler zu vermeiden und die Skalierbarkeit bei großen Projekten zu verbessern.

Um weiterzulernen, schau dir unseren kompletten Kurskatalog an und baue dein Wissen über verschiedene Technologien weiter aus.