TypeScript for JavaScript Developers - The Complete Beginner's Guide

JavaScript code → TypeScript adds types → TypeScript compiler checks types → Outputs clean JavaScript

npm install -g typescript
tsc --init  # Creates tsconfig.json

# Or use ts-node for direct execution
npm install -g ts-node
ts-node your-file.ts

// Variables
let name: string = 'Alice'
let age: number = 30
let isActive: boolean = true
let anything: any = 'can be anything'  // avoid this!

// Functions
function greet(name: string): string {
  return `Hello, ${name}!`
}

// Arrow functions
const add = (a: number, b: number): number => a + b

// Arrays
const numbers: number[] = [1, 2, 3]
const names: string[] = ['Alice', 'Bob']
const mixed: (string | number)[] = ['hello', 42]

// Objects — using interfaces
interface User {
  id: number
  name: string
  email: string
  age?: number  // optional property
}

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  // age is optional — OK to omit
}

// Interface — preferred for object shapes
interface Animal {
  name: string
  sound(): string
}

// Type — great for unions and complex types
type Status = 'active' | 'inactive' | 'pending'
type ID = string | number

// Extending interfaces
interface Dog extends Animal {
  breed: string
}

// Intersection types
type AdminUser = User & { adminLevel: number }

// Union — can be one OR the other
type StringOrNumber = string | number

function formatId(id: string | number): string {
  return typeof id === 'string' ? id.toUpperCase() : id.toString()
}

// Literal types
type Direction = 'north' | 'south' | 'east' | 'west'
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6

function move(direction: Direction) {
  console.log(`Moving ${direction}`)
}
move('north')  // ✅
move('up')     // ❌ TypeScript error!

// Without generics — not type-safe
function getFirst(arr: any[]): any {
  return arr[0]
}

// With generics — type-safe ✅
function getFirst<T>(arr: T[]): T {
  return arr[0]
}

const firstNum = getFirst([1, 2, 3])    // Type: number
const firstName = getFirst(['a', 'b'])  // Type: string

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

const userResponse: ApiResponse<User> = {
  data: { id: 1, name: 'Alice', email: 'a@b.com' },
  status: 200,
  message: 'Success',
}

enum UserRole {
  ADMIN = 'admin',
  USER = 'user',
  MODERATOR = 'moderator',
}

function checkPermissions(role: UserRole) {
  if (role === UserRole.ADMIN) {
    console.log('Full access')
  }
}

checkPermissions(UserRole.ADMIN)  // ✅
checkPermissions('admin')         // ❌ Error!

function processInput(input: string | number) {
  if (typeof input === 'string') {
    // TypeScript knows input is string here
    return input.toUpperCase()
  } else {
    // TypeScript knows input is number here
    return input * 2
  }
}

// Nullish checks
function getLength(str: string | null | undefined): number {
  if (str == null) return 0
  return str.length  // TypeScript knows str is string here
}

interface User {
  id: number
  name: string
  email: string
  password: string
}

// Partial — all properties optional
type PartialUser = Partial<User>

// Required — all properties required
type RequiredUser = Required<User>

// Pick — select specific properties
type PublicUser = Pick<User, 'id' | 'name' | 'email'>

// Omit — exclude specific properties
type SafeUser = Omit<User, 'password'>

// Record — dictionary type
type UserMap = Record<string, User>

// Readonly — immutable
type ImmutableUser = Readonly<User>

interface Product {
  id: number
  name: string
  price: number
  category: string
  inStock: boolean
}

type CreateProductInput = Omit<Product, 'id'>
type UpdateProductInput = Partial<Omit<Product, 'id'>>

class ProductService {
  private products: Product[] = []

  create(input: CreateProductInput): Product {
    const product: Product = {
      id: Date.now(),
      ...input,
    }
    this.products.push(product)
    return product
  }

  update(id: number, changes: UpdateProductInput): Product | null {
    const idx = this.products.findIndex(p => p.id === id)
    if (idx === -1) return null
    this.products[idx] = { ...this.products[idx], ...changes }
    return this.products[idx]
  }

  getByCategory(category: string): Product[] {
    return this.products.filter(p => p.category === category)
  }
}