TypeScript with React

Add TypeScript to React for type safety.

Setup

npx create-react-app my-app --template typescript

Component with Props

interface UserProps {
  name: string;
  age: number;
  email?: string;
}

function User({ name, age, email }: UserProps) {
  return <div>{name}, {age}</div>;
}

useState with Types

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

Event Types

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

Remember

• Define prop interfaces
• Type state and events
• Better IDE support
• Catch errors early

Next: Learn Next.js basics!