Bare minimum TypeScript for modern frameworks

TypeScript scared me off JavaScript longer than it should have. Modern frameworks infer a lot for you. A small practical subset covers most of my day-to-day work in React and Next.js.

1. Annotate props and function inputs

type ButtonProps = {
  label: string;
  onClick?: () => void;
  disabled?: boolean;
};

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button type="button" onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Objects with optional fields (?), unions (string | number), and basic arrays (string[]) handle most component contracts.

2. Let inference handle locals

You rarely need to type every variable. const count = 0 and const items = posts.filter(...) are enough. Add explicit types when inference fails or the value crosses a module boundary.

3. Know async return shapes

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

async function getUser(id: string): Promise<User | null> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) return null;
  return res.json();
}

Promise<T> on async functions tells callers what they get back. Pair with zod at API boundaries when data comes from the network.

4. Read generics, don't write them yet

useState<User | null>(null), Array<Post>, Record<string, string> show up everywhere. Recognize them. Wait until you've repeated a pattern a few times before writing custom generics.

5. Narrow with guards

function formatId(id: string | number) {
  if (typeof id === "number") return id.toString();
  return id;
}

typeof checks, optional chaining (user?.email), and nullish coalescing (value ?? default) fix most any-related pain without unsafe casts.

6. Import types from the framework

React: ComponentProps, ReactNode, CSSProperties
Next.js: Metadata, PageProps, LayoutProps (App Router)
Generated types from your ORM or API client. Don't duplicate by hand.

What you can skip for now

Conditional types, mapped types, template literal types
Declaration merging and ambient modules

Ship with the minimum. Type errors are feedback. Fix one, learn one concept, move on. That's enough to work confidently in modern frameworks, and AI tools handle boilerplate types faster when you know what to ask for.