TypeScript Fundamentals

// JavaScript — silently wrong
function add(a, b) {
  return a + b;
}
add(2, "3");  // "23" — probably not what you wanted

// TypeScript — caught at compile time
function addTs(a: number, b: number): number {
  return a + b;
}
addTs(2, "3");
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.
//   The bug never makes it to the browser.

# Install
npm install -D typescript

# Create tsconfig.json with sensible defaults
npx tsc --init

# Edit tsconfig.json — turn strict mode ON (default in newer scaffolds)
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,             // CRITICAL — enables noImplicitAny + strictNullChecks + more
    "esModuleInterop": true,
    "skipLibCheck": true,
    "jsx": "preserve"            // when using with React/Next.js
  }
}

# Type-check (no emit — Next.js/Vite usually transpile separately)
npx tsc --noEmit

// Explicit annotations
const name: string = "Alex";
const age: number = 17;
const isStudent: boolean = true;

// Type inference — TypeScript knows these without you saying so
const greeting = "Hello";   // inferred as string
const count = 0;             // inferred as number
const hobbies = ["code", "music"]; // inferred as string[]

// null and undefined are distinct types in TS
let maybeName: string | null = null;
maybeName = "Alex";          // OK
maybeName = 42;              // Error: Type 'number' not assignable

// 'any' is the escape hatch — disables type checking for that value
let anything: any = 5;
anything = "now a string";   // no error, but no protection either
// Use 'unknown' instead when you genuinely don't know the shape yet:
let unknownVal: unknown = JSON.parse(input);
if (typeof unknownVal === "string") {
  console.log(unknownVal.toUpperCase()); // narrowed to string, safe
}

// Arrays
const names: string[] = ["Alex", "Sam"];
const scores: Array<number> = [95, 88, 72];  // same as number[]

// Tuples — fixed-length, position-typed arrays
const coord: [number, number] = [40.7, -74.0];
const pair: [string, number] = ["age", 17];

// Object types — inline
function printUser(user: { name: string; age: number }) {
  console.log(`${user.name} is ${user.age}`);
}
printUser({ name: "Alex", age: 17 });

// Optional properties
function render(user: { name: string; nickname?: string }) {
  return user.nickname ?? user.name;
}

// Interface — most common for object shapes
interface User {
  id:        string;
  name:      string;
  email:     string;
  isAdmin?:  boolean;          // optional
}

function sendEmail(user: User, subject: string) {
  console.log(`To ${user.email}: ${subject}`);
}

// Type alias — works for objects too, AND for unions/primitives
type Status = "PENDING" | "CONFIRMED" | "CANCELLED";

function setStatus(orderId: string, status: Status) {
  // status is constrained to those three literal strings
}

setStatus("o-1", "CONFIRMED");
setStatus("o-1", "WAITING"); // Error: not assignable to type Status

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

// Explicit parameter and return types
function add(a: number, b: number): number {
  return a + b;
}

// Optional + default parameters
function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}`;
}

// Arrow function with types
const multiply = (a: number, b: number): number => a * b;

// Function type as a parameter
function repeat(fn: (x: number) => number, times: number) {
  let value = 1;
  for (let i = 0; i < times; i++) value = fn(value);
  return value;
}

// async functions return Promise<T>
async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return await response.json() as User;
}