# Utility Types

**Utility types** are built-in **TypeScript** helpers that transform types. They make your types more concise, flexible, and powerful, especially when working with component props, APIs, and state.

We’ll cover the key TypeScript types you’ll encounter and use regularly when writing React code.

## Partial\<T>

Makes all properties optional.

```tsx
// Define the original full type
interface User {
  id: string;
  name: string;
  age: number;
}

// Use Partial to make all fields optional
type UpdateUser = Partial<User>;

// You can now create an object with just some fields
const updatedUserInfo: UpdateUser = {
  name: "Bob", // no need for id or age
};

// Simulate an update function where not all user data needs to change
const updateUser = (user: UpdateUser): void => {
  // This function accepts any subset of the User fields
  console.log("Updating user with:", user);
};

updateUser(updatedUserInfo); // Updating user with: { name: "Bob" }
```

> Use `Partial` when you want to allow updating or creating objects without needing all fields up front.

## Required\<T>

Makes all properties required (the opposite of `Partial<T>`).

```tsx
interface Props {
  name?: string;
  age?: number;
}

type AllRequired = Required<Props>;

const person: AllRequired = {
  name: "Bob",
  age: 42,
};
```

## Pick\<T, K>

> “Give me a type with only these specific keys from the original.”

Creates a type by picking a subset of properties from another type.

```tsx
interface User {
  id: string;
  name: string;
  age: number;
  email: string;
  isAdmin: boolean;
}

// Pick only id and name
type UserPreview = Pick<User, "id" | "name">;

const userPreview: UserPreview = {
  id: "123",
  name: "Alice",
};
```

## Omit\<T, K>

The inverse of `Pick<T>`. Removes specific properties from a type.

```tsx
interface User {
  id: string;
  name: string;
  email: string;
  isAdmin: boolean;
}

type UserWithoutAdmin = Omit<User, "isAdmin">;

const user: UserWithoutAdmin = {
  id: "1",
  name: "Alice",
  email: "alice@example.com",
};
```

## Record\<K, T>

Constructs an object type where the keys `K` have values of type `T`.

```tsx
type Status = "idle" | "loading" | "error";

type StatusMessages = Record<Status, string>;

const messages: StatusMessages = {
  idle: "Nothing happening",
  loading: "Loading...",
  error: "Something went wrong",
};
```

## Exclude\<T, U>

Removes from `T` the types that are assignable to `U`.

```tsx
type Roles = "admin" | "user" | "guest";

type NonGuest = Exclude<Roles, "guest">;
// "admin" | "user"
```

## Extract\<T, U>

Keeps only types from `T` that are assignable to `U`.

```tsx
type AllRoles = "admin" | "user" | "guest";
type StaffRoles = Extract<AllRoles, "admin" | "user">;
// "admin" | "user"
```

## NonNullable\<T>

Removes `null` and `undefined` from a type.

```tsx
type MaybeName = string | null | undefined;
type Name = NonNullable<MaybeName>; // string
```

## ReturnType\<T>

Gets the return type of a function.

```tsx
function getUser() {
  return {
    id: "1",
    name: "Alice",
  };
}

type UserReturn = ReturnType<typeof getUser>;
// { id: string; name: string }
```

More can be found in the [official documentation](https://www.typescriptlang.org/docs/handbook/utility-types.html).