TypeScript for Angular - The Bushido Code of Code

TypeScript is the language that Angular requires to work. It is like the Bushido code - it imposes discipline, but in return provides reliability and predictability.

Why TypeScript?

TypeScript is JavaScript with static typing:

• Catches errors before running the code
• Better autocompletion in the editor
• Self-documenting code
• Refactoring without fear

Basic Types

// Simple types
const name: string = 'Musashi';
const age: number = 25;
const isActive: boolean = true;

// Arrays
const techniques: string[] = ['Kendo', 'Iaido', 'Judo'];
const levels: Array<number> = [1, 2, 3, 4, 5];

// Objects with interface
interface Samurai {
  name: string;
  clan: string;
  level: number;
  techniques?: string[]; // ? means optional
}

const warrior: Samurai = {
  name: 'Miyamoto Musashi',
  clan: 'Niten Ichi-ryū',
  level: 10
};

Types in Angular

Typing components

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

interface Task {
  id: number;
  name: string;
  completed: boolean;
}

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    @for (task of tasks; track task.id) {
      <div (click)="select(task)">
        {{ task.name }}
      </div>
    }
  `
})
export class TaskListComponent {
  @Input() tasks: Task[] = [];
  @Output() taskSelected = new EventEmitter<Task>();

  select(task: Task): void {
    this.taskSelected.emit(task);
  }
}

Typing services

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 samuraiList: Samurai[] = [
    { id: 1, name: 'Musashi', rank: 'Master' },
    { id: 2, name: 'Kojiro', rank: 'Expert' }
  ];

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

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

Strict Mode - The Highest Level of Discipline

In tsconfig.json, Angular enables strict mode by default:

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

It is like training under the strictest master - demanding, but shaping the best code warriors!