Domande colloquio TypeScript: 25 domande e risposte con codice

Queste sono le domande su TypeScript che i selezionatori fanno più spesso, con la risposta breve che dovresti saper dare e un piccolo esempio. Sono raggruppate per livello; per un ruolo junior di solito ci si ferma al primo gruppo, mentre per uno senior ci si aspetta che tu scriva a memoria i tipi dell'ultimo gruppo.

Domande per principianti

1. Cos'è TypeScript?

TypeScript è JavaScript con tipi statici, creato da Microsoft. Annoti i valori con dei tipi, il compilatore li controlla, poi rimuove i tipi e produce JavaScript semplice che gira ovunque giri 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

Senza il commento @ts-expect-error, la seconda chiamata è un errore di compilazione, quindi il bug non arriva mai in produzione.

2. TypeScript controlla i tipi a runtime?

No. I tipi vengono cancellati durante la compilazione; nell'output non ne resta traccia. L'esecuzione qui sopra stampa 23 perché niente a runtime sa che a dovrebbe essere un numero. Per controllare dati provenienti dall'esterno del programma (JSON, input dell'utente, risposte di API) scrivi controlli veri, come un type guard o un validatore di schemi.

3. Quali sono i tipi di base?

string, number (un solo tipo per interi e decimali; non esiste int), boolean, bigint, symbol, null e undefined, più gli array (number[]), le tuple ([string, number]), i tipi oggetto, any, unknown, never e void. Usa i nomi in minuscolo: String e Number sono i tipi degli oggetti wrapper.

4. Qual è la differenza tra any e unknown?

Entrambi accettano qualsiasi valore. any in più disattiva il controllo, quindi qualsiasi operazione compila. unknown non permette nulla finché non restringi il tipo, e questo lo rende il tipo sicuro per valori che non hai ancora controllato.

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. Cos'è l'inferenza di tipo?

Il compilatore ricava i tipi che non hai scritto: let count = 0 è un number, const mode = "dark" è il tipo letterale "dark", e il tipo di ritorno di una funzione viene dalle sue istruzioni return. La regola abituale è annotare i parametri delle funzioni e i tipi di ritorno pubblici, e lasciare all'inferenza le variabili locali.

6. Qual è la differenza tra interface e type?

Entrambi descrivono forme di oggetti, e una classe può fare implements di entrambi. Un'interface può essere riaperta e unita (declaration merging) e può fare extends di altre interfacce. Un alias type può dare un nome a qualsiasi cosa: unioni, tuple, primitivi, mapped e 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" };

Una convenzione diffusa è interface per le forme di oggetti e type per tutto il resto. Il confronto completo è nella pagina interface vs type.

7. Cosa sono gli union type e gli intersection type?

Un'unione A | B è un valore che è uno dei tipi; puoi usare solo i membri comuni a tutti finché non lo restringi. Un'intersezione A & B è un valore che è entrambi insieme, con tutti i membri di ciascuno.

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

8. Qual è la differenza tra void e never?

void è il tipo di ritorno di una funzione che termina normalmente senza un valore utile. never è il tipo di qualcosa che non può accadere: una funzione che lancia sempre un'eccezione o cicla all'infinito, o un'unione a cui sono stati tolti tutti i casi. never è assegnabile a ogni tipo, e nessun valore è assegnabile a never.

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

Domande di livello intermedio

9. Cos'è il type narrowing?

Il narrowing è il compilatore che segue i tuoi controlli e raffina un tipo dentro ogni ramo. Capisce typeof, instanceof, in, i controlli di uguaglianza, la truthiness e i type guard definiti dall'utente.

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. Cos'è un type guard definito dall'utente?

Una funzione il cui tipo di ritorno è value is T. Quando restituisce true, la variabile di chi chiama viene ristretta a T. Il compilatore si fida della funzione, quindi il suo corpo deve controllare davvero il valore.

interface Cat { meow(): void }

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

Una assertion function, function assertCat(v: unknown): asserts v is Cat, restringe il tipo lanciando un'eccezione invece di restituire false.

11. Cosa sono i generics?

Parametri di tipo che permettono a una funzione, classe o tipo di funzionare con molti tipi mantenendo il legame tra input e output. T viene dedotto dagli argomenti, ed extends vincola ciò che può essere.

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") sarebbe un errore di compilazione, perché "email" non fa parte di keyof del tipo utente.

12. Cosa fanno keyof e typeof in un tipo?

keyof T è l'unione dei nomi delle proprietà di T. In posizione di tipo, typeof x dà il tipo di una variabile. Insieme, keyof typeof obj trasforma le chiavi di un oggetto in un'unione.

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

13. Cosa sono gli utility types? Citane alcuni.

Tipi generici integrati che trasformano altri tipi. Quelli chiesti più spesso:

L'elenco completo è nella pagina utility types.

14. Cos'è una discriminated union?

Un'unione di tipi oggetto che condividono una proprietà "tag" letterale. Controllare il tag restringe il valore a un solo membro, e un controllo never nel ramo default fa segnalare al compilatore ogni caso che dimentichi.

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. Qual è la differenza tra as e satisfies?

value as T è una type assertion: dice al compilatore di trattare il valore come T e salta gran parte del controllo. value satisfies T controlla il valore rispetto a T ma mantiene il tipo proprio del valore, più preciso.

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

Quando l'oggetto è completo, satisfies mantiene anche il suo tipo dedotto: controllato rispetto a Record<string, string>, la variabile sa ancora esattamente quali chiavi ha, dove un'annotazione la allargherebbe a qualsiasi chiave stringa.

16. Cosa fa l'operatore ! dopo una variabile?

È la non-null assertion: el! rimuove null e undefined dal tipo. Non genera alcun controllo, quindi se il valore è davvero null, il programma va in crash dove viene usato. Preferisci ?., ?? o un if esplicito.

17. Qual è la differenza tra private e #private?

private è fatto rispettare solo dal compilatore; nell'output JavaScript la proprietà è una proprietà normale. #field è un campo privato di JavaScript, fatto rispettare dal runtime.

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 funziona come private ma permette anche l'accesso dalle sottoclassi, e readonly vieta la riassegnazione dopo la costruzione.

18. Qual è la differenza tra una classe astratta e un'interfaccia?

Un'interfaccia è solo un tipo: descrive una forma e sparisce dall'output. Una classe astratta è una classe vera che non può essere istanziata; può contenere metodi implementati, campi e costruttori accanto a membri abstract che le sottoclassi devono implementare. Una classe può implementare molte interfacce ma estendere una sola classe.

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. Cos'è l'overloading delle funzioni in TypeScript?

Diverse firme di chiamata seguite da un'unica implementazione la cui firma è compatibile con tutte. Chi chiama vede solo gli overload, quindi ogni chiamata ottiene un tipo di ritorno preciso.

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[]

Quando il tipo di ritorno non dipende dal tipo dell'argomento, una sola firma con un parametro unione è più semplice.

Domande avanzate

20. Cos'è la tipizzazione strutturale?

TypeScript confronta i tipi in base alla loro forma, non al loro nome. Qualsiasi valore con le proprietà richieste viene accettato, anche se non è mai stato dichiarato con quel tipo.

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)

Il color in più qui va bene perché pixel è una variabile. Passare direttamente l'oggetto letterale, show({ x: 3, y: 4, color: "red" }), è un errore di proprietà in eccesso, un controllo che vale solo per i letterali appena scritti. Quando due tipi con la stessa forma non devono mescolarsi (un UserId e un OrderId che sono entrambi stringhe), usa un branded type: type UserId = string & { readonly __brand: "UserId" }.

21. Come implementeresti da solo Readonly e Partial?

Con i mapped types: itera su keyof T e aggiungi un modificatore a ogni proprietà.

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. Cosa sono i conditional types e infer?

T extends U ? X : Y sceglie un tipo in base a una condizione. Dentro la condizione, infer dichiara una variabile di tipo che cattura una parte del tipo corrispondente. I conditional types si distribuiscono sulle unioni.

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)

Altri pattern sono nella pagina conditional types.

23. Cos'è un file .d.ts, e cosa fa declare?

Un file di dichiarazione contiene solo i tipi di codice che esiste altrove, come una libreria JavaScript o le API del browser. declare afferma che un valore esiste senza crearlo: declare const VERSION: string; compila in niente. I tipi delle librerie arrivano inclusi nel pacchetto o dai pacchetti @types/{name}, e tsc genera file .d.ts per il tuo codice con declaration: true.

24. Cosa fa strict, e quali opzioni di tsconfig contano di più?

"strict": true attiva noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables e strictBuiltinIteratorReturn. In TypeScript 7 è attivo per impostazione predefinita. Le altre opzioni su cui fanno domande:

25. Cos'è TypeScript 7?

Il compilatore di TypeScript riscritto in Go come programma nativo, pubblicato come versione 7 del pacchetto npm typescript. Il comando è sempre tsc e il linguaggio è lo stesso, ma è molto più veloce del compilatore 6.x basato su JavaScript: il team di TypeScript riporta accelerazioni da 8x a 12x su build complete tipiche, grazie al codice nativo e al multithreading a memoria condivisa. Rende anche effettive le rimozioni che la 6.0 aveva deprecato; per esempio baseUrl, outFile, moduleResolution: "node10", module: "amd" e alwaysStrict: false ora sono errori (TS5102, TS5108) che ti dicono di rimuoverli.