5 Resources Each TypeScript Developer Should Know About

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.

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

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!

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.

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

First, install Lodash:

npm install lodash

Then, install the type definitions for Lodash from DefinitelyTyped:

npm install @types/lodash --save-dev

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

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.

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.

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

Example: First of Array

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

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

The solution might be something like this:

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.

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

# NPM
npm install utility-types

# YARN
yarn add 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:

npm install utility-types

Let’s use isPrimitive Typeguard example - a TypeScript Typeguard for the Primitive type
This can be useful to control the type of a parameter as the program flows.

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.

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

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 — 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.

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

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.

This article was originally posted on Medium.