TypeScript Cheatsheet 10 — JSX and React Types

type Props = { name: string; age?: number };

function Hello({ name, age = 0 }: Props) {
  return <p>{name}, {age}</p>;
}

type Props = { children: React.ReactNode };

function Box({ children }: Props) {
  return <div>{children}</div>;
}

type Props = { children: (n: number) => React.ReactNode };

function Form() {
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };
  
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  
  const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => { ... };
  
  return (
    <form onSubmit={onSubmit}>
      <input onChange={onChange} />
      <button onClick={onClick}>Go</button>
    </form>
  );
}

const [count, setCount] = useState(0);              // inferred: number
const [user, setUser] = useState<User | null>(null);
const [items, setItems] = useState<Item[]>([]);

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // cleanup
}, [tick]);

const ref = useRef<HTMLInputElement>(null);
ref.current?.focus();

// Mutable value
const idRef = useRef(0);
idRef.current++;

type State = { count: number };
type Action = { type: "inc" } | { type: "dec" } | { type: "set"; n: number };

function reducer(s: State, a: Action): State {
  switch (a.type) {
    case "inc": return { count: s.count + 1 };
    case "dec": return { count: s.count - 1 };
    case "set": return { count: a.n };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

const ThemeContext = React.createContext<"light" | "dark" | undefined>(undefined);

function useTheme() {
  const t = useContext(ThemeContext);
  if (!t) throw new Error("useTheme outside provider");
  return t;
}

const onClick = useCallback((id: number) => { ... }, [deps]);
const items = useMemo(() => expensive(data), [data]);

function List<T>({ items, render }: {
  items: T[];
  render: (item: T) => React.ReactNode;
}) {
  return <ul>{items.map((it, i) => <li key={i}>{render(it)}</li>)}</ul>;
}

<List items={users} render={(u) => u.name} />

type Props = { label: string };

const Input = forwardRef<HTMLInputElement, Props>(({ label }, ref) => (
  <label>
    {label}
    <input ref={ref} />
  </label>
));

type BoxProps<T extends React.ElementType> = {
  as?: T;
  children?: React.ReactNode;
} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;

function Box<T extends React.ElementType = "div">({
  as,
  ...props
}: BoxProps<T>) {
  const Component = as || "div";
  return <Component {...props} />;
}

<Box as="a" href="/x">link</Box>
<Box as="button" type="submit">go</Box>

type ButtonProps = React.ComponentProps<"button">;
type MyProps = React.ComponentProps<typeof MyComponent>;

const style: React.CSSProperties = {
  color: "red",
  display: "flex",
  // CSS variables (with module augmentation):
  "--my-var": "10px",
};

React.ReactNode             // anything renderable
React.ReactElement          // JSX element
React.ReactChild            // single text/element
React.JSX.Element           // JSX element (new)
React.PropsWithChildren<T>  // T & { children?: ReactNode }

type Props =
  | { variant: "primary"; onClick: () => void }
  | { variant: "link"; href: string };

function Button(p: Props) {
  if (p.variant === "primary") return <button onClick={p.onClick} />;
  return <a href={p.href} />;
}