Skip to content

TypeScript + React Handbook Notes: A Compact Tutorial

This tutorial condenses the official TypeScript React handbook into a short, practical reference for typing components, props, and hooks. It is written for JavaScript learners transitioning to TypeScript.

1) Typing Props

Use explicit prop types and let TypeScript infer return types from JSX.

type UserCardProps = {
  name: string
  role?: string
}

function UserCard({ name, role = "Dev" }: UserCardProps) {
  return (
    <div>
      <strong>{name}</strong>
      <span>{role}</span>
    </div>
  )
}

2) Typing State

Prefer inference when possible. Provide types for complex objects.

type User = { id: string; name: string }

function UsersList() {
  const [users, setUsers] = React.useState<User[]>([])
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )
}

3) Typing Events

Use the React event types for DOM handlers.

function SearchBox() {
  const [value, setValue] = React.useState("")
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }
  return <input value={value} onChange={onChange} />
}

4) Typing Refs

function FocusInput() {
  const ref = React.useRef<HTMLInputElement | null>(null)
  const focus = () => ref.current?.focus()
  return (
    <div>
      <input ref={ref} />
      <button onClick={focus}>Focus</button>
    </div>
  )
}

5) Typing Children

type PanelProps = {
  children: React.ReactNode
}

function Panel({ children }: PanelProps) {
  return <section>{children}</section>
}

6) Checklist

Prefer inference for simple state.
Use React's built-in event types.
Keep prop types explicit.
Type your useRef when accessing DOM APIs.

References

Further Reading

Share on Share on