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

// Typy proste
const imie: string = 'Musashi';
const wiek: number = 25;
const czyAktywny: boolean = true;

// Tablice
const techniki: string[] = ['Kendo', 'Iaido', 'Judo'];
const poziomy: Array<number> = [1, 2, 3, 4, 5];

// Obiekty z interfejsem
interface Samuraj {
  imie: string;
  klan: string;
  poziom: number;
  techniki?: string[]; // ? oznacza opcjonalne
}

const wojownik: Samuraj = {
  imie: 'Miyamoto Musashi',
  klan: 'Niten Ichi-ryū',
  poziom: 10
};

Typy w Angularze

Typowanie komponentów

import { Component, Input, Output, EventEmitter } from '@angular/core';

interface Zadanie {
  id: number;
  nazwa: string;
  ukonczone: boolean;
}

@Component({
  selector: 'app-lista-zadan',
  standalone: true,
  template: `
    @for (zadanie of zadania; track zadanie.id) {
      <div (click)="wybierz(zadanie)">
        {{ zadanie.nazwa }}
      </div>
    }
  `
})
export class ListaZadanComponent {
  @Input() zadania: Zadanie[] = [];
  @Output() wybranoZadanie = new EventEmitter<Zadanie>();

  wybierz(zadanie: Zadanie): void {
    this.wybranoZadanie.emit(zadanie);
  }
}

Typowanie serwisów

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

interface Samurai {
  id: number;
  name: string;
  rank: string;
}

@Injectable({
  providedIn: 'root'
})
export class SamuraiService {
  private samuraje: Samurai[] = [
    { id: 1, name: 'Musashi', rank: 'Master' },
    { id: 2, name: 'Kojiro', rank: 'Expert' }
  ];

  getSamuraje(): Observable<Samurai[]> {
    return of(this.samuraje);
  }

  getSamurajById(id: number): Observable<Samurai | undefined> {
    return of(this.samuraje.find(s => s.id === id));
  }
}

Strict Mode - Najwyższy Poziom Dyscypliny

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

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true
  }
}

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