Intro to TypeScript

Intro to TypeScript

Angular is built with TypeScript — a superset of JavaScript that adds static types. TypeScript compiles down to regular JavaScript, but catches errors at compile time instead of runtime.

Why TypeScript?

• Type safety — catch bugs before the code runs
• Better IDE support — autocompletion, refactoring, inline docs
• Readability — types serve as documentation
• Required by Angular — all Angular code is written in TypeScript

Basic Types

// String
let name: string = "Alice";

// Number
let age: number = 25;

// Boolean
let isActive: boolean = true;

// Array
let scores: number[] = [85, 92, 78];
let names: Array<string> = ["Alice", "Bob"];

// Any (escape hatch — avoid when possible)
let data: any = "could be anything";
data = 42;  // No error

Functions with Types

// Parameter types and return type
function greet(name: string): string {
    return `Hello, ${name}!`;
}

greet("Alice");  // ✅
greet(42);       // ❌ Argument of type 'number' is not assignable

// Optional parameters
function log(message: string, level?: string): void {
    console.log(`[${level || "INFO"}] ${message}`);
}

log("Server started");        // ✅
log("Error!", "ERROR");       // ✅

// Default parameters
function createUser(name: string, role: string = "viewer"): object {
    return { name, role };
}

Interfaces

Interfaces define the shape of an object:

interface User {
    name: string;
    email: string;
    age: number;
    isAdmin?: boolean;  // Optional property
}

function displayUser(user: User): void {
    console.log(`${user.name} (${user.email})`);
}

const alice: User = {
    name: "Alice",
    email: "alice@example.com",
    age: 25,
};

displayUser(alice);  // ✅

displayUser({ name: "Bob" });  // ❌ Missing email and age!

Classes

class Animal {
    name: string;
    private sound: string;

    constructor(name: string, sound: string) {
        this.name = name;
        this.sound = sound;
    }

    speak(): string {
        return `${this.name} says ${this.sound}`;
    }
}

const dog = new Animal("Dog", "Woof");
dog.speak();     // "Dog says Woof"
dog.name;        // "Dog" ✅
dog.sound;       // ❌ Property 'sound' is private

Shorthand Constructor

// TypeScript shorthand — auto-creates and assigns properties:
class User {
    constructor(
        public name: string,
        public email: string,
        private password: string
    ) {}
}

// Equivalent to writing:
// this.name = name; this.email = email; this.password = password;

const user = new User("Alice", "alice@example.com", "secret");
user.name;      // "Alice" ✅
user.password;  // ❌ Private

This shorthand is used heavily in Angular — especially for dependency injection in constructors.

Access Modifiers

Modifier	Accessible From
public (default)	Anywhere
private	Only within the class
protected	Within the class and subclasses

Generics

function getFirst<T>(items: T[]): T {
    return items[0];
}

getFirst<number>([1, 2, 3]);       // 1 (type: number)
getFirst<string>(["a", "b", "c"]); // "a" (type: string)

Key Takeaways

• TypeScript adds static types to JavaScript — catches errors at compile time
• Basic types: string, number, boolean, array, any
• Interfaces define object shapes — used throughout Angular
• Classes with access modifiers (public, private, protected)
• Constructor shorthand auto-creates properties — very common in Angular
• TypeScript compiles to standard JavaScript that runs anywhere