TypeScript Basics: Why You Should Switch

// Primitive types
let username: string = "john_doe";
let age: number = 25;
let isActive: boolean = true;

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

// Tuple (fixed-length array with specific types)
let user: [string, number] = ["John", 30];

// Enum
enum Status {
  Pending = "PENDING",
  Active = "ACTIVE",
  Completed = "COMPLETED"
}
let orderStatus: Status = Status.Active;

// Any (escape hatch - use sparingly!)
let flexible: any = "hello";
flexible = 42; // No error

// Unknown (safer than any)
let uncertain: unknown = "hello";
// uncertain.toUpperCase(); // Error! Must narrow first
if (typeof uncertain === "string") {
  uncertain.toUpperCase(); // OK!
}

// Void (for functions that don't return)
function logMessage(msg: string): void {
  console.log(msg);
}

// Never (for functions that never return)
function throwError(message: string): never {
  throw new Error(message);
}

// Interface - defines object shape
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;        // Optional property
  readonly createdAt: Date;  // Cannot be modified
}

// Using the interface
const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com",
  createdAt: new Date()
};

// Type alias - can define any type
type ID = string | number;
type Status = "pending" | "active" | "completed";

// Type alias for object (similar to interface)
type Product = {
  id: ID;
  name: string;
  price: number;
  status: Status;
};

// Extending interfaces
interface Employee extends User {
  department: string;
  salary: number;
}

// Intersection types (combine types)
type Manager = Employee & {
  team: string[];
  level: number;
};

// Union Type: value can be one of several types
type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // TypeScript knows it's string here
  } else {
    console.log(id.toFixed(2)); // TypeScript knows it's number here
  }
}

printId("abc123"); // OK
printId(42);       // OK

// Literal Union Types
type Direction = "north" | "south" | "east" | "west";
type HttpStatus = 200 | 201 | 400 | 404 | 500;

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move("north"); // OK
// move("up");  // Error: not in union

// Intersection Type: combines multiple types
type HasName = { name: string };
type HasAge = { age: number };
type Person = HasName & HasAge;

const person: Person = {
  name: "John",
  age: 30
  // Must have BOTH properties
};

// Generic function
function identity<T>(value: T): T {
  return value;
}

const str = identity("hello");   // type: string
const num = identity(42);        // type: number

// Generic with constraints
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): void {
  console.log(item.length);
}

logLength("hello");      // OK - strings have length
logLength([1, 2, 3]);    // OK - arrays have length
// logLength(42);        // Error - numbers don't have length

// Generic interface
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User {
  id: number;
  name: string;
}

const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "John" },
  status: 200,
  message: "Success"
};

// Generic class
class DataStore<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  get(index: number): T {
    return this.items[index];
  }

  getAll(): T[] {
    return [...this.items];
  }
}

const numberStore = new DataStore<number>();
numberStore.add(1);
numberStore.add(2);

const stringStore = new DataStore<string>();
stringStore.add("hello");
stringStore.add("world");

# Install globally
npm install -g typescript

# Or as dev dependency (recommended)
npm install --save-dev typescript

# Check version
tsc --version

# Generate tsconfig.json with defaults
tsc --init

{
  "compilerOptions": {
    // Target JavaScript version
    "target": "ES2020",
    
    // Module system
    "module": "ESNext",
    "moduleResolution": "node",
    
    // Output directory
    "outDir": "./dist",
    "rootDir": "./src",
    
    // Strict type checking (recommended!)
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    
    // Additional checks
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    
    // Allow JavaScript files
    "allowJs": true,
    
    // Source maps for debugging
    "sourceMap": true,
    
    // Faster builds
    "skipLibCheck": true,
    
    // Interop with CommonJS
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

# Compile once
tsc

# Watch mode (recompile on changes)
tsc --watch

# Or use package.json scripts
npm run build   # tsc
npm run dev     # tsc --watch