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.

type-challenges / type-challenges

Collection of TypeScript type challenges with online judge

Collection of TypeScript type challenges

English | 简体中文 | 日本語 | 한국어 | Português

Intro

by the power of TypeScript's well-known Turing Completed type system

High-quality types can help improve projects' maintainability while avoiding potential bugs.

There are a bunch of awesome type utility libraries that may boost your works on types, like ts-toolbelt, utility-types, SimplyTyped, etc., which you can already use.

This project is aimed at helping you better understand how the type system works, writing your own utilities, or just having fun with the challenges. We are also trying to form a community where you can ask questions and get answers you have faced in the real world - they may become part of the challenges!

Challenges

Click the following badges to see details of the challenges.

Note: Challenges work in the strict mode.

By Tags

By Plain Text

warm-up (1)

• 13・Hello World

…

View on GitHub

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.

piotrwitek / utility-types

Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

utility-types

Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

Found it useful? Want more updates?

Show your support by giving a ⭐

---

What's new?

🎉 Added new utilities 🎉

---

Features

• Providing a set of Common Types for TypeScript projects that are idiomatic and complementary to existing TypeScript Mapped Types so you don't need to copy them between the projects.
• Providing a set of Additional Types compatible with Flow's Utility Types to allow much easier migration to TypeScript.

Goals

• Quality - thoroughly tested for type correctness with type-testing library dts-jest
• Secure and minimal - no third-party dependencies
• No runtime cost - it's type-level only

Installation

# NPM
npm install utility-types

# YARN
yarn add utility-types

Compatibility Notes

TypeScript support

• v3.x.x - TypeScript v3.1+
• v2.x.x - TypeScript v2.8.1+
• v1.x.x - TypeScript v2.7.2+

Funding Issues

Utility-Types is an open-source project created by people investing…

View on GitHub

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.

Check out my other articles on TypeScript:

• TypeScript Index Signatures: 4 Examples Type-Safe Dynamic Objects
• Making React Components More Flexible with TypeScript Generics: 3 Examples
• TypeScript Enums: 5 Real-World Use Cases

This article was originally posted on Medium.