Comment réussir un entretien TypeScript : les questions incontournables

Comment réussir un entretien TypeScript : les meilleures questions

TypeScript a solidement pris sa place comme l'un des outils les plus demandés dans le développement web moderne. Si vous vous préparez à un entretien technique, la connaissance des bases et des fonctionnalités avancées de TypeScript est une condition obligatoire. Dans cet article, nous allons analyser les meilleures questions souvent posées lors des entretiens et donner des exemples de code pour consolider la matière.

1. Types de base et leurs différences avec JavaScript

Lors d'un entretien, on vous demandera forcément les types de base de TypeScript et leur comportement. La principale différence avec JavaScript est le typage statique. Examinons les points clés.

1.1. Types primitifs : string, number, boolean

TypeScript ajoute une annotation explicite des types. Par exemple :

let name: string = 'Анна';let age: number = 30;let isActive: boolean = true;

Sans annotation, TypeScript déduit le type automatiquement (type inference).

1.2. Types any et unknown

any désactive la vérification des types — il est préférable de l'éviter. unknown est une alternative sûre qui nécessite une vérification avant utilisation :

let data: unknown = 'строка';// console.log(data.toUpperCase()); // Erreur !if (typeof data === 'string') {  console.log(data.toUpperCase()); // Ok}

1.3. never et void

• void — la fonction ne retourne rien.
• never — la fonction ne se termine jamais (lève une erreur ou boucle infinie).

function throwError(msg: string): never {  throw new Error(msg);}

2. Interfaces et types (interface vs type)

C'est l'une des questions les plus fréquentes. Les deux mécanismes permettent de décrire la structure des objets, mais il existe des différences.

2.1. Quand utiliser interface

• Pour déclarer des contrats d'objets et de classes.
• Possibilité d'extension (declaration merging) :

interface User {  name: string;}interface User {  age: number;}// User contient maintenant name et age

2.2. Quand utiliser type

• Pour les unions, les intersections et les alias primitifs.
• Ne supporte pas le declaration merging.

type Status = 'active' | 'inactive';type Person = { name: string } & { age: number };

Question d'entretien : « Peut-on remplacer interface par type ? » — Oui, mais pour les classes et l'extension, interface est préférable.

3. Génériques (Generics)

Les génériques permettent de créer des composants réutilisables fonctionnant avec n'importe quel type. C'est un must-have pour les postes senior.

3.1. Fonction générique simple

function firstElement<T>(arr: T[]): T {  return arr[0];}const num = firstElement([1, 2, 3]); // numberconst str = firstElement(['a', 'b']); // string

3.2. Contraintes de génériques (extends)

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {  return obj[key];}const user = { name: 'Иван', age: 25 };console.log(getProperty(user, 'name')); // Иван

3.3. Génériques dans les interfaces

interface Repository<T> {  getById(id: number): T;  save(item: T): void;}

On demande souvent : « Pourquoi utiliser des génériques s'il y a any ? » — Les génériques préservent la sécurité des types.

4. Utility Types et fonctionnalités avancées

Les types utilitaires intégrés (Partial, Required, Pick, Omit) sont des indicateurs d'une compréhension approfondie de TypeScript.

4.1. Partial et Required

interface Task {  title: string;  done: boolean;}const partialTask: Partial<Task> = { title: 'Apprendre TypeScript' };const requiredTask: Required<Task> = { title: 'Apprendre TypeScript', done: false };

4.2. Pick et Omit

interface User {  id: number;  name: string;  email: string;  password: string;}type PublicUser = Pick<User, 'id' | 'name' | 'email'>;type UserWithoutPassword = Omit<User, 'password'>;

4.3. Record et Readonly

type PageInfo = Record<string, { title: string; url: string }>;const config: Readonly<{ apiUrl: string; timeout: number }> = {  apiUrl: 'https://api.example.com',  timeout: 5000};// config.timeout = 6000; // Erreur : propriété en lecture seule

5. Modules et import/export

TypeScript supporte les modules ES6. Comprendre la différence entre les exports nommés et l'export par défaut est important.

5.1. Export nommé vs export par défaut

// utils.tsexport function add(a: number, b: number): number {  return a + b;}export const PI = 3.14;export default class Calculator {  // ...}

// main.tsimport Calculator, { add, PI } from './utils';

5.2. Import de types

import type { User } from './models';// ouimport { type User, type Product } from './models';

6. Décorateurs (Decorators)

Les décorateurs sont une fonctionnalité expérimentale mais souvent demandée dans les entretiens pour les frameworks comme Angular ou NestJS.

6.1. Décorateur de classe

function sealed(constructor: Function) {  Object.seal(constructor);  Object.seal(constructor.prototype);}

@sealedclass Greeter {  constructor(public message: string) {}  greet() {    return `Bonjour, ${this.message}`;  }}

6.2. Décorateur de méthode

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {  const originalMethod = descriptor.value;  descriptor.value = function (...args: any[]) {    console.log(`Appel de ${propertyKey} avec :`, args);    return originalMethod.apply(this, args);  };  return descriptor;}

class Calculator {  @log  add(a: number, b: number): number {    return a + b;  }}

7. Questions d'entretien courantes et pièges

Voici quelques questions supplémentaires qui reviennent souvent :

7.1. Différence entre null et undefined en TypeScript

Les deux sont des sous-types de tous les types si strictNullChecks est désactivé. Avec strictNullChecks activé, ils doivent être traités explicitement :

let value: string | null = null;let value2: string | undefined = undefined;

7.2. Qu'est-ce que le type assertion ?

let someValue: unknown = 'ceci est une chaîne';let strLength: number = (someValue as string).length;// oulet strLength2: number = (<string>someValue).length;

7.3. enum numérique vs chaîne

enum Direction {  Up = 'HAUT',  Down = 'BAS',  Left = 'GAUCHE',  Right = 'DROITE'}

enum StatusCode {  Success = 200,  NotFound = 404,  Error = 500}

Conclusion

La préparation à un entretien TypeScript nécessite une compréhension à la fois théorique et pratique. Entraînez-vous à écrire du code, analysez les erreurs du compilateur et étudiez les projets open source. N'oubliez pas que les recruteurs apprécient non seulement la connaissance de la syntaxe, mais aussi la compréhension des principes de conception et des meilleures pratiques. Bonne chance pour votre entretien !