TypeScript Utility Types
Published: 2022-04-12 16:10:25

---
title: TypeScript Utility Types
published: true
date: 2022-04-12 11:27:48 UTC
tags: 
canonical_url: https://eman.hashnode.dev/typescript-utility-types
---

# Introduction

In this article I'll be going over TypeScript utility types, explain their importance and also include some useful examples and use cases.

Utility types are built-in types that allow you to `transform` existing types into new modified types.

![Untitled Diagram.drawio (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649719576878/pwjVyV_C1.png)

Say we have `type A` and we'd like to construct a new `type B` that may `inherit`, `modify` or `exclude` properties from `type A`.

We achieve this by using a utility type i.e `type B = UtilityType<A, options>` where `UtilityType` represents the type to be used and `options` describe the type of operation to perform e.g `inherit`, `modify` or `exclude` etc.

> Utility types aren't supported by `primitives` except strings which offer `Intrinsic String Manipulation Types` to manipulate strings.  
> Utility types are usually used with compound types such as `Interfaces` and `Union Types`.

**Before you get started**

The TypeScript [playground](https://www.typescriptlang.org/play) is an excellent place to experiment with Utility Types. It's highly recommended to practice what you learn in order to solidify your understanding of the topic.

## Union Types

A union type is a type formed from two or more other types, representing values that may be any one of those types. We refer to each of these types as the union’s members.

**Union types basically `combine` two or more types.**

Unions support the following utility types:

- [Exclude](#exclude)
- [Extract](#extract)

This example to demonstrate how to use utility types with unions.

> Caveat: Union types are `case-sensitive`.

```
type ActivityType =
  "Swimming"
  | "Reading"
  | "Coding"
  | "Dancing"
  | "Jogging";

```

### 1 -Extract

Constructs a type by extracting from Type all union members that are assignable to Union.

**Syntax `Extract<Type, Union>`**

Where `Type` is the initial type and `Union` represents the entries we'd like to extract.

#### Demo

```
type CognitiveActivity = Extract<ActivityType, "Reading" | "Coding">;
// transformed type: "Reading" | "Coding"
const activity: CognitiveActivity = "Reading"; 
console.log(activity);

```

### 2 - Exclude

Constructs a type by excluding from UnionType all union members that are assignable to ExcludedMembers.

**Syntax `Exclude<UnionType, ExcludedMembers>`**

Where `UnionType` is the initial type and `ExcludedMembers` represents the entries we'd like to exclude.

#### Demo

```
type PhysicalActivity = Exclude<ActivityType, "Reading" | "Coding">;
 // transformed type: "Swimming" | "Dancing" | "Exercise";
const activity: PhysicalActivity = "Swimming";
console.log(activity);

```

## Type Aliases and Interfaces

- Type Aliases: A type alias is a name for any type.

- Interfaces: An interface declaration is another way to name an object type.

This example to demonstrate how to use utility types with type aliases and interfaces.

> Intersection types are types that combine properties from two or more types. They're usually used in conjunction with the following utility types.

The general syntax is

```
type A = {
   [key: string]: string;
};
type B = A & {
   bKey: string;
}; // includes all the properties in A and B


type ElectronicDevice = {
  name: string;
  USBPorts: USBPORT[];
  screenDimensions: Dimension;
  buttons: Buttons[];
  wifiConnectivity: boolean;
  manufacturer: string;
  memory: number;
}

```

This type represents the properties of an electronic device. Electronic devices come in a variety of shapes and sizes but they share a lot of core features such as buttons, memory, ports etc.

You can test the types in this example on this TypeScript [playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAogNhAxsATgewHYEtEBEIBuO0AvFAN4BQUUGAhgLYQBcUAzqlhgOYDc1UAKoBlAEIAFNCmBtWIiQHkASgBUA2gF1+NNohQQIGXFiYY2WTLKjHT5zNqgAjAK7Bgl1qNfuzmhwHcsADMsAGFMDCRgLCJQVkc0NAQ6DAcGFOcgumRnfRRWDhQuPgEmBikQVgxnBkcIFH4AX0pKUEgoULo4RGc4OncUKDJxHABrAB54KPRsPEJiABooACJ6JmWaAB8VlzdLZYA+KAAyCgE2lg6unr6BlXAIBwB6J6g0fwwoC7ZKZtaH6zzRAQe7tMjLACC9DgaG4zggG22y2M3CwwC6y34-3awnS0nEAAtMKQoEokFIACbjfBEYGgiBLKbIGY4GnEI6nKg0C6sTrdXr9KT056vd6fb6-FqISzAJx9RCjOooFCVKC4uj4omRIZnGg0FForqsKgCGjNP4XNXuMAAdX6iAJOoUDDRkwQzMwrKBDJWgRC4QwkWQMTRIERK3kkmkbEOWOlZll3AgwEEbHqohAEODsRAOrobBAGEQUAAFDz2JweABKXVQeMcKD6NhgSwkuj+OhoqB0MBhLpwEu5OBLMAaxhsKu8KAvKBZUbQHtYOv9gT6YC5T5NltmCAAOgp-ToTWx0AAchB-Kn6jqyeuUBh6eMLmgglAkym0ygM1nojmDpR61lZxP1Yc9L0-HV3yvL9M2zUMS2yX9Q13C5J0oIA).

### 1 - Pick

**Syntax `Pick<Type, Keys>`**

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

#### Demo

```
type Calculator = Pick<ElectronicDevice, "name" | "buttons"> & {
  type: CalculatorType;
  // own types
}

```

### 2 - Record

**Syntax `Record<Keys, Type>`**

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.

#### Demo

```
type DeviceType = "Analogue" | "Digital";

type SmartPhone = Record<DeviceType, ElectronicDevice> & {
  type: CalculatorType;
  // own types
}

const blackberry: SmartPhone = {
    Digital: {

    }
}

```

### 3 - Omit

**Syntax `Omit<Type, Keys>`**

Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals).

#### Demo

```
type StopWatch = Omit<ElectronicDevice, "wifiConnectivity" | "USBPorts">;

```

### 4 - ReturnType

**Syntax `ReturnType<Type>`**

Constructs a type consisting of the return type of function Type.

#### Demo

```
const getUserByActivity = async (type: string) => {
  const response = await apiCall(url, params); // fake api call
  return response.data;
}
type NewUser = ReturnType<typeof getUserByActivity>
const user: NewUser = getUserByActivity(activity.type);

```

* * *

References:

- [TypeScript Utility Types](https://www.typescriptlang.org/docs/handbook/utility-types.html)