React7 min read

TypeScript with React

Add type safety to React apps with TypeScript.

Sarah Johnson
December 20, 2025
0.0k0

Add TypeScript to React for type safety.

Setup

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

Component with Props

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

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

useState with Types

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

Event Types

```typescript 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!

#React#TypeScript#Types#Advanced