TypeScript pour Angular - Le code Bushido du code

TypeScript est le langage qu'exige Angular pour fonctionner. C'est comme le code Bushido - il impose la discipline, mais offre en retour fiabilité et prévisibilité.

Pourquoi TypeScript ?

TypeScript, c'est du JavaScript avec un typage statique :

• Détecte les erreurs avant l'exécution du code
• Meilleure autocomplétion dans l'éditeur
• Code auto-documenté
• Refactoring sans crainte

Les types de base

1// Types simples
2const name: string = 'Musashi';
3const age: number = 25;
4const isActive: boolean = true;
5
6// Tableaux
7const techniques: string[] = ['Kendo', 'Iaido', 'Judo'];
8const levels: Array<number> = [1, 2, 3, 4, 5];
9
10// Objets avec interface
11interface Samurai {
12  name: string;
13  clan: string;
14  level: number;
15  techniques?: string[]; // ? signifie optionnel
16}
17
18const warrior: Samurai = {
19  name: 'Miyamoto Musashi',
20  clan: 'Niten Ichi-ryū',
21  level: 10
22};

Le typage dans Angular

Typer les composants

1import { Component, Input, Output, EventEmitter } from '@angular/core';
2
3interface Task {
4  id: number;
5  name: string;
6  completed: boolean;
7}
8
9@Component({
10  selector: 'app-task-list',
11  standalone: true,
12  template: `
13    @for (task of tasks; track task.id) {
14      <div (click)="select(task)">
15        {{ task.name }}
16      </div>
17    }
18  `
19})
20export class TaskListComponent {
21  @Input() tasks: Task[] = [];
22  @Output() taskSelected = new EventEmitter<Task>();
23
24  select(task: Task): void {
25    this.taskSelected.emit(task);
26  }
27}

Typer les services

1import { Injectable } from '@angular/core';
2import { Observable, of } from 'rxjs';
3
4interface Samurai {
5  id: number;
6  name: string;
7  rank: string;
8}
9
10@Injectable({
11  providedIn: 'root'
12})
13export class SamuraiService {
14  private samuraiList: Samurai[] = [
15    { id: 1, name: 'Musashi', rank: 'Master' },
16    { id: 2, name: 'Kojiro', rank: 'Expert' }
17  ];
18
19  getSamuraiList(): Observable<Samurai[]> {
20    return of(this.samuraiList);
21  }
22
23  getSamuraiById(id: number): Observable<Samurai | undefined> {
24    return of(this.samuraiList.find(s => s.id === id));
25  }
26}

Le mode strict - Le plus haut niveau de discipline

Dans tsconfig.json, Angular active le mode strict par défaut :

1{
2  "compilerOptions": {
3    "strict": true,
4    "noImplicitAny": true,
5    "strictNullChecks": true,
6    "strictPropertyInitialization": true
7  }
8}

C'est comme s'entraîner sous les ordres du maître le plus strict - exigeant, mais façonnant les meilleurs guerriers du code !