Summary  
This chapter covers how to define and enforce the shape of props in React components using TypeScript, including optional props and prop destructuring.

General domain of usage  
Web user interface development

React components receive data through **props**.
In TypeScript, you define **what props should look like**, so the component receives the correct data.
### Define props type
```tsx
type Props = {
  name: string;
};
```
This describes the shape of props. `name` must exist. `name` must be a string.

### Use it in the component
```tsx
function Greeting(props: Props) {
  return <h2>Hello, {props.name}</h2>;
}
```
Here, props must follow the Props structure.
If you pass something wrong, TypeScript will show an error.

### Short version
```tsx
function Greeting({ name }: Props) {
  return <h2>Hello, {name}</h2>;
}
```
This is the same thing, just shorter.

### Optional Props
```tsx
type Props = {
  name: string;
  age?: number;
};
```
The `?` means the prop is optional.

TypeScript lets you **control what data your component receives**, making components safer and easier to use.

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 Component Props

Define props type

Use it in the component

Short version

Optional Props