13 Typescript Utility: A Cheat Sheet for Developer
Tags: typescript, javascript, webdev, frontend
Published: 2022-04-02 07:15:44

Typescript is very powerful in terms of type checking, but sometimes it gets tedious when some types are subsets of other types and you need to define type checking for them.

[![13 Typescript Utility: A Cheat Sheet for Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfl7ira4tjzw4yne3cqu.png)](https://www.youtube.com/watch?v=_1YcI9ohazM
![Image description])


#### Let's take an example, you have 2 response types:

###### UserProfileResponse

```typescript
interface UserProfileResponse {
  id: number;
  name: string;
  email: string;
  phone: string;
  avatar: string;
}
```

###### LoginResponse

```typescript
interface LoginResponse {
  id: number;
  name: string;
}
```

Instead of defining types of same context LoginResponse and UserProfileResponse, we can define type for UserProfileResponse and pick some properties for LoginResponse.

```typescript
type LoginResponse = Pick<UserProfileResponse, "id" | "name">;
```

Let's understand some utility functions that can help you to write better code.

#### Uppercase<StringType>

###### Constructs a type with all properties of Type set to uppercase.

```typescript
type Role = "admin" | "user" | "guest";

// Bad practice 💩
type UppercaseRole = "ADMIN" | "USER" | "GUEST";

// Good practice ✅
type UppercaseRole = Uppercase<Role>; // "ADMIN" | "USER" | "GUEST"
```

---

#### Lowercase<StringType>

###### Constructs a type with all properties of Type set to lowercase. Opposite of Uppercase.

```typescript
type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type LowercaseRole = "admin" | "user" | "guest";

// Good practice ✅
type LowercaseRole = Lowercase<Role>; // "admin" | "user" | "guest"
```

---

#### Capitalize<StringType>

###### Constructs a type with all properties of Type set to capitalize.

```typescript
type Role = "admin" | "user" | "guest";

// Bad practice 💩
type CapitalizeRole = "Admin" | "User" | "Guest";

// Good practice ✅
type CapitalizeRole = Capitalize<Role>; // "Admin" | "User" | "Guest"
```

---

#### Uncapitalize<StringType>

###### Constructs a type with all properties of Type set to uncapitalize. Opposite of Capitalize.

```typescript
type Role = "Admin" | "User" | "Guest";

// Bad practice 💩
type UncapitalizeRole = "admin" | "user" | "guest";

// Good practice ✅
type UncapitalizeRole = Uncapitalize<Role>; // "admin" | "user" | "guest"
```

---

#### Partial<Type>

###### Constructs a type with all properties of Type set to optional.

```typescript
interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface PartialUser {
  name?: string;
  age?: number;
  password?: string;
}

// Good practice ✅
type PartialUser = Partial<User>;
```

---

##### Required<Type>

###### Constructs a type consisting of all properties of Type set to required. Opposite of Partial.

```typescript
interface User {
  name?: string;
  age?: number;
  password?: string;
}

// Bad practice 💩
interface RequiredUser {
  name: string;
  age: number;
  password: string;
}

// Good practice ✅
type RequiredUser = Required<User>;
```

---

#### Readonly<Type>

###### Constructs a type consisting of all properties of Type set to readonly.

```typescript
interface User {
  role: string;
}

// Bad practice 💩
const user: User = { role: "ADMIN" };
user.role = "USER";

// Good practice ✅
type ReadonlyUser = Readonly<User>;
const user: ReadonlyUser = { role: "ADMIN" };
user.role = "USER"; // Error: Cannot assign to 'role' because it is a read-only property.
```

---

#### Record<K extends string, T>

###### Constructs a type with a set of properties K of type T. Each property K is mapped to the type T.

```typescript
interface Address {
  street: string;
  pin: number;
}

interface Addresses {
  home: Address;
  office: Address;
}

// Alternative ✅
type AddressesRecord = Record<"home" | "office", Address>;
```

---

#### Pick<Type, keys>

###### Pick only the properties of Type whose keys are in the union type keys.

```typescript
interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Pick<User, "name" | "age">;
```

---

#### Omit<Type, keys>

###### Omit only the properties of Type whose keys are in the union type keys.

```typescript
interface User {
  name: string;
  age: number;
  password: string;
}

// Bad practice 💩
interface UserPartial {
  name: string;
  age: number;
}

// Good practice ✅
type UserPartial = Omit<User, "password">;
```

---

#### Exclude<Type, Excluded>

###### Constructs a type with all properties of Type except for those whose keys are in the union type Excluded.

```typescript
type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type NonAdminRole = "USER" | "GUEST";

// Good practice ✅
type NonAdmin = Exclude<Role, "ADMIN">; // "USER" | "GUEST"
```

---

#### Extract<Type, Extract>

###### Constructs a type with all properties of Type whose keys are in the union type Extract.

```typescript
type Role = "ADMIN" | "USER" | "GUEST";

// Bad practice 💩
type AdminRole = "ADMIN";

// Good practice ✅
type Admin = Extract<Role, "ADMIN">; // "ADMIN"
```

---

#### NonNullable<Type>

###### Constructs a type with all properties of Type set to non-nullable.

```typescript
type Role = "ADMIN" | "USER" | null;

// Bad practice 💩
type NonNullableRole = "ADMIN" | "USER";

// Good practice ✅
type NonNullableRole = NonNullable<Role>; // "ADMIN" | "USER"
```

---

### Must Read If you haven't

{% link https://dev.to/devsmitra/no-more-redux-action-creators-functions-30j %}
{% link https://dev.to/devsmitra/how-to-cancel-javascript-api-request-with-abortcontroller-36cm %}
{% link https://dev.to/devsmitra/how-to-solve-rest-api-routing-problem-with-decorators-5b3n %}


### Catch me on
{% user devsmitra %}
<p>
{% cta https://www.youtube.com/@devsmitra?sub_confirmation=1 %} Youtube {% endcta %}
{% cta https://github.com/devsmitra %} Github {% endcta %}
{% cta https://www.linkedin.com/in/rahul-sharma-18b8b374 %} LinkedIn {% endcta %}
{% cta https://devsmitra.medium.com %} Medium {% endcta %}
{% cta https://stackblitz.com/@devsmitra %} Stackblitz {% endcta %} {% cta https://devsmitra.hashnode.dev %} Hashnode {% endcta %}
{% cta https://hackernoon.com/u/devsmitra %} HackerNoon {% endcta %}
</p>