Summary
This chapter explains how to annotate the types of items in arrays (whether primitives or objects) in TypeScript and emphasizes using unique keys when rendering lists in React.

General domain of usage
Front-end UI development

In React, lists are used to render multiple items.
In TypeScript, you define **the type of items inside the list**, so each item has a clear structure.

### Typing a List of Values
```tsx
const items: string[] = ["Apple", "Banana", "Orange"];
```
Rendering a list:
```tsx
items.map((item) => <li key={item}>{item}</li>);
```
- Each item is a string;
- Key helps React track elements.

### Typing a List of Objects
```tsx
type User = {
  id: number;
  name: string;
};

const users: User[] = [
  { id: 1, name: "Alex" },
  { id: 2, name: "John" },
];
```
Rendering object list:
```tsx
users.map((user) => (
  <li key={user.id}>{user.name}</li>
));
```
- Each item follows the `User` type;
- Use a unique key (like `id`).


Define the type of list items, and use a unique key when rendering them.

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 Lists and Keys

Typing a List of Values

Typing a List of Objects