DEV Community

Cover image for 5 Resources Each TypeScript Developer Should Know About
Alex
Alex

Posted on • Edited on • Originally published at Medium

5 Resources Each TypeScript Developer Should Know About

#typescript #webdev #javascript #learning

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.

GitHub logo DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.

Definitely Typed

The repository for high quality TypeScript type definitions.

You can also read this README in Español, 한국어, Русский, 简体中文, Português, Italiano, 日本語 and Français!

Link to Admin manual

!!! Important! This repo has recently changed layout! !!!

Definitely Typed has recently changed to a proper pnpm monorepo; you may want to reread this document for changes to the layout of packages in this repo.

At the very least, you may want to git clean -fdx the repo (or node ./scripts/clean-node-modules.js on Windows) to clean up node_modules and run pnpm install --filter . to install the workspace root. See further sections for more info on pnpm install.

Current status

This section tracks the health of the repository and publishing process. It may be helpful for contributors experiencing any issues with their PRs and packages.

View on GitHub

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

DefinitelyTyped Logo

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

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

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

First, install Lodash:

npm install lodash
Enter fullscreen mode Exit fullscreen mode

Then, install the type definitions for Lodash from DefinitelyTyped:

npm install @types/lodash --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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.

GitHub logo 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.

1
13・Hello World

13
4・Pick 7・Readonly 11・Tuple to Object 14・First of Array 18・Length of Tuple 43・Exclude 189・Awaited 268・If 533・Concat 898・Includes 3057・Push 3060・Unshift 3312・Parameters

97
2・Get Return Type 3・Omit 8・Readonly 2 9・Deep Readonly 10・Tuple to Union 12・Chainable Options 15・Last of Array 16・Pop 20・Promise.all 62・Type Lookup 106・Trim Left 108・Trim 110・Capitalize 116・Replace 119・ReplaceAll 191・Append Argument 296・Permutation 298・Length of String 459・Flatten 527・Append to object 529・Absolute 531・String to Union 599・Merge 612・KebabCase 645・Diff 949・AnyOf 1042・IsNever 1097・IsUnion 1130・ReplaceKeys 1367・Remove Index Signature 1978・Percentage Parser 2070・Drop Char 2257・MinusOne 2595・PickByType 2688・StartsWith 2693・EndsWith 2757・PartialByKeys 2759・RequiredByKeys 2793・Mutable 2852・OmitByType 2946・ObjectEntries 3062・Shift 3188・Tuple to Nested Object 3192・Reverse 3196・Flip Arguments 3243・FlattenDepth 3326・BEM style string 3376・InorderTraversal 4179・Flip 4182・Fibonacci Sequence 4260・AllCombinations 4425・Greater Than 4471・Zip 4484・IsTuple 4499・Chunk 4518・Fill 4803・Trim Right 5117・Without 5140・Trunc 5153・IndexOf 5310・Join 5317・LastIndexOf 5360・Unique 5821・MapTypes 7544・Construct Tuple 8640・Number Range 8767・Combination 8987・Subsequence 9142・CheckRepeatedChars 9286・FirstUniqueCharIndex 9616・Parse URL Params 9896・GetMiddleElement 9898・Appear only once 9989・Count Element Number To Object 10969・Integer 16259・ToPrimitive 17973・DeepMutable 18142・All 18220・Filter 21104・FindAll 21106・Combination key type 21220・Permutations of Tuple 25170・Replace First 25270・Transpose 26401・JSON Schema to TypeScript 27133・Square 27152・Triangular number 27862・CartesianProduct 27932・MergeAll 27958・CheckRepeatedTuple 28333・Public Type 29650・ExtractToObject 29785・Deep Omit 30301・IsOdd 30430・Tower of hanoi 30958・Pascal's triangle 30970・IsFixedStringLiteralType

48
6・Simple Vue 17・Currying 1 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 112・Capitalize Words 114・CamelCase 147・C-printf Parser 213・Vue Basic Props 223・IsAny 270・Typed Get 300・String to Number 399・Tuple Filter 472・Tuple to Enum Object 545・printf 553・Deep object to unique 651・Length of String 2 730・Union to Tuple 847・String Join 956・DeepPick 1290・Pinia 1383・Camelize 2059・Drop String 2822・Split 2828・ClassPublicKeys 2857・IsRequiredKey 2949・ObjectFromEntries 4037・IsPalindrome 5181・Mutable Keys 5423・Intersection 6141・Binary to Decimal 7258・Object Key Paths 8804・Two Sum 9155・ValidDate 9160・Assign 9384・Maximum 9775・Capitalize Nest Object Keys 13580・Replace Union 14080・FizzBuzz 14188・Run-length encoding 15260・Tree path array 19458・SnakeCase 25747・IsNegativeNumber 28143・OptionalUndefined 30575・BitwiseXOR 32427・Unbox

15
5・Get Readonly Keys 151・Query String Parser 216・Slice 274・Integers Comparator 462・Currying 2 476・Sum 517・Multiply 697・Tag 734・Inclusive Range 741・Sort 869・DistributeUnions 925・Assert Array Index 6228・JSON Parser 7561・Subtract 31447・CountReversePairs

By Tags























































































































#JSON
26401・JSON Schema to TypeScript
#application
12・Chainable Options 8767・Combination 6・Simple Vue 213・Vue Basic Props
#arguments
191・Append Argument 3196・Flip Arguments
#array
14・First of Array 533・Concat 898・Includes 3057・Push 3060・Unshift 15・Last of Array 16・Pop 20・Promise.all 459・Flatten 949・AnyOf 3062・Shift 3243・FlattenDepth 4425・Greater Than 5117・Without 5153・IndexOf 5310・Join 5317・LastIndexOf 5360・Unique 8767・Combination 18142・All 18220・Filter 25270・Transpose 27133・Square 27152・Triangular number 27932・MergeAll 30430・Tower of hanoi 30958・Pascal's triangle 17・Currying 1 2822・Split 5423・Intersection 8804・Two Sum 9160・Assign 9384・Maximum 9775・Capitalize Nest Object Keys 14080・FizzBuzz 32427・Unbox 216・Slice 734・Inclusive Range 741・Sort 925・Assert Array Index
#built-in
4・Pick 7・Readonly 43・Exclude 189・Awaited 3312・Parameters 2・Get Return Type 3・Omit
#conditional type
21220・Permutations of Tuple
#deep
9・Deep Readonly 17973・DeepMutable 553・Deep object to unique 956・DeepPick
#filter
18220・Filter
#function
32427・Unbox
#infer
3312・Parameters 2・Get Return Type 10・Tuple to Union 2070・Drop Char 4260・AllCombinations 9616・Parse URL Params 55・Union to Intersection 57・Get Required 59・Get Optional 399・Tuple Filter 730・Union to Tuple 2059・Drop String 14080・FizzBuzz 734・Inclusive Range 741・Sort
#json
6228・JSON Parser
#map
62・Type Lookup 5821・MapTypes
#math
529・Absolute 2257・MinusOne 25270・Transpose 27133・Square 27152・Triangular number 30958・Pascal's triangle 6141・Binary to Decimal 8804・Two Sum 14080・FizzBuzz 274・Integers Comparator 476・Sum 517・Multiply
#number
25747・IsNegativeNumber
#object
599・Merge 645・Diff 2595・PickByType 2757・PartialByKeys 2759・RequiredByKeys 2852・OmitByType 2946・ObjectEntries 3188・Tuple to Nested Object 3376・InorderTraversal 4179・Flip 5821・MapTypes 27932・MergeAll 29650・ExtractToObject 2949・ObjectFromEntries 9160・Assign 9775・Capitalize Nest Object Keys
#object-keys
7・Readonly 11・Tuple to Object 8・Readonly 2 9・Deep Readonly 527・Append to object 1130・ReplaceKeys 1367・Remove Index Signature 2793・Mutable 28333・Public Type 7258・Object Key Paths 5・Get Readonly Keys
#omit object-keys deep
29785・Deep Omit
#promise
189・Awaited 20・Promise.all 32427・Unbox
#readonly
7・Readonly 8・Readonly 2 9・Deep Readonly 2793・Mutable 17973・DeepMutable
#recursion
21220・Permutations of Tuple 1383・Camelize
#split
2822・Split
#string
531・String to Union 8767・Combination 9142・CheckRepeatedChars 9286・FirstUniqueCharIndex 9616・Parse URL Params 21104・FindAll 30301・IsOdd 2822・Split 4037・IsPalindrome 19458・SnakeCase
#template literal
25747・IsNegativeNumber
#template-literal
106・Trim Left 108・Trim 110・Capitalize 116・Replace 119・ReplaceAll 298・Length of String 529・Absolute 612・KebabCase 1978・Percentage Parser 2070・Drop Char 2688・StartsWith 2693・EndsWith 3326・BEM style string 4260・AllCombinations 4803・Trim Right 5140・Trunc 9616・Parse URL Params 10969・Integer 21104・FindAll 112・Capitalize Words 114・CamelCase 147・C-printf Parser 270・Typed Get 300・String to Number 472・Tuple to Enum Object 545・printf 651・Length of String 2 2059・Drop String 19458・SnakeCase 151・Query String Parser 274・Integers Comparator 476・Sum 517・Multiply 6228・JSON Parser
#this
6・Simple Vue 1290・Pinia
#tuple
18・Length of Tuple 3312・Parameters 10・Tuple to Union 3188・Tuple to Nested Object 3192・Reverse 3326・BEM style string 4471・Zip 4484・IsTuple 4499・Chunk 4518・Fill 7544・Construct Tuple 21220・Permutations of Tuple 27133・Square 27152・Triangular number 399・Tuple Filter 472・Tuple to Enum Object 730・Union to Tuple 2822・Split 32427・Unbox 7561・Subtract
#union
4・Pick 43・Exclude 3・Omit 10・Tuple to Union 62・Type Lookup 296・Permutation 531・String to Union 1042・IsNever 1097・IsUnion 3326・BEM style string 4260・AllCombinations 5117・Without 8987・Subsequence 9142・CheckRepeatedChars 21220・Permutations of Tuple 27862・CartesianProduct 27932・MergeAll 730・Union to Tuple 1383・Camelize 5423・Intersection
#utils
268・If 1042・IsNever 5821・MapTypes 55・Union to Intersection 57・Get Required 59・Get Optional 89・Required Keys 90・Optional Keys 223・IsAny 270・Typed Get 2828・ClassPublicKeys 2857・IsRequiredKey 5181・Mutable Keys 32427・Unbox 5・Get Readonly Keys
#vue
6・Simple Vue 213・Vue Basic Props 1290・Pinia
          

By Plain Text

warm-up (1)

…
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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

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

GitHub logo 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).

Latest Stable Version NPM Downloads NPM Downloads Bundlephobia Size

CI Check License Join the community on Spectrum

Found it useful? Want more updates?

Show your support by giving a ⭐

Buy Me a Coffee Become a Patron

What's new?

🎉 Added new utilities 🎉


Features

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:');
};
Enter fullscreen mode Exit fullscreen mode

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

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

GitHub logo basarat / typescript-book

📚 The definitive guide to TypeScript and possibly the best TypeScript book 📖. Free and Open Source 🌹

YouTube Channel Subscribers

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 stars…
View on GitHub

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.

GitHub logo basarat / typescript-book

📚 The definitive guide to TypeScript and possibly the best TypeScript book 📖. Free and Open Source 🌹

YouTube Channel Subscribers

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 stars…
View on GitHub

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

tRPC Example

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:

This article was originally posted on Medium.

Top comments (0)

Read next

paulsanjay81 profile image

From Slow to Swift: A Developer's Guide to High-Performance Web Design

Sanjay Paul -

harold_defree profile image

Month 1: The Kickoff – Building the Foundation

Harold Defree -

cp_nandani profile image

Building a Better Monorepo with TypeScript, Turborepo, or Nx

Nandani Sharma -

mauricioaires profile image

Angular 18 - Modificadores de acesso

Mauricio Aires -