notion prep

// basic types
let name: string = "youdahe"
let count: number = 0
let done: boolean = false

// interface
interface User {
  id: string
  name: string
  age?: number   // optional
}

// type alias
type Status = "active" | "inactive"

// generic
function wrap<T>(val: T): T[] {
  return [val]
}

// Partial — all props optional
type P = Partial<User>

// Pick — subset of props
type N = Pick<User, "id" | "name">

// Omit — exclude props
type O = Omit<User, "age">

// Record — key/value map
type M = Record<string, number>

// Optional chaining
user?.address?.city

// Nullish coalescing
const name = user.name ?? "anon"

// Non-null assertion
const el = document.getElementById("x")!

const nums: number[] = [1, 2, 3]

// map / filter / reduce
const doubled = nums.map(n => n * 2)
const evens = nums.filter(n => n % 2 === 0)
const sum = nums.reduce((acc, n) => acc + n, 0)

// find / findIndex
const found = nums.find(n => n > 1)
const idx = nums.findIndex(n => n > 1)

// spread
const copy = [...nums, 4, 5]

// destructuring
const [first, ...rest] = nums

// async/await
async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`)
  if (!res.ok) throw new Error("failed")
  return res.json() as Promise<User>
}

// type guard
function isString(v: unknown): v is string {
  return typeof v === "string"
}

// as const
const ROLES = ["admin", "user"] as const
type Role = typeof ROLES[number]

describe("MyComponent", () => {
  let instance: MyClass

  beforeEach(() => {
    instance = new MyClass()
  })

  afterEach(() => {
    jest.clearAllMocks()
  })

  it("does the thing", () => {
    const result = instance.doThing()
    expect(result).toBe(true)
  })

  it("handles edge case", () => {
    expect(() => instance.bad()).toThrow()
  })
})

// equality
expect(x).toBe(y)         // === (primitives)
expect(x).toEqual(y)      // deep equality
expect(x).not.toBe(null)

// truthiness
expect(x).toBeTruthy()
expect(x).toBeFalsy()
expect(x).toBeNull()
expect(x).toBeUndefined()

// arrays / strings
expect(arr).toHaveLength(3)
expect(arr).toContain(item)
expect(str).toMatch(/pattern/)

// numbers
expect(n).toBeGreaterThan(0)
expect(n).toBeLessThanOrEqual(10)

// mock a function
const mockFn = jest.fn()
mockFn.mockReturnValue(42)
mockFn.mockResolvedValue({ id: "1" })

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith("arg")
expect(mockFn).toHaveBeenCalledTimes(2)

// mock a module
jest.mock("../api", () => ({
  fetchUser: jest.fn().mockResolvedValue({
    id: "1", name: "test"
  })
}))

// spy on method
const spy = jest.spyOn(obj, "method")

// async/await
it("loads data", async () => {
  const data = await fetchUser("1")
  expect(data.name).toBe("youdahe")
})

// resolves/rejects matchers
it("resolves correctly", async () => {
  await expect(fetchUser("1")).resolves
    .toMatchObject({ id: "1" })
})

it("throws on bad id", async () => {
  await expect(fetchUser("")).rejects
    .toThrow("failed")
})

// useState
const [count, setCount] = useState(0)
setCount(prev => prev + 1)  // functional update

// useEffect — runs after render
useEffect(() => {
  document.title = `Count: ${count}`
  return () => { /* cleanup */ }
}, [count])  // dep array controls when it fires

// missing dep = stale closure bug
// extra dep = unnecessary re-runs

// useCallback — memoize function ref
const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

// useMemo — memoize computed value
const sorted = useMemo(() =>
  items.sort(compareFn)
, [items])

// useRef — mutable, no re-render
const inputRef = useRef<HTMLInputElement>(null)
inputRef.current?.focus()

// also useful for previous value tracking