TypeScript dla Angulara - Kodeks Bushido Kodu

TypeScript to język, którego Angular wymaga do pracy. Jest jak kodeks Bushido - narzuca dyscyplinę, ale w zamian daje niezawodność i przewidywalność.

Dlaczego TypeScript?

TypeScript to JavaScript z typowaniem statycznym:

• Wykrywa błędy przed uruchomieniem kodu
• Lepsza autokompletacja w edytorze
• Samodokumentujący się kod
• Refaktoryzacja bez strachu

Podstawowe Typy

1// Typy proste
2const imie: string = 'Musashi';
3const wiek: number = 25;
4const czyAktywny: boolean = true;
5
6// Tablice
7const techniki: string[] = ['Kendo', 'Iaido', 'Judo'];
8const poziomy: Array<number> = [1, 2, 3, 4, 5];
9
10// Obiekty z interfejsem
11interface Samuraj {
12  imie: string;
13  klan: string;
14  poziom: number;
15  techniki?: string[]; // ? oznacza opcjonalne
16}
17
18const wojownik: Samuraj = {
19  imie: 'Miyamoto Musashi',
20  klan: 'Niten Ichi-ryū',
21  poziom: 10
22};

Typy w Angularze

Typowanie komponentów

1import { Component, Input, Output, EventEmitter } from '@angular/core';
2
3interface Zadanie {
4  id: number;
5  nazwa: string;
6  ukonczone: boolean;
7}
8
9@Component({
10  selector: 'app-lista-zadan',
11  standalone: true,
12  template: `
13    @for (zadanie of zadania; track zadanie.id) {
14      <div (click)="wybierz(zadanie)">
15        {{ zadanie.nazwa }}
16      </div>
17    }
18  `
19})
20export class ListaZadanComponent {
21  @Input() zadania: Zadanie[] = [];
22  @Output() wybranoZadanie = new EventEmitter<Zadanie>();
23
24  wybierz(zadanie: Zadanie): void {
25    this.wybranoZadanie.emit(zadanie);
26  }
27}

Typowanie serwisów

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 samuraje: Samurai[] = [
15    { id: 1, name: 'Musashi', rank: 'Master' },
16    { id: 2, name: 'Kojiro', rank: 'Expert' }
17  ];
18
19  getSamuraje(): Observable<Samurai[]> {
20    return of(this.samuraje);
21  }
22
23  getSamurajById(id: number): Observable<Samurai | undefined> {
24    return of(this.samuraje.find(s => s.id === id));
25  }
26}

Strict Mode - Najwyższy Poziom Dyscypliny

W tsconfig.json Angular domyślnie włącza strict mode:

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

To jak trening u najsurowszego mistrza - wymagający, ale kształtujący najlepszych wojowników kodu!