// JavaScript — runs, then explodes at runtime
function getInitials(user) {
  return user.firstName[0] + user.lastName[0]
}

getInitials({ firstName: 'Ada' })
// TypeError: Cannot read properties of undefined (reading '0')

type User = {
  firstName: string
  lastName: string
}

function getInitials(user: User): string {
  return user.firstName[0] + user.lastName[0]
}

getInitials({ firstName: 'Ada' })
// Error: Property 'lastName' is missing in type '{ firstName: string; }'
//        but required in type 'User'.

// Primitives
let title: string = 'Hello'
let count: number = 42
let active: boolean = true

// Arrays and objects
let tags: string[] = ['js', 'ts']
let point: { x: number; y: number } = { x: 1, y: 2 }

// Functions — parameter and return types
function repeat(text: string, times: number): string {
  return text.repeat(times)
}

// Union types — one of several
let id: string | number = 'usr_1'
id = 7 // also fine

// Optional properties and parameters
function greet(name: string, title?: string) {
  return title ? `${title} ${name}` : name
}

let score = 10          // inferred: number
score = 'high'          // Error: Type 'string' is not assignable to type 'number'

const langs = ['js', 'ts']       // inferred: string[]
const upper = langs.map((l) => l.toUpperCase()) // l inferred as string

interface User {
  id: number
  name: string
  email?: string          // optional
  readonly createdAt: Date // cannot be reassigned
}

interface Admin extends User {
  permissions: string[]
}

// Type alias — same idea, plus unions
type Status = 'draft' | 'published' | 'archived'

function publish(user: Admin, status: Status) {
  if (!user.permissions.includes('publish')) {
    throw new Error(`${user.name} cannot publish`)
  }
  // ...
}

// utils.js — still plain JavaScript!
// @ts-check

/**
 * @param {number} price
 * @param {number} [taxRate]
 * @returns {number}
 */
export function withTax(price, taxRate = 0.2) {
  return price * (1 + taxRate)
}

withTax('9.99') // Error in your editor: Argument of type 'string'
                // is not assignable to parameter of type 'number'.

{
  "compilerOptions": {
    "target": "ES2022",          // JS version to emit
    "module": "ESNext",          // module system in output
    "moduleResolution": "bundler",
    "strict": true,              // all strict checks — always on for new code
    "noEmit": true,              // just type-check; a bundler emits the JS
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

# 1. The TypeScript compiler directly
npm install --save-dev typescript
npx tsc              # compile per tsconfig.json
npx tsc --noEmit     # type-check only
npx tsc --watch      # re-check on every save

# 2. Vite (most apps) — esbuild strips types instantly,
#    tsc checks types separately
npm create vite@latest my-app -- --template vanilla-ts

const el = document.getElementById('app')
el.innerHTML = 'Hi' // Error: 'el' is possibly 'null'.
// Fix: check it first
if (el) el.innerHTML = 'Hi'

let user: { name: string }
console.log(user.name) // Error: Variable 'user' is used before being assigned.

function pick(key) {} // Error: Parameter 'key' implicitly has an 'any' type.
// Fix: function pick(key: string) {}

const config = JSON.parse(raw) // config is 'any' — annotate it:
const parsed: { port: number } = JSON.parse(raw)