Chapter 2: TypeScript for Angular
TypeScript is the backbone of Angular development. It provides type safety, modern JavaScript features, and powerful tooling that enhance the developer experience. This chapter introduces the essential TypeScript concepts every Angular developer must know.
Basic Types in TypeScript
TypeScript adds static types to JavaScript. Here are the most commonly used basic types:
// Declaring variables with types
let isDone: boolean = false;
let age: number = 25;
let name: string = "Angular";
// Array types
let scores: number[] = [95, 82, 77];
let languages: Array<string> = ["TypeScript", "JavaScript"];
// Tuple
let person: [string, number] = ["John", 30];
// Enum
enum Status { Pending, Approved, Rejected }
let currentStatus: Status = Status.Approved;
Functions in TypeScript
Functions can have typed parameters and return types. You can also define optional and default parameters.
function greet(name: string = "Guest"): string {
return `Hello, ${name}`;
}
function sum(a: number, b: number): number {
return a + b;
}
Interfaces in TypeScript
Interfaces define the structure of an object. They’re widely used in Angular for typing component inputs, service responses, and models.
interface User {
id: number;
name: string;
email?: string; // optional
}
const user1: User = {
id: 101,
name: "Alice"
};
Classes in TypeScript
TypeScript supports object-oriented programming through classes, constructors, access modifiers, and inheritance.
class Car {
constructor(public brand: string, private speed: number) {}
accelerate(): void {
console.log(`${this.brand} is going at ${this.speed} km/h`);
}
}
const myCar = new Car("Toyota", 120);
myCar.accelerate();
Modules in TypeScript
Modules help organize your code into reusable files. In Angular, every component, service, and module uses the ES module system.
// greet.ts
export function sayHello(name: string) {
return `Hello, ${name}`;
}
// app.ts
import { sayHello } from './greet';
console.log(sayHello("Angular"));
Decorators in Angular
Decorators are special functions that add metadata to classes. Angular uses decorators like @Component, @Injectable, @Input, and @NgModule.
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: '<h1>Hello Angular</h1>'
})
export class HelloComponent {}
TypeScript Configuration in Angular
Angular uses a tsconfig.json file to control the TypeScript compiler options. Here are some key options:
{
"compilerOptions": {
"target": "es2022",
"module": "esnext",
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@app/*": ["src/app/*"]
}
}
}
Make sure the configuration matches your Angular project’s needs, especially when working with advanced language features or path mappings.
Conclusion
Mastering TypeScript is essential for writing robust and maintainable Angular applications. Understanding types, functions, classes, interfaces, modules, and decorators will prepare you for deeper Angular concepts in upcoming chapters.
Next Steps
In Chapter 3, we’ll dive into Angular Components — the building blocks of every Angular application. You’ll learn how to build, style, and manage reusable UI elements.
