Pytania rekrutacyjne z TypeScript (25 z kodem)

Oto pytania z TypeScript, które rekruterzy zadają najczęściej, z krótką odpowiedzią, którą warto umieć podać, i małym przykładem. Są pogrupowane według poziomu; na stanowisko juniorskie zwykle wystarcza pierwsza grupa, a na seniorskie oczekuje się pisania z pamięci typów z ostatniej.

Pytania dla początkujących

1. Czym jest TypeScript?

TypeScript to JavaScript ze statycznymi typami, stworzony przez Microsoft. Oznaczasz wartości typami, kompilator je sprawdza, a potem usuwa typy i generuje zwykły JavaScript, który działa wszędzie tam, gdzie działa JavaScript.

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

console.log(add(2, 3)); // 5

// @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'number'.
const wrong = add("2", 3);
console.log(wrong); // 23: the call was forced through, and JavaScript concatenated

Bez komentarza @ts-expect-error drugie wywołanie jest błędem kompilacji, więc bug nigdy nie trafia na produkcję.

2. Czy TypeScript sprawdza typy w czasie działania?

Nie. Typy są usuwane podczas kompilacji; w wyniku nie zostaje po nich ślad. Powyższy przykład wypisuje 23, bo w czasie działania nic nie wie, że a powinno być liczbą. Żeby sprawdzić dane spoza programu (JSON, dane od użytkownika, odpowiedzi API), piszesz prawdziwe sprawdzenia, na przykład type guard albo walidator schematu.

3. Jakie są podstawowe typy?

string, number (jeden typ dla liczb całkowitych i zmiennoprzecinkowych; nie ma int), boolean, bigint, symbol, null i undefined, a do tego tablice (number[]), krotki ([string, number]), typy obiektowe, any, unknown, never i void. Używaj nazw pisanych małymi literami: String i Number to typy obiektów opakowujących.

4. Czym różni się any od unknown?

Oba przyjmują dowolną wartość. any dodatkowo wyłącza sprawdzanie, więc każda operacja się kompiluje. unknown nie pozwala na nic, dopóki go nie zawęzisz, dlatego jest bezpiecznym typem dla wartości, które nie zostały jeszcze sprawdzone.

let a: any = "hello";
a.toFixed; // allowed: any turns checking off

let u: unknown = "hello";
// @ts-expect-error 'u' is of type 'unknown'.
u.toUpperCase();

if (typeof u === "string") {
  console.log(u.toUpperCase()); // HELLO: narrowed to string
}

5. Czym jest wnioskowanie typów?

Kompilator sam ustala typy, których nie zapisujesz: let count = 0 to number, const mode = "dark" ma typ literałowy "dark", a typ zwracany funkcji wynika z jej instrukcji return. Typowa reguła to oznaczać typy parametrów funkcji i publicznych typów zwracanych, a zmienne lokalne zostawić wnioskowaniu.

6. Czym różni się interface od type?

Oba opisują kształty obiektów, a klasa może robić implements każdego z nich. interface można ponownie otworzyć i połączyć (declaration merging) oraz rozszerzać przez extends inne interfejsy. Alias type może nazwać cokolwiek: unie, krotki, prymitywy, mapped types i conditional types.

interface User { name: string }
interface User { age: number }       // merged: User has name and age

type Id = string | number;           // only a type alias can be a union
type Pair = [string, number];        // or a tuple
type Admin = User & { role: "admin" };

Częsta konwencja to interface dla kształtów obiektów i type dla całej reszty. Pełne porównanie jest na stronie interface vs type.

7. Czym są typy unii i przecięcia?

Unia A | B to wartość, która jest jednym z tych typów; dopóki jej nie zawęzisz, możesz używać tylko składowych wspólnych dla wszystkich. Przecięcie A & B to wartość, która jest oboma naraz i ma wszystkie składowe każdego z nich.

type Id = string | number;                 // either
type Timestamped = { createdAt: Date };
type Post = { title: string } & Timestamped; // both: title and createdAt

8. Czym różni się void od never?

void to typ zwracany funkcji, która kończy się normalnie, ale nie zwraca użytecznej wartości. never to typ czegoś, co nie może się wydarzyć: funkcji, która zawsze rzuca wyjątek albo nigdy się nie kończy, albo unii, z której usunięto wszystkie przypadki. never da się przypisać do każdego typu, a do never nie da się przypisać żadnej wartości.

function log(msg: string): void { console.log(msg); }
function fail(msg: string): never { throw new Error(msg); }
type Impossible = string & number; // never

Pytania na poziomie średnim

9. Czym jest zawężanie typów?

Zawężanie (narrowing) to śledzenie twoich sprawdzeń przez kompilator i doprecyzowywanie typu w każdej gałęzi. Kompilator rozumie typeof, instanceof, in, porównania, sprawdzanie prawdziwości i type guards definiowane przez użytkownika.

class ApiError extends Error {
  constructor(public status: number) {
    super(`HTTP ${status}`);
  }
}

type Input = string | number | { id: number } | ApiError;

function describe(x: Input): string {
  if (typeof x === "string") return `string of length ${x.length}`;
  if (typeof x === "number") return `number ${x.toFixed(1)}`;
  if (x instanceof ApiError) return `error with status ${x.status}`;
  return `object with id ${x.id}`; // only { id: number } is left
}

console.log(describe("hi"));             // string of length 2
console.log(describe(3));                // number 3.0
console.log(describe(new ApiError(404))); // error with status 404
console.log(describe({ id: 7 }));        // object with id 7

10. Czym jest type guard definiowany przez użytkownika?

To funkcja, której typ zwracany to value is T. Gdy zwraca true, zmienna wywołującego zostaje zawężona do T. Kompilator ufa tej funkcji, więc jej ciało musi naprawdę sprawdzać wartość.

interface Cat { meow(): void }

function isCat(value: unknown): value is Cat {
    return (
        typeof value === "object" &&
        value !== null &&
        "meow" in value &&
        typeof value.meow === "function"
    );
}

Funkcja asercji, function assertCat(v: unknown): asserts v is Cat, zawęża przez rzucenie wyjątku zamiast zwracania false.

11. Czym są generyki?

To parametry typu, dzięki którym jedna funkcja, klasa albo typ działa z wieloma typami i zachowuje powiązanie między wejściem a wyjściem. T jest wnioskowane z argumentów, a extends ogranicza, czym może być.

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([10, 20]);   // T is number, n is number | undefined
const s = first(["a", "b"]); // T is string

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

const users = [{ name: "Ada", age: 36 }, { name: "Lin", age: 29 }];
console.log(n, s, pluck(users, "name"), pluck(users, "age")); // 10 a [ 'Ada', 'Lin' ] [ 36, 29 ]

pluck(users, "email") byłoby błędem kompilacji, bo "email" nie jest keyof typu użytkownika.

12. Co robią keyof i typeof w typie?

keyof T to unia nazw właściwości T. W pozycji typu typeof x daje typ zmiennej. Razem keyof typeof obj zamienia klucze obiektu w unię.

const colors = { red: "#f00", green: "#0f0" };
type Colors = typeof colors;        // { red: string; green: string }
type ColorName = keyof typeof colors; // "red" | "green"

13. Czym są utility types? Wymień kilka.

To wbudowane typy generyczne, które przekształcają inne typy. Najczęściej pojawiają się w pytaniach:

Pełna lista jest na stronie o utility types.

14. Czym jest unia dyskryminowana?

To unia typów obiektowych, które mają wspólną literałową właściwość „tag”. Sprawdzenie tagu zawęża wartość do jednego elementu, a sprawdzenie z never w gałęzi default sprawia, że kompilator zgłasza każdy pominięty przypadek.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rect":
      return shape.width * shape.height;
    default: {
      const unreachable: never = shape;
      return unreachable;
    }
  }
}

console.log(area({ kind: "rect", width: 3, height: 4 }));    // 12
console.log(area({ kind: "circle", radius: 1 }).toFixed(2)); // 3.14

15. Czym różni się as od satisfies?

value as T to asercja typu: każe kompilatorowi traktować wartość jako T i pomija większość sprawdzeń. value satisfies T sprawdza wartość względem T, ale zachowuje własny, dokładniejszy typ wartości.

type Theme = { primary: string; secondary: string };

const a = { primary: "#07f" } as Theme;        // compiles: the missing key is not reported
const b = { primary: "#07f" } satisfies Theme; // error TS2741: Property 'secondary' is missing
const c = {} as { name: string };              // compiles; c.name is undefined at run time

Gdy obiekt jest kompletny, satisfies zachowuje też jego własny wywnioskowany typ: sprawdzona względem Record<string, string> zmienna nadal dokładnie wie, jakie ma klucze, a adnotacja poszerzyłaby ją do dowolnego klucza typu string.

16. Co robi operator ! po zmiennej?

To asercja non-null: el! usuwa null i undefined z typu. Nie generuje żadnego sprawdzenia, więc jeśli wartość faktycznie jest null, program wysypie się w miejscu użycia. Lepiej użyć ?., ?? albo jawnego if.

17. Czym różni się private od #private?

private egzekwuje tylko kompilator; w wynikowym JavaScripcie to zwykła właściwość. #field to prywatne pole JavaScriptu, egzekwowane przez środowisko uruchomieniowe.

class Account {
  private pin = "1234"; // TypeScript-only privacy
  #balance = 100;       // JavaScript private field

  get balance() {
    return this.#balance;
  }
}

const acc = new Account();
// acc.pin is error TS2341; bracket access is an allowed escape hatch,
// and at run time pin is an ordinary property:
console.log(acc["pin"]);       // 1234
console.log(Object.keys(acc)); // [ 'pin' ]
console.log(acc.balance);      // 100

protected działa jak private, ale pozwala też na dostęp z podklas, a readonly zabrania ponownego przypisania po konstrukcji.

18. Czym różni się klasa abstrakcyjna od interfejsu?

Interfejs to tylko typ: opisuje kształt i znika z wyniku. Klasa abstrakcyjna to prawdziwa klasa, której nie można zainstancjonować; może zawierać zaimplementowane metody, pola i konstruktory obok składowych abstract, które podklasy muszą zaimplementować. Klasa może implementować wiele interfejsów, ale rozszerzać tylko jedną klasę.

abstract class Repository<T> {
    protected items: T[] = [];
    abstract validate(item: T): boolean; // subclasses must implement
    add(item: T): void {                 // shared implementation
        if (this.validate(item)) this.items.push(item);
    }
}

19. Czym jest przeciążanie funkcji w TypeScript?

To kilka sygnatur wywołania, po których następuje jedna implementacja z sygnaturą zgodną z nimi wszystkimi. Wywołujący widzą tylko przeciążenia, więc każde wywołanie dostaje dokładny typ zwracany.

function parse(value: string): number;
function parse(value: string[]): number[];
function parse(value: string | string[]): number | number[] {
    return Array.isArray(value) ? value.map(Number) : Number(value);
}

const one = parse("4");          // number
const many = parse(["1", "2"]);  // number[]

Gdy typ zwracany nie zależy od typu argumentu, prostsza jest jedna sygnatura z parametrem typu unii.

Pytania zaawansowane

20. Czym jest typowanie strukturalne?

TypeScript porównuje typy według kształtu, a nie nazwy. Akceptowana jest każda wartość z wymaganymi właściwościami, nawet jeśli nigdy nie została zadeklarowana z tym typem.

interface Point {
  x: number;
  y: number;
}

function show(p: Point): string {
  return `(${p.x}, ${p.y})`;
}

const pixel = { x: 3, y: 4, color: "red" }; // never declared as a Point
console.log(show(pixel)); // (3, 4): it has the right shape, so it is a Point

class Vector {
  constructor(public x: number, public y: number) {}
}
console.log(show(new Vector(1, 2))); // (1, 2)

Dodatkowe color nie przeszkadza, bo pixel jest zmienną. Przekazanie literału obiektowego bezpośrednio, show({ x: 3, y: 4, color: "red" }), to błąd nadmiarowej właściwości, czyli sprawdzenie, które dotyczy tylko świeżych literałów. Gdy dwa typy o tym samym kształcie nie powinny się mieszać (UserId i OrderId, które oba są stringami), użyj branded type: type UserId = string & { readonly __brand: "UserId" }.

21. Jak samodzielnie zaimplementować Readonly i Partial?

Przez mapped types: przejdź po keyof T i dodaj modyfikator do każdej właściwości.

type MyReadonly<T> = { readonly [K in keyof T]: T[K] };
type MyPartial<T> = { [K in keyof T]?: T[K] };
type Mutable<T> = { -readonly [K in keyof T]: T[K] }; // "-" removes a modifier

type User = { name: string; age: number };
type Draft = MyPartial<User>; // { name?: string; age?: number }

22. Czym są conditional types i infer?

T extends U ? X : Y wybiera typ na podstawie warunku. Wewnątrz warunku infer deklaruje zmienną typu, która przechwytuje część dopasowanego typu. Conditional types rozkładają się na elementy unii.

type MyReturnType<F> = F extends (...args: any[]) => infer R ? R : never;
type ElementOf<T> = T extends (infer E)[] ? E : T;

type A = MyReturnType<() => Promise<number>>; // Promise<number>
type B = ElementOf<string[]>;                 // string
type C = ElementOf<number | boolean[]>;       // number | boolean (distributed)

Więcej wzorców jest na stronie o conditional types.

23. Czym jest plik .d.ts i co robi declare?

Plik deklaracji zawiera tylko typy dla kodu, który istnieje gdzie indziej, na przykład biblioteki JavaScript albo API przeglądarki. declare stwierdza, że wartość istnieje, bez jej tworzenia: declare const VERSION: string; kompiluje się do niczego. Typy bibliotek są dołączone do pakietu albo pochodzą z pakietów @types/{name}, a tsc generuje pliki .d.ts dla twojego kodu przy declaration: true.

24. Co robi strict i które opcje tsconfig są najważniejsze?

"strict": true włącza noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables i strictBuiltinIteratorReturn. W TypeScript 7 jest włączone domyślnie. Inne opcje, o które pytają rekruterzy:

25. Czym jest TypeScript 7?

To kompilator TypeScript przepisany w Go jako natywny program, wydany jako wersja 7 pakietu npm typescript. Polecenie to nadal tsc, a język jest ten sam, ale działa znacznie szybciej niż oparty na JavaScripcie kompilator 6.x: zespół TypeScript podaje przyspieszenie od 8x do 12x przy typowych pełnych buildach, dzięki natywnemu kodowi i wielowątkowości ze współdzieloną pamięcią. Egzekwuje też usunięcia, które 6.0 oznaczyło jako przestarzałe; na przykład baseUrl, outFile, moduleResolution: "node10", module: "amd" i alwaysStrict: false są teraz błędami (TS5102, TS5108), które każą je usunąć.