Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 137 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1913,6 +1913,143 @@ export type OrderList = {
}
```

### 11.7 TypeScript Utility Types
Copy link
Contributor

@rogigs rogigs Dec 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great ideas @lucioerlan 💡

What do you think about Typeof Type Operator ?

I've been using those points who you showed. And I've been use too the typeof to the case typing utils, for instance

Screenshot 2023-12-14 054838

Typescript inferred the item as

{
    title: string;
    images: {
        name: string;
        legend: string;
    }[];
}

More about Type Manipulation: https://www.typescriptlang.org/docs/handbook/2/types-from-types.html

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tks @rogigs o/

it's beneficial because it ensures that your types are tight and evolve with your data structures.


`Partial<T>` makes all properties of a type T optional. This is highly useful in front-end scenarios like handling incomplete data from API responses or partially filled forms.

**✅ Good:**

```ts
type User = {
name: string;
age: number;
};

function updateUser(user: Partial<User>) {}
```

**❌ Bad:**

```ts
type User = {
name?: string;
age?: number;
};

function updateUser(user: User) {}
```

---

`Readonly<Type>` makes all properties of a type Type read-only, which is useful for creating immutable objects.

**✅ Good:**

```ts
type User = {
name: string;
age: number;
};

const user: Readonly<User> = { name: "Alice", age: 30 };
```

**❌ Bad:**

```ts
type User = {
name: string;
age: number;
};

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

---

`Record<Keys, Type>` creates a type with a set of properties Keys of type Type, ideal for mapping keys to values in an object.

**✅ Good:**

```ts
type User = { id: number; name: string };
const userDirectory: Record<number, User> = {
1: { id: 1, name: "Alice" },
};
```

**❌ Bad:**

```ts
type User = { id: number; name: string };
const userDirectory = { 1: { id: 1, name: "Alice" } };
```

---

`Pick<Type, Keys>` creates a type by picking a set of properties Keys from Type, useful for creating subsets of a type.

**✅ Good:**

```ts
type User = {
id: number;
name: string;
email: string;
};

const userSummary: Pick<User, "name" | "email"> = {
name: "Alice",
email: "alice@example.com",
};
```

**❌ Bad:**

```ts
type User = {
id: number;
name: string;
email: string;
};

const userSummary = { name: "Alice", email: "alice@example.com" };
```

---

`Omit<Type, Keys>` creates a type by omitting a set of properties Keys from Type, useful for excluding certain properties from a type.

**✅ Good:**

```ts
type User = {
id: number;
name: string;
password: string;
};

const publicUserInfo: Omit<User, "password"> = {
id: 1,
name: "Alice",
};
```

**❌ Bad:**

```ts
type User = {
id: number;
name: string;
password: string;
};

const publicUserInfo: User = { id: 1, name: "Alice", password: "secret" };
```

---

We follow the principle the official [TypeScript doc](https://www.typescriptlang.org/play#example/types-vs-interfaces):
> _For publicly exposed types, it's a better call to make them an interface._

Expand Down