5 Resources Each TypeScript Developer Should Know About
Tags: typescript, webdev, javascript, learning
Published: 2024-03-10 21:03:47

Want to become a TypeScript pro? Master advanced TypeScript skills with these resources, from type definitions and challenging type puzzles to practical utility libraries and API development tools.


## 1. DefinitelyTyped — A collection of type definitions


DefinitelyTyped serves as a community-driven collection of high-quality TypeScript type definitions. 

{% embed https://github.com/DefinitelyTyped/DefinitelyTyped %}

In simple terms, it provides TypeScript interfaces and type information for JavaScript libraries that don’t have them built-in.

![DefinitelyTyped Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vadzh89i6fodqc6fzq2z.png)

When you’re using a JavaScript library in a TypeScript project, TypeScript needs to know the shapes and types of the library’s exports to type-check your code correctly.

It’s highly popular and has over 100 million weekly downloads!

![Weekly downloads DefinitelyTyped npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oo4s3diyrwh0fvlxk6p.png)

This repo allows developers to use existing JavaScript libraries within their TypeScript projects seamlessly, ensuring type safety.

If the library doesn’t provide its own types, you can likely find them in DefinitelyTyped. These type definitions are then used by the TypeScript compiler to understand the library’s structure, offering auto-completion, type checking, and other IDE features for a smoother development experience.

### Example (Lodash)

Let’s say you’re working on a TypeScript project and decide to use **Lodash**, a popular utility library. **Lodash** itself is written in JavaScript and doesn’t include TypeScript definitions. 

![Lodash Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8oi1s7cjpxndaytog54.png)

Here's how you can use Lodash with types in your project with the help of DefinitelyTyped:

First, install Lodash:

```bash
npm install lodash
```

Then, install the type definitions for Lodash from DefinitelyTyped:

```bash
npm install @types/lodash --save-dev
```

Now, you can use Lodash in your TypeScript file with full type support:

```typescript
import _ from 'lodash';

// Example usage with full type support
let numArray: number[] = [1, 2, 3, 4, 5];
let sum: number = _.sum(numArray); // Lodash's sum function

console.log(sum); // Output will be 15
```

By using DefinitelyTyped's type definitions, you can maintain type safety and take full advantage of TypeScript's features, even when using JavaScript libraries.

## 2. Type Challenges — A collection of TypeScript puzzles

The repo provides a collection of TypeScript puzzles similar to LeetCode problems. 

![Type Challenges Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk3ahyjyhq4stvi75rzx.png)

Each challenge focuses on a specific aspect of TypeScript’s type system, from basic concepts to complex type manipulation. You’ll often need to use generic types or apply advanced features like conditional types and mapped types to solve them.

{% embed https://github.com/type-challenges/type-challenges %}

These exercises will help you to test and improve your understanding of TypeScript’s type system.

### Example: [First of Array](https://github.com/type-challenges/type-challenges/blob/main/questions/00014-easy-first/README.md)

Let’s look at the “Easy” level challenge. The task is to construct a generic type First<T> that takes an array and returns its first element:

```typescript
type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3
```

To solve the task you can use the [Typescript playground](https://tsch.js.org/14/play)

The solution might be something like this:

```typescript
type First<T extends any[]> = T extends [infer First, ...infer Rest] ? First : never
```


- `T extends any[]`: We constrain the input T to be an array.
- `T extends [infer First, ...infer Rest]`: Pattern matching to extract the first element as First and the rest of the array as Rest.
- `First : never`: Conditional type for handling empty arrays.

The **Type Challenges** repository provides a structured and engaging way to level up your TypeScript mastery.


## 3. Utility types — A collection of pre-written utility types

This collection of pre-written utility types saves you time and effort when working with different data types in TypeScript.


![Utility types repository screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uezkutw3qkqnunvtiakq.png)

This repository offers a collection of utility types that can be applied in various TypeScript projects.

{% embed https://github.com/piotrwitek/utility-types %}

These types exist solely at compile time, leaving no runtime cost in your final JavaScript code.

### Example: TypeScript Typeguard isPrimitive
First, install utility-types:

```bash
npm install utility-types
```

Let's use `isPrimitive` Typeguard example - a TypeScript Typeguard for the [`Primitive`](https://github.com/piotrwitek/utility-types#primitive) type
This can be useful to control the type of a parameter as the program flows.

```typescript
import { Primitive, isPrimitive } from 'utility-types';

const consumer = (param: Primitive[] | Primitive): string => {
    if (isPrimitive(param)) {
        // typeof param === Primitive
        return String(param) + ' was Primitive';
    }
    // typeof param === Primitive[]
    const resultArray = param
        .map(consumer)
        .map(rootString => '\n\t' + rootString);
    return resultArray.reduce((comm, newV) => comm + newV, 'this was nested:');
};
```

`Primitive`: This type represents the basic building blocks of JavaScript and TypeScript values: strings, numbers, booleans, etc.
`isPrimitive`: This type guard function lets you dynamically check if a given variable is a primitive type. This is especially valuable when working with data that could have varying structures.

### Benefits of using utility-types:

- Cleaner code: The `isPrimitive` type guard avoids manual `typeof` checks and potential branching.

- Type safety: It ensures that we're only manipulating primitive values within the appropriate code block.

## 4. Typescript book — Open-source e-book

Free and open-source e-book that dives deeply into TypeScript's features. Perfect if you prefer a traditional book-like format.

![Typescript book Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsdxy5yh0ic4hiznzeti.png)


You can freely access, read, and even contribute to the book’s content.

{% embed https://github.com/basarat/typescript-book %}


The book is known for its easy-to-understand explanations and illustrative examples. This makes it suitable for both beginners and experienced programmers who want to improve their TypeScript knowledge.

The book describes various aspects of TypeScript, from its core concepts and syntax to advanced topics like generics, decorators, and metaprogramming.

## 5. [tRPC.io](tRPC.io) — End-to-end typesafe API

tRPC offers a solution for building modern APIs with a focus on type safety and developer experience. This open-source project provides tools and libraries needed to construct type-safe APIs.

{% embed https://github.com/basarat/typescript-book %}

tRPC integrates seamlessly with popular web frameworks such as React, Next.js and Express.js.

![tRPC Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygqqb3wu0pjq80cf7dvu.png)

### Type-safe APIs have several advantages:

- Reduced Errors: Static type checking helps catch potential errors at development time, preventing runtime issues that can be difficult to debug later.
- Improved Maintainability: A type-safe API provides a clear understanding of the data structures and interactions involved.
- Enhanced Developer Experience: Autocompletion and other IDE features powered by static types can significantly improve development speed and overall developer satisfaction.

---


Becoming a true TypeScript expert takes time and practice. These resources will help you build a strong start. Keep learning, keep trying new things, and connect with other TypeScript developers to take your skills to the next level.

Check out my other articles on TypeScript:
- [TypeScript Index Signatures: 4 Examples Type-Safe Dynamic Objects](https://dev.to/alexefimenko/typescript-index-signatures-4-examples-type-safe-dynamic-objects-554o)
- [Making React Components More Flexible with TypeScript Generics: 3 Examples](https://dev.to/alexefimenko/3-examples-of-typescript-generic-react-components-4f9)
- [TypeScript Enums: 5 Real-World Use Cases](https://dev.to/alexefimenko/typescript-enums-5-real-world-use-cases-4idk)

This article was originally [posted on Medium](https://medium.com/@alexefimenko/5-resources-to-become-an-advanced-typescript-developer-daa2238dad11).