Summary  
This chapter explains how to use TypeScript generics with React’s useState hook to explicitly define and enforce the type of state variables—covering primitives, arrays, objects, and nullable types.

General domain of usage  
Interactive user interface development

React state stores data inside a component.
In TypeScript, you define **what type of data the state holds**, so updates stay correct.

### Basic Typing
```tsx
const [count, setCount] = useState<number>(0);
```
- `count` is a `n`umber`;
- `setCount` accepts only numbers.

With string:
```tsx
const [name, setName] = useState<string>("Alex");
```
With array:
```tsx
const [items, setItems] = useState<string[]>([]);
```
`items` is an array of strings.
With object:
```tsx
const [user, setUser] = useState<{ name: string; age: number }>({
  name: "Alex",
  age: 25,
});
```
With null (common case):
```tsx
type User = {
  name: string;
  age: number;
};

const [user, setUser] = useState<User | null>(null);
```
`state` can be `User` or `null`.


Type the state with `<Type>` so it always stores the correct data.

Explore how TypeScript adds type safety and structure to modern React applications. Work with core types, interfaces, and generics to model data and build reliable components. Apply TypeScript in real scenarios by typing props, state, and API data to prepare for scalable Next.js development.

Typing State with useState

Basic Typing