Introduction to
TypeScript

TypeScript is a strict syntactical superset of JavaScript developed by Anders Hejlsberg at Microsoft (released 2012). Every valid JS file is valid TS. TypeScript compiles (tsc) to plain JavaScript — types are erased at runtime.

The key insight: JavaScript's dynamic typing becomes a liability at scale. TypeScript adds a static type system that catches errors at compile time, enables powerful IDE tooling, and serves as living documentation.

Explicit Annotations

// Primitives
let name: string = "Alice";
let age: number = 30;
let active: boolean = true;
let data: null = null;
let val: undefined = undefined;

// Arrays & tuples
let ids: number[] = [1, 2, 3];
let pair: [string, number] = ["age", 30];

// Object type
let user: { name: string; age: number } = {
  name: "Alice",
  age: 30,
};

Type Inference

// TS infers types automatically
let city = "London";        // string
let count = 42;             // number
let items = [1, 2, 3];     // number[]

// Inference from return values
function double(n: number) {
  return n * 2;             // returns number
}

// Contextual typing
const names = ["Alice", "Bob"];
names.forEach(name => {
  console.log(name.toUpperCase()); // name: string
});

Interfaces

interface User {
  id: number;
  name: string;
  email?: string;            // optional
  readonly createdAt: Date;  // immutable
}

// Extending
interface Admin extends User {
  permissions: string[];
}

// Declaration merging (interfaces only)
interface User {
  avatar?: string;  // merges with above
}

Type Aliases

type ID = string | number;   // union type

type Point = {
  x: number;
  y: number;
};

// Intersection types
type Timestamped = Point & {
  createdAt: Date;
};

// Mapped from existing types
type ReadonlyUser = Readonly<User>;
type PartialUser = Partial<User>;

Parameter & Return Types

// Typed parameters and return
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Optional & default parameters
function log(msg: string, level = "info"): void {
  console.log(`[${level}] ${msg}`);
}

// Rest parameters
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

// Function type alias
type Comparator<T> = (a: T, b: T) => number;

Overloads

// Overload signatures
function parse(input: string): number;
function parse(input: string[]): number[];
// Implementation signature
function parse(input: string | string[]): number | number[] {
  if (Array.isArray(input)) {
    return input.map(Number);
  }
  return Number(input);
}

parse("42");        // returns number
parse(["1", "2"]);  // returns number[]

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

first([1, 2, 3]);      // number | undefined
first(["a", "b"]);     // string | undefined

Type Parameters & Constraints

// Basic generic
interface Box<T> {
  value: T;
}
const strBox: Box<string> = { value: "hello" };

// Constraints with extends
function getLength<T extends { length: number }>(
  item: T
): number {
  return item.length;
}
getLength("hello");   // 5
getLength([1, 2, 3]); // 3
// getLength(42);     // Error: no .length

// keyof constraint
function getProperty<T, K extends keyof T>(
  obj: T, key: K
): T[K] {
  return obj[key];
}

Utility Types

// API response wrapper
interface ApiResponse<T> {
  data: T;
  status: number;
  timestamp: Date;
}

async function fetchApi<T>(
  url: string
): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  const data = await res.json();
  return { data, status: res.status, timestamp: new Date() };
}

class Animal {
  // Access modifiers
  public name: string;
  protected speed: number;
  private _id: number;

  constructor(name: string, speed: number) {
    this.name = name;
    this.speed = speed;
    this._id = Math.random();
  }

  // Shorthand — declare in constructor
  // constructor(public name: string) {}

  move(): string {
    return `${this.name} moves at ${this.speed}km/h`;
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name, 40);
  }

  bark(): string {
    return `${this.name} says woof!`;
    // this.speed OK (protected)
    // this._id  Error (private)
  }
}

Built-in Guards

function process(value: string | number | Date) {
  // typeof guard
  if (typeof value === "string") {
    return value.toUpperCase();   // string
  }
  // instanceof guard
  if (value instanceof Date) {
    return value.toISOString();   // Date
  }
  return value.toFixed(2);       // number
}

// "in" operator guard
interface Fish { swim(): void }
interface Bird { fly(): void }

function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim();                // Fish
  } else {
    animal.fly();                 // Bird
  }
}

Custom Type Predicates

// Type predicate function
function isString(val: unknown): val is string {
  return typeof val === "string";
}

// Usage — narrows the type
function process(input: unknown) {
  if (isString(input)) {
    console.log(input.toUpperCase()); // string
  }
}

// Filter with type predicate
const mixed: (string | number)[] = [1, "a", 2, "b"];
const strings = mixed.filter(
  (x): x is string => typeof x === "string"
);
// strings: string[]

function assertDefined<T>(
  val: T | null | undefined,
  msg?: string
): asserts val is T {
  if (val == null) throw new Error(msg ?? "Undefined");
}

const user = getUser(); // User | null
assertDefined(user, "User not found");
user.name; // OK — narrowed to User

Import / Export

// Named exports
export interface User { id: number; name: string; }
export function createUser(name: string): User {
  return { id: Date.now(), name };
}

// Default export
export default class UserService { /* ... */ }

// Re-export
export { User as AppUser } from "./models";
export * from "./utils";

// Type-only imports (erased at compile time)
import type { User } from "./models";
import { type User, createUser } from "./models";

Typed Request / Response

import express, {
  Request, Response, NextFunction
} from "express";

interface CreateUserBody {
  name: string;
  email: string;
}

interface UserParams {
  id: string;
}

// Typed route handler
app.post(
  "/api/users",
  (req: Request<{}, {}, CreateUserBody>, res: Response) => {
    const { name, email } = req.body; // typed!
    // ...
    res.status(201).json({ id: 1, name, email });
  }
);

app.get(
  "/api/users/:id",
  (req: Request<UserParams>, res: Response) => {
    const userId = req.params.id; // string
    // ...
  }
);

Components & Props

// Props interface
interface ButtonProps {
  label: string;
  variant?: "primary" | "secondary";
  disabled?: boolean;
  onClick: (e: React.MouseEvent) => void;
  children?: React.ReactNode;
}

// Function component (preferred over React.FC)
function Button({ label, variant = "primary",
  disabled, onClick, children }: ButtonProps) {
  return (
    <button
      className={variant}
      disabled={disabled}
      onClick={onClick}
    >
      {children ?? label}
    </button>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

// Usage — T inferred as User
<List items={users} renderItem={u => <li>{u.name}</li>} />