TypeScript Tips for React Developers

Why TypeScript?

TypeScript catches errors at compile time, provides better IDE support, and serves as documentation for your code. Here are some patterns I use daily.

Component Props

Use interfaces to define your component props. It makes your components self-documenting.

interface ButtonProps {
  variant: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

function Button({ variant, size = 'md', children, onClick }: ButtonProps) {
  // ...
}

Generic Components

Sometimes you need components that work with different data types. Generics to the rescue!

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}

Type Inference

Let TypeScript do the work when possible. You don't always need explicit types.

// TypeScript infers the return type
const getUser = async (id: string) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

Conclusion

TypeScript is an investment that pays dividends. Start small, and gradually add more types as you become comfortable.