# TypeScript Tricks You’ll Use All the Time in React

## Destructuring with Types

You’ve probably used destructuring in [**JavaScript**](https://wiki.nushackers.org/orbital/readme-1):

```jsx
const user = { name: "Alice", age: 30 };
const { name } = user;
```

But in **TypeScript**, destructuring can be *typed* for extra safety:

```tsx
interface User {
  name: string;
  age: number;
}

const user: User = { name: "Alice", age: 30 };

const { name, age }: User = user; // Typed destructuring

console.log("name: ", name); // "name: Alice"
console.log("age: ", age); // "age: 30"
```

You can also destructure in function parameters:

```tsx
function greet({ name }: { name: string }) {
  console.log(`Hi, ${name}`);
}
```

Even better, use `interfaces` to keep things clean:

```tsx
interface GreetProps {
  name: string;
}

function greet({ name }: GreetProps) {
  console.log(`Hi, ${name}`);
}
```

> ✅ You will use this very often in React component props!

## Spread Operator with Typed Objects

###  What is the Spread Operator?

The spread operator (...) is a feature in **JavaScript** (and supported in **TypeScript**) that allows you to “spread” the properties of an object or elements of an array into another object or array.

```tsx
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 };
```

* `...user` spreads all the properties of user into a new object.
* We then **override** the age property.

This is especially useful when mutating objects immutably, i.e., creating a *new* object based on the old one but with some changes — a core concept in React state updates.

> #### :brain: Use the spread operator instead of direct mutation to keep your data. 
>
> This helps React detect changes, triggers proper re-renders, and avoids unexpected side effects.

Let's say you want to update a specific property of the object. You will do the following:

```tsx
interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User>({ name: "Alice", age: 25 });

setUser(prev => ({ ...prev, age: 26 })); // only update the age to 26 here.
```

## Default Values with Destructuring

> Destructuring + default values = cleaner, safer code.

```tsx
function greet({ name = "Guest" }: { name?: string }) {
  console.log(`Hi, ${name}`);
}

greet({ name: undefined }); // "Hi, Guest"
greet({ name: "Bob" }); // "Hi, Bob"
```

## Rename in Destructuring

You can rename variables while destructuring:

```tsx
const user = { name: "Alice" };
const { name: userName } = user;

console.log(userName); // "Alice"
```

## Typing Arrays and Spread

You can spread arrays too, and TypeScript keeps the types intact.

```tsx
const todos: string[] = ["Buy milk"];
const updatedTodos = [...todos, "Walk dog"]; // Type is still string[]
```