Die häufigsten Fragen in einem TypeScript-Interview

Kennen Sie diesen Moment, in dem der Personalvermittler schreibt: "Grundkenntnisse in TypeScript sind erforderlich", und beim Vorstellungsgespräch wird nach Kovarianz und Kontravarianz gefragt? Ja, ja, wir haben das alle durchgemacht. Es ist an der Zeit herauszufinden, was in TypeScript-Interviews tatsächlich gefragt wird und wie man antwortet, um wie eine Person auszusehen, die nicht nur die Dokumentation, sondern auch die Quellcodes des Compilers gelesen hat (Spoiler: nicht unbedingt).

Lassen Sie uns die beliebtesten Fragen analysieren, die sie gerne bei Vorstellungsgesprächen stellen. Aber nicht nur "was ist eine Schnittstelle", sondern mit realen Situationen und Erklärungen, warum es überhaupt jemanden interessiert.

1. „Was ist der Unterschied zwischen interface und type?“

Schwierigkeitsgrad: Scheint einfach, bis Sie anfangen zu antworten

Es ist wie die Frage „Was ist der Unterschied zwischen Pizza und Pasta“ – beide sind aus Teig, beide sind italienisch, aber die Servierung ist anders.

Eine kurze Antwort für Ungeduldige:

• interface - für Objekte, erweiterbar, kann mehrmals deklariert werden (Deklarationszusammenführung)

• type - für alles andere, einschließlich Union, Schnittpunkt, Primitive

Ausführliche Antwort für den Eindruck:

// Interface liebt Vererbung und Ergänzung
interface User {
  name: string;
}

interface User {
  age: number; // Wird mit dem vorherigen kombiniert!
}

// Typ - ist ein Alias, kann nicht überschrieben werden
type Product = {
  id: number;
}

// type Product = { ... } // ❌ Fehler!

// Aber type kann coole Sachen:
type Status = 'pending' | 'success' | 'error';
type Response<T> = { data: T } | { error: string };

Was man beim Vorstellungsgespräch sagen sollte: "In der Praxis verwende ich interface, um erweiterbare Datenstrukturen (z. B. API-Typen) zu beschreiben, und type für Union-Typen, Dienstprogramme und komplexere Konstruktionen. Interface ist aufgrund des Deklarationsmergings besser für Objekte geeignet."

2. „Was sind Generika und warum werden sie benötigt?“

Schwierigkeitsgrad: Klingt beängstigend, ist aber logisch

Generics sind wie Vorlagen in Word. Einmal geschrieben, ersetze alle Daten.

// Ohne Generic - Schmerz und Leid
function getFirstElementString(arr: string[]): string {
  return arr[0];
}

function getFirstElementNumber(arr: number[]): number {
  return arr[0];
}

// Mit Generic - einmal und für immer
function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

const firstString = getFirstElement(['a', 'b']); // string
const firstNumber = getFirstElement([1, 2, 3]); // number

Fortgeschrittenes Niveau (um zu überraschen):

// Generisch mit Einschränkungen
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Alexey', age: 25 };
getProperty(user, 'name'); // ✅ OK
getProperty(user, 'salary'); // ❌ Kompilierungsfehler!

3. „Erklären Sie unknown vs any vs never“

Schwierigkeitsgrad: Eine philosophische Frage in der Welt der Typen

Stell dir vor: any ist "es ist mir egal", unknown ist "ich weiß es nicht, aber ich werde es überprüfen", never ist "das kann überhaupt nicht sein".

// alles - Anarchie, mach was du willst
let chaos: any = 5;
chaos.doWhatever(); // Compiler: "Okay, deine Probleme"
// unbekannt - sichere Unsicherheit
let mystery: unknown = 5;
// mystery.doSomething(); // ❌ Fehler!

// Lassen Sie uns zuerst prüfen
if (typeof mystery === 'number') {
  mystery.toFixed(2); // ✅ Jetzt OK
}

// nie - für unerreichbaren Code
function throwError(message: string): never {
  throw new Error(message);
  // Der Code wird hier nie ankommen
}

type Shape = Circle | Square;
function getArea(shape: Shape) {
  switch(shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.size ** 2;
    default:
      const _exhaustive: never = shape; // Vollständigkeitsprüfung
      return _exhaustive;
  }
}

Goldene Regel: Verwende unknown anstelle von any, wenn du den Typ nicht kennst. Deine Kollegen werden es dir danken.

4. „Was sind Utility Types und welche verwendest du?“

Schwierigkeitsgrad: Zeigt an, ob Sie mit realen Projekten gearbeitet haben

Utility Types sind integrierte TypeScript-Helper. Es ist wie ein Schweizer Messer für Typen.

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

// Teilweise - alle Felder sind optional
type UserUpdate = Partial<User>;
// { id?: number; name?: string; ... }

// Pick - Wählen Sie die gewünschten Felder aus
type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }

// Omit - Felder ausschließen
type UserPublic = Omit<User, 'password'>;
// { id: number; name: string; email: string }

// Record - Struktur erstellen
type UserRoles = Record<'admin' | 'user' | 'guest', string[]>;
// { admin: string[]; user: string[]; guest: string[] }

// ReturnType - Typ des zurückgegebenen Wertes
function getUser() {
  return { id: 1, name: 'Alex' };
}
type User = ReturnType<typeof getUser>;

Lifehack für die Sozialhilfe: Erwähnen Sie Readonly, Required, NonNullable – Sie zeigen, dass Sie nicht nur die beliebten kennen.

5. „Was sind Type Guards und wie erstellt man sie?“

Schwierigkeitsgrad: Mittel, aber sehr praktisch

Type Guards ist eine Möglichkeit, TypeScript davon zu überzeugen, dass Sie wissen, welcher Datentyp vor Ihnen liegt.

// Einfacher Type Guard
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// Komplexer
interface Cat {
  meow: () => void;
}

interface Dog {
  bark: () => void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeSound(animal: Cat | Dog) {
  if (isCat(animal)) {
    animal.meow(); // TypeScript weiß, dass dies Cat ist
  } else {
    animal.bark(); // Und hier - Hund
  }
}

// Wir verwenden den 'in' -Operator
type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

6. „Erzählen Sie uns von keyof und typeof“

Schwierigkeitsgrad: Hier werden die Middles von den Joons getrennt

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

// keyof - wir erhalten die Union aller Schlüssel
type UserKeys = keyof User; // 'id' | 'name' | 'email'

// typeof - wir erhalten den Typ aus dem Wert
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

type Config = typeof config;
// { apiUrl: string; timeout: number; retries: number }

// Combo: keyof typeof
const Colors = {
  red: '#ff0000',
  blue: '#0000ff',
  green: '#00ff00'
} as const;

type ColorKey = keyof typeof Colors; // 'red' | 'blue' | 'green'

// Praktische Anwendung
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

7. „Was sind Mapped Types?“

Schwierigkeitsgrad: Senior territory

Mapped Types ist, wenn du einen Typ in einen anderen verwandelst, wie ein Alchemist.

type User = {
  name: string;
  age: number;
  email: string;
}

// Wir machen alle Felder schreibgeschützt
type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};

// Wir machen alle Felder optional
type PartialUser = {
  [K in keyof User]?: User[K];
};

// Wir machen alle Felder nullable
type NullableUser = {
  [K in keyof User]: User[K] | null;
};

// Getter erstellen
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// {
//   getName: () => string;
//   getAge: () => number;
//   getEmail: () => string;
// }

8. „Was ist der Unterschied zwischen den Typen enum und union?“

Schwierigkeitsgrad: Eine einfache Frage mit einem Haken

// Enum - erstellt ein echtes JavaScript-Objekt
enum Status {
  Pending = 'PENDING',
  Success = 'SUCCESS',
  Error = 'ERROR'
}

console.log(Status.Pending); // 'PENDING' - existiert in der Laufzeit!

// Union - nur auf Typenebene
type StatusUnion = 'PENDING' | 'SUCCESS' | 'ERROR';

// In der Laufzeit ist es nur eine Zeile
const status: StatusUnion = 'PENDING';

// Const enum - kompiliert in Werte
const enum Direction {
  Up,
  Down,
  Left,
  Right
}

const dir = Direction.Up; // Wird zu 0

Was ist zu sagen: "Ich bevorzuge Union-Typen für einfache Fälle, da sie keinen Laufzeitcode hinzufügen. Ich verwende Enum, wenn ich Feedback (Reverse Mapping) benötige oder wenn Werte in der Laufzeit benötigt werden."

9. „Was sind bedingte Typen?“

Schwierigkeitsgrad: Wenn du das verstanden hast, bist du kein Anfänger mehr

Conditional Types ist ein Ternäroperator für Typen.

// Grundlegende Syntax
type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

// Praktisches Beispiel
type Flatten<T> = T extends Array<infer U> ? U : T;

type StrArray = Flatten<string[]>; // string
type Num = Flatten<number>; // number

// Noch besser
type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type DefinitelyString = NonNullable<MaybeString>; // string

// Distributed Conditional Types
type ToArray<T> = T extends any ? T[] : never;
type StrOrNumArray = ToArray<string | number>;
// string[] | number[]

10. „Erzähl mir von infer keyword“

Schwierigkeitsgrad: Das ist schon Magie

infer ermöglicht es, den Typ aus einem anderen Typ zu "ziehen".

// Wir erhalten den Typ des Rückgabewerts der Funktion
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
  return { id: 1, name: 'Alex' };
}

type User = ReturnType<typeof getUser>; // { id: number; name: string }

// Wir erhalten den Typ des Array-Elements
type ArrayElement<T> = T extends (infer U)[] ? U : never;

type NumArray = number[];
type Num = ArrayElement<NumArray>; // number

// Wir erhalten den Typ der Funktionsparameter
type Parameters<T> = T extends (...args: infer P) => any ? P : never;

function createUser(name: string, age: number) {}

type CreateUserParams = Parameters<typeof createUser>; // [string, number]

// Promis
type Awaited<T> = T extends Promise<infer U> ? U : T;

type AsyncResult = Awaited<Promise<string>>; // string

💡 Aber wie kann man sich das alles merken und anwenden?

Ehrlich? Artikel zu lesen ist cool, aber ohne Übung wird alles in einer Woche verfliegen. Man muss wirklich Code schreiben und auf Probleme stoßen.

Deshalb haben wir Kodik entwickelt – eine App, in der Theorie sofort in die Praxis umgesetzt wird. Keine endlosen Vorlesungen, nur Code und Herausforderungen.

Außerdem haben wir Telegram-Kanal mit einer Community von über 2000 Entwicklern, wo jeden Tag nützliche Beiträge, Aufgabenanalysen, Meme (wo ohne sie) und Diskussionen veröffentlicht werden. Es ist wie Stack Overflow, nur menschlich und auf Russisch.

Bonusfragen, die auch gestellt werden können:

11. „Was ist Declaration Merging?“

interface Box {
  height: number;
}

interface Box {
  width: number;
}

// TypeScript kombiniert beides in:
// interface Box {
//   height: number;
//   width: number;
// }

12. „Wozu braucht man as const?“

// Ohne as const
const colors = ['red', 'blue']; // string[]

// Mit as const
const colorsConst = ['red', 'blue'] as const; // readonly ['red', 'blue']

// Praktische Anwendung
const routes = {
  home: '/',
  about: '/about',
  contact: '/contact'
} as const;

type Route = typeof routes[keyof typeof routes]; 
// '/' | '/about' | '/contact'

13. „Was sind Template Literal Types?“

type Direction = 'up' | 'down' | 'left' | 'right';
type Move = `move${Capitalize<Direction>}`; 
// 'moveUp' | 'moveDown' | 'moveLeft' | 'moveRight'

type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'

Fazit: So bereiten Sie sich auf das Vorstellungsgespräch vor

Eine Woche vor:

1. Gehen Sie durch die offizielle TypeScript-Dokumentation

2. Lösen Sie Aufgaben bei Type Challenges (github.com/type-challenges/type-challenges)

3. Üben Sie, Konzepte laut zu erklären

Am Tag vor:

1. Wiederholen Sie die wichtigsten Konzepte aus diesem Artikel

2. Bereiten Sie Beispiele aus Ihren Projekten vor

3. Schlaf genug (ernsthaft, das ist wichtiger als Pauken)

Beim Vorstellungsgespräch:

• Scheue dich nicht zu sagen: „Ich weiß es nicht, aber ich kann nachschauen.“

• Es ist besser, das Konzept mit eigenen Worten zu erklären, als die Dokumentation zu zitieren

• Stellen Sie klärende Fragen - das zeigt, dass Sie denken

Das Wichtigste: TypeScript ist ein Werkzeug, kein Selbstzweck. Warum Typisierung ist erforderlich, wichtiger als das Auswendiglernen aller Utility Types.

P.S. Wenn du nach dem Lesen verwirrt bist, ist das normal. TypeScript ist nicht etwas, das man über Nacht lernt. Kehre zu diesem Artikel zurück, probiere Beispiele aus, mache Fehler und lerne daraus. So funktioniert es.

Viel Glück bei den Vorstellungsgesprächen! Möge der Compiler mit Ihnen sein ✨