Type Basics

// JavaScript: this bug only shows up at runtime
function double(x) {
  return x * 2;
}
double("hello"); // NaN — no error until you run it

// TypeScript: caught immediately
function double(x: number): number {
  return x * 2;
}
double("hello"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

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

// Number (integers and floats are both 'number')
let age: number = 25;
let price: number = 9.99;

// Boolean
let isActive: boolean = true;

// Null and Undefined
let nothing: null = null;
let notDefined: undefined = undefined;

// BigInt
let huge: bigint = 100n;

// Symbol
let id: symbol = Symbol("id");

// Explicit annotation — you write the type
let city: string = "Peshawar";

// Type inference — TypeScript figures it out
let country = "Pakistan"; // inferred as string
let count = 42;           // inferred as number
let done = false;         // inferred as boolean

// Bracket syntax (preferred)
let scores: number[] = [95, 87, 92];
let names: string[] = ["Alice", "Bob"];

// Generic syntax
let ids: Array<number> = [1, 2, 3];

// TypeScript infers element types from the values
let colors = ["red", "green", "blue"]; // string[]

// Mixed arrays use union types
let mixed: (string | number)[] = ["hello", 42, "world"];

// Inline object type
let user: { name: string; age: number; email: string } = {
  name: "Sabaoon",
  age: 25,
  email: "sabaoon@example.com",
};

// Optional properties use ?
let config: { debug?: boolean; verbose?: boolean } = {};
config.debug = true; // fine
config.verbose = undefined; // also fine

// Readonly properties
let point: { readonly x: number; readonly y: number } = { x: 10, y: 20 };
// point.x = 5; // Error: Cannot assign to 'x' because it is a read-only property

// A tuple of [string, number]
let pair: [string, number] = ["age", 25];

// Destructuring works as expected
let [label, value] = pair; // label: string, value: number

// Named tuples (TypeScript 4.0+) — labels are for documentation only
type Coordinate = [x: number, y: number];
let point: Coordinate = [10, 20];

// Numeric enum (values auto-increment from 0)
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right, // 3
}

let move: Direction = Direction.Up;

// String enum (each value must be explicitly set)
enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE",
  Pending = "PENDING",
}

let userStatus: Status = Status.Active;

// any — disables type checking (avoid when possible)
let anything: any = "hello";
anything = 42;
anything.foo.bar; // no error, but could crash at runtime

// unknown — safe alternative to any (must narrow before use)
let input: unknown = "hello";
// input.toUpperCase(); // Error: Object is of type 'unknown'
if (typeof input === "string") {
  input.toUpperCase(); // OK after narrowing
}

// never — represents values that never occur
function throwError(message: string): never {
  throw new Error(message);
}

// The 'as' syntax (preferred)
let input = document.getElementById("name") as HTMLInputElement;
input.value = "hello";

// Angle bracket syntax (not usable in TSX files)
let input2 = <HTMLInputElement>document.getElementById("name");