Comment réussir un entretien TypeScript : les meilleures questions de niveau avancé

Entretien avancé TypeScript : comment impressionner un employeur

TypeScript a depuis longtemps cessé d'être un simple « sur-ensemble » de JavaScript. Lors des entretiens modernes pour les postes Senior, on teste non seulement la connaissance des types, mais aussi la capacité à travailler avec les types conditionnels, le mapping, les décorateurs et le système d'inférence de types. Dans cet article, nous analyserons 4 sujets clés qui vous aideront à réussir avec confiance un entretien technique TypeScript de niveau avancé.

1. Types conditionnels (Conditional Types) et le mot-clé infer

Les types conditionnels permettent de choisir l'un des deux types en fonction d'une condition. Ils sont construits sur le principe de l'opérateur ternaire : T extends U ? X : Y. Lors d'un entretien, on peut vous demander d'écrire un type qui extrait le type de retour d'une fonction.

// Exemple : extraction du type de retour d'une fonctiontype ReturnTypeExtract<T> = T extends (...args: any[]) => infer R ? R : never;

function greet(name: string): string {  return "Bonjour, " + name;}

type GreetReturn = ReturnTypeExtract<typeof greet>; // string

Le mot-clé infer est utilisé dans les types conditionnels pour déclarer une nouvelle variable de type. Il permet d'« extraire » une partie d'un type à partir d'une structure complexe. On demande souvent : « Qu'est-ce que infer et où est-il utilisé ? ». Réponse : pour extraire des types de promesses, fonctions, tuples.

// Extraction du type d'élément d'une Promisetype UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<number>>; // numbertype Result2 = UnwrapPromise<string>; // string

2. Types mappés (Mapped Types) et modificateurs readonly/optional

Les types mappés permettent de créer de nouveaux types en parcourant les propriétés d'un type existant. C'est un outil puissant pour créer des types utilitaires comme Partial<T> ou Readonly<T>. Lors d'un entretien, on peut vous demander d'implémenter votre propre version de Pick<T, K>.

// Implémentation personnalisée de Picktype MyPick<T, K extends keyof T> = {  [P in K]: T[P];};

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

type UserBasic = MyPick<User, 'id' | 'name'>;// { id: number; name: string }

Notez keyof T — c'est un opérateur qui retourne l'union des clés d'un objet. En combinaison avec le mapping, il permet de transformer les types de manière flexible. On demande aussi souvent les modificateurs readonly et ? (optional). Ils peuvent être ajoutés ou supprimés à l'aide des préfixes + et - :

// Suppression de readonly de toutes les propriétéstype Mutable<T> = {  -readonly [P in keyof T]: T[P];};

type ImmutableUser = Readonly<User>;type MutableUser = Mutable<ImmutableUser>; // toutes les propriétés sont à nouveau modifiables

3. Décorateurs et leur typage

Les décorateurs sont une fonctionnalité expérimentale de TypeScript, activement utilisée dans Angular et NestJS. Lors d'un entretien, on peut vous demander comment typer un décorateur de classe ou de méthode. Il est important de comprendre qu'un décorateur est simplement une fonction qui prend un objet cible et le retourne (ou en retourne un nouveau).

// Décorateur de classe avec typagefunction Logger<T extends { new (...args: any[]): {} }>(constructor: T) {  console.log(`Classe ${constructor.name} créée`);  return class extends constructor {    constructor(...args: any[]) {      super(...args);      console.log('Instance créée');    }  };}

@Loggerclass MyService {  constructor(public name: string) {}}

const service = new MyService('Test'); // Dans la console : "Classe MyService créée", puis "Instance créée"

Dans les questions avancées, on peut vous demander d'implémenter un décorateur qui ajoute des métadonnées ou de la validation. Notez l'utilisation des génériques — <T extends { n