Types & Interfaces

Définir la forme de tes données

Section 1

Types de base et annotations

Step 1

Annoter les variables et fonctions

TypeScript ajoute des annotations de type après le nom de la variable avec :. Le compilateur infère souvent le type automatiquement — pas besoin d'annoter partout.

snippet.typescript

typescript

1// Annotations explicites
2const name: string = "Usher";
3const age: number = 28;
4const active: boolean = true;
5const tags: string[] = ["react", "typescript"];
6
7// TypeScript infère automatiquement — pas besoin d'annoter
8const score = 95;          // TypeScript sait que c'est number
9const items = ["a", "b"]; // string[]
10
11// Annotation des fonctions
12function greet(name: string, times: number = 1): string {
13  return name.repeat(times);
14}
15
16// Arrow function typée
17const add = (a: number, b: number): number => a + b;
18
19// Retour void quand la fonction ne retourne rien
20function logError(msg: string): void {
21  console.error(msg);
22}

Step 2

Union et intersection types

Une union (|) accepte plusieurs types. Une intersection (&) combine plusieurs types en un seul. Ces deux outils couvrent 80% des besoins de typage complexe.

snippet.typescript

typescript

1// Annotations explicites
2const name: string = "Usher";
3const age: number = 28;
4const active: boolean = true;
5const tags: string[] = ["react", "typescript"];
6
7// TypeScript infère automatiquement — pas besoin d'annoter
8const score = 95;          // TypeScript sait que c'est number
9const items = ["a", "b"]; // string[]
10
11// Annotation des fonctions
12function greet(name: string, times: number = 1): string {
13  return name.repeat(times);
14}
15
16// Arrow function typée
17const add = (a: number, b: number): number => a + b;
18
19// Retour void quand la fonction ne retourne rien
20function logError(msg: string): void {
21  console.error(msg);
22}

Section 2

Interfaces vs Type Aliases

Step 3

Quand utiliser interface ou type ?

Les deux permettent de définir la forme d'un objet. La règle pratique : `interface` pour les formes d'objets et les contrats de classe, `type` pour les unions, primitives, et les types utilitaires.

Step 4

Types littéraux et narrowing

Le narrowing (rétrécissement de type) est le mécanisme par lequel TypeScript affine le type dans un bloc conditionnel. C'est la clé d'un code TypeScript idiomatique.

snippet.typescript

typescript

1// Annotations explicites
2const name: string = "Usher";
3const age: number = 28;
4const active: boolean = true;
5const tags: string[] = ["react", "typescript"];
6
7// TypeScript infère automatiquement — pas besoin d'annoter
8const score = 95;          // TypeScript sait que c'est number
9const items = ["a", "b"]; // string[]
10
11// Annotation des fonctions
12function greet(name: string, times: number = 1): string {
13  return name.repeat(times);
14}
15
16// Arrow function typée
17const add = (a: number, b: number): number => a + b;
18
19// Retour void quand la fonction ne retourne rien
20function logError(msg: string): void {
21  console.error(msg);
22}

Topics and skills covered

TypeScript
Types
Interfaces
Type Aliases

Génériques — Écrire du code réutilisable

Ch.1