Transitioning to TypeScript: The Ultimate Starter Guide - Part 6
Tags: javascript, beginners, programming, typescript
Published: 2023-09-05 06:39:41

## TypeScript from JavaScript Part 6 of 7: Generics and Utility Types

Hey there, wonderful developers! We're almost at the end of our journey from JavaScript to TypeScript. In this penultimate part of the series, we will explore the powerful features of generics and utility types in TypeScript.

As we always say, this series aims to demonstrate how TypeScript can simplify our work, save time, and elevate our apps. So, without further ado, let's dive into the world of generics and utility types!

## 1. Generics

Generics is a feature of TypeScript (and many other programming languages) that allows you to create reusable components that can work with different data types.

### a. Generic Functions

Generic functions are functions that can work with any data type. You can create a generic function by using a type variable, which is a special kind of variable that works on types rather than values.

```typescript
function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");
let output2 = identity<number>(100);
```

In this example, `identity` is a generic function that takes an argument `arg` of any type `T` and returns a value of the same type `T`. We can then call the `identity` function with different data types.

### b. Generic Interfaces

Generic interfaces are interfaces that can work with any data type.

```typescript
interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity;
```

In this example, `GenericIdentityFn` is a generic interface that has a single method `identity` that can work with any data type.

### c. Generic Classes

Generic classes are classes that can work with any data type.

```typescript
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
    return x + y;
};

console.log(myGenericNumber.add(3, 4)); // 7
```

In this example, `GenericNumber` is a generic class that has a property `zeroValue` and a method `add` that can work with any data type.

## 2. Utility Types

Utility types are a set of generic types built into TypeScript that make it easy to transform types from one form to another. TypeScript provides several utility types, but we will cover the most commonly used ones here.

### a. Partial

The `Partial` type takes a type `T` and makes all of its properties optional.

```typescript
interface Todo {
    title: string;
    description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = { title: 'Learn TypeScript', description: 'Read TypeScript handbook' };
const todo2 = updateTodo(todo1, { description: 'Read TypeScript documentation' });

console.log(todo2); // { title: 'Learn TypeScript', description: 'Read TypeScript documentation' }
```

In this example, the `updateTodo` function takes a `Todo` object and a `fieldsToUpdate` object that has optional properties of the `Todo` type.

### b. Readonly

The `Readonly` type takes a type `T` and makes all of its properties read-only.

```typescript
interface Todo {
    title: string;
}

const todo: Readonly<Todo> = {
    title: 'Learn TypeScript',
};

todo.title = 'Learn JavaScript'; // Error: Cannot assign to 'title' because it is a read-only property
```

In this example, the `todo` object has a read-only `title` property, so it cannot be modified after it is created.

### c. Record

The `Record` type creates a new type with properties of a given type.

```typescript
interface PageInfo {
    title: string;
}

type Page = 'home' | 'about' | 'contact';

const nav: Record<Page, PageInfo> = {
    home: { title: 'Home' },
    about: { title: 'About' },
    contact: { title: 'Contact' },
};

console.log(nav.home.title); // Home
```

In this example, the `nav` object has properties `home`, `about`, and `contact` of the `PageInfo` type.

### d. Pick

The `Pick` type creates a new type by picking a set of properties from an existing type.

```typescript
interface Todo {
    title: string;
    description: string;
    completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;

const todo: TodoPreview = {
    title: 'Learn TypeScript',
    completed: false,
};

console.log(todo); // { title: 'Learn TypeScript', completed: false }
```

In this example, the `TodoPreview` type has only the `title

` and `completed` properties of the `Todo` type.

## Conclusion

Generics and utility types are powerful features of TypeScript that allow you to create reusable components and transform types from one form to another. By using generics and utility types, you can make your code more flexible, reusable, and type-safe.

In the final part of this series, we will explore advanced topics like decorators and mixins. Stay tuned!

---

That’s a wrap. Thanks for reading.

If you're looking for more premium content and resources to help you start and grow your business, consider subscribing to my [Newsletter](https://innovatesphere.beehiiv.com/).

Want to see what I am working on? Check out my [Twitter](https://twitter.com/abhaysinghr1)