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

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

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

\n\n

Un entretien pour un poste de développeur Senior Frontend ou Fullstack ne se passe rarement sans questions approfondies sur TypeScript. Si vous connaissez parfaitement les types de base et les interfaces, pour réussir un technical interview de haut niveau, vous devez maîtriser le système de types avancé. Dans cet article, nous avons rassemblé les 5 meilleures questions et exercices souvent posés lors des entretiens TypeScript de niveau avancé. Chaque point est accompagné d'une analyse et d'exemples de code.

\n\n

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

\n\n

Les types conditionnels permettent de créer des types qui dépendent d'une condition. Combinés avec infer, vous pouvez "extraire" des parties de types, comme dans le Pattern Matching.

\n\n

Question : Écrivez le type ReturnType (sans utiliser le type intégré).

\n\n

Analyse : Utilisez un type conditionnel avec infer pour capturer la valeur de retour d'une fonction.

\n\n

type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;\n\n// Exemple d'utilisation\nfunction greet(name: string): string {\n  return `Bonjour, ${name}`;\n}\n\ntype GreetReturn = MyReturnType<typeof greet>; // string

\n\n

Comment répondre en entretien : Expliquez que infer R crée une nouvelle variable de type R qui capture le type de retour de la signature de la fonction. Si la condition n'est pas remplie (ce qui est passé n'est pas une fonction), le type devient never.

\n\n

2. Mapped Types et modificateurs

\n\n

Les mapped types permettent de créer de nouveaux types en transformant les propriétés d'un type existant. Le niveau avancé implique de travailler avec les modificateurs +, -, as et les clés via keyof.

\n\n

Question : Créez un type DeepReadonly qui rend toutes les propriétés d'un objet (y compris les propriétés imbriquées) en readonly.

\n\n

type DeepReadonly<T> = {\n  readonly [K in keyof T]: T[K] extends Record<string, unknown> \n    ? DeepReadonly<T[K]> \n    : T[K];\n};\n\ninterface User {\n  name: string;\n  address: {\n    city: string;\n    zip: number;\n  };\n}\n\ntype ReadonlyUser = DeepReadonly<User>;\n// Toutes les propriétés sont devenues readonly, y compris address.city

\n\n

Comment répondre : Montrez l'appel récursif de DeepReadonly pour les objets imbriqués. Expliquez comment Record<string, unknown> est utilisé pour vérifier si une valeur est un objet.

\n\n

3. Template Literal Types

\n\n

Les template literal types permettent de manipuler les types de chaînes de caractères au moment de la compilation. C'est un outil puissant pour créer des API strictes.

\n\n

Question : Implémentez le type EventName qui prend une chaîne et retourne le type "on{Chaîne}" avec la capitalisation correcte.

\n\n

type EventName<T extends string> = `on${Capitalize<T>}`;\n\ntype ClickEvent = EventName<'click'>; // "onClick"\ntype FocusEvent = EventName<'focus'>; // "onFocus"\n\n// Exemple avancé : extraction à partir d'une chaîne\ntype ExtractAction<T extends string> = \n  T extends `on${infer Action}` ? Uncapitalize<Action> : never;\n\ntype Action = ExtractAction<'onSubmit'>; // "submit"

\n\n

Comment répondre : Notez les types intégrés Capitalize et Uncapitalize. Montrez comment infer fonctionne à l'intérieur des littéraux de template pour analyser les chaînes.

\n\n

4. Génériques avec contraintes et types de tuples variadiques (Variadic Tuple Types)

\n\n

Les variadic tuple types (apparus dans TS 4.0) permettent de travailler avec des tuples de longueur arbitraire. C'est indispensable pour créer des fonctions type-safe avec un nombre variable d'arguments.

\n\n

Question : Écrivez un type pour une fonction