Total TypeScript Core Volume is a set of three full TypeScript workshops for the intermediate to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle also includes the Advanced React with TypeScript workshop that will give you expert-level knowledge for typing your React apps.

The Advanced React Workshop is a **pre-release** product. It is almost full recorded and will be released fully in a month or so.

Understanding how to transform types to other types is crucial because many problems in TypeScript come down to how to get one type to become another.

Type Transformations Workshop Welcome

Get the Return Type of a Function

Gabriel Vergnaud explains the typeof keyword and the type/value level.

Typeof Keyword, and Type Level

TypeScript gives us a powerful utility function that can extract the parameters from a function.

Extract Function Parameters Into A Type

TypeScript can access the return value from within a Promise with a type helper.

It’s quite useful to be able to extract the awaited result of a Promise.

Extract The Awaited Result of a Promise

With help from one of TypeScript’s most useful utility types, we can create a union type directly by extracting keys off of a runtime construct.

Create a Union Type From an Object’s Keys

Creating types from types is one of the most powerful features of TypeScript

Creating Types from Types

The 'typeof' operator transforms a runtime construct into a type.

The 'typeof' Operator

The 'keyof' operator can be used to extract the keys of an object type.

The 'keyof' Operator

Built-in TypeScript utilities that assist with transforming types.

Utility Types

This lesson from the Beginner's Tutorial is a refresher on the Promise type.

Typing Promises and Async Requests

Inference Basics

It’s important to understand the terminology around unions. 

Learn three different types of union in this example: enums, unions, and discriminated unions.

Understand The Terminology Around Unions

Often we’ll need just a part of a union type. 

TypeScript has a utility type that can directly grab specific members of a discriminated union.

Extracting Members of a Discriminated Union

Sometimes, you need a union with just a small part omitted.

TypeScript has a useful utility type that can extract all but a specified part of a union!

Excluding Parts of a Discriminated Union

Discover the power of union types in TypeScript and how they handle different possibilities over time, creating a multiverse in your code.

The Power of Union Types in TypeScript

TypeScript gives you a way to a look up a type’s properties individually.

Extract Object Properties into Individual Types

At times, you may need to access a single key from each member of a discriminated union. TypeScript makes this much easier than it may seem!

Extract the Discriminator from a Discriminated Union

TypeScript gives us an annotation that infers an object / array’s values as literals and makes them read-only.

Resolve an Object’s Values as Literal Types

TypeScript gives you a couple of different ways to pass a union to extract multiple members of another union.

Create a Union From an Object's Values

You’ll often need to get all of an object’s values. 

There is an operator in TypeScript that gives us an elegant solution to this problem.

Get All of an Object’s Values

We can also create unions out of arrays. 

There are ways in TypeScript to make a union from the entire array, or just some specified elements.

Create Unions out of Array Values

Union types help describe different possibilities for what a type can be.

Union Types

Discriminated unions are unions which contain a single key (the discriminator) to tell them apart.

Discriminated Unions

'as const' lets you specify a type as immutable and readonly, meaning its values get inferred as their literal type.

'as const' Operator

Indexed access types let you access a member of a type: an object value, array member, or class method.

Indexed Access Types

Unions and Indexing

Template literals allow us to be very specific with the types of strings we use throughout our applications.

Only Allow Specified String Patterns

Sometimes you’ll want to create a union based on strings that match a pattern. Template literals can combine with other TS features to make this a breeze!

Extract Union Strings Matching a Pattern

Template literals in TypeScript have some very interesting properties. Here we’ll examine how they interact with unions.

Create a Union of Strings with All Possible Permutations of Two Unions

TypeScript allows for strings to be split on the type level. This is rather easy to accomplish using a certain method from `ts-toolbelt`.

Splitting A String into a Tuple

Create an object whose keys are derived from a union of template literals with help from a utility type that just receives the union, and the desired type.

Create an Object Whose Keys Are Derived From a Union

TypeScript has a number of useful type helpers that can manipulate string literals in various ways. 

Transform String Literals To Uppercase

Examine real-world use cases for template literals by going through Mattermost’s source code.

Template Literals in Mattermost

Template Literal types let you express dynamic strings in TypeScript,

Template Literal Types

Template Literals

Type Helpers allow us to create functions that can return other types. They are the basis for many of TypeScript’s core features.

Introducing Type Helpers

A Maybe type helper can help you safely handle missing values in your code.

Creating a Maybe Type Helper

Adding constraints to a type helper ensures type safety by limiting the types that can be passed as arguments to the type helper.

Ensure Type Safety in a Type Helper

Type helpers support multiple type arguments, and it’s easier than you might think.

Create a Reusable Type Helper

Type Helpers support default values, allowing for arguments to be optional.

Optional Type Parameters in Type Helpers

Functions can be used as constraints for Type Helpers, but not all functions have the same shape for their arguments.

Functions as Constraints for Type Helpers

Leverage an essential TypeScript concept to constrain types to anything but null or undefined.

Constraining Types for Anything but null or undefined

Using TypeScript’s built-in types allows you to add constraints when working with arrays.

Constraining Type Helpers to Non-Empty Arrays

Explainer: Type Helpers in Redux

Type Helpers

Conditional types are powerful, and are where TypeScript becomes less about "annotations you add to your JS" and more like its own meta programming language.

Add Conditional Logic to a Type Helper

We need to handle cases where something undesirable is passed in to a conditional. We’ll do this with a union, nested ternaries, and a special type.

Refine Conditional Logic in a Type Helper

Daniel Rosenwasser discusses how new features are added to TypeScript, using the example of conditional types inspired by Knockout.js.

How TypeScript Added Conditional Types

If you find yourself in some complex conditional logic, harness the power of infer.

Introducing infer for Conditional Logic

infer can extract out all the members of the type arguments without needing to dive deep into the element itself to understand its structure.

Extract Type Arguments to Another Type Helper

In this exercise, you’ll use what you know about infer and template literals to get only a person’s last name from their full name.

Extract Parts of a String with a Template Literal

The benefits of using template literal types for expressing string requirements over regexes, as explained by TypeScript's program manager.

Template Literal Types Were Nearly Regexes

You may want to extract from a library function's return, but don't want to declare a type annotation for it. This is solved with infer and a conditional type.

Extract the Result of an Async Function

Long ternary statements become difficult to read. Luckily, there’s an alternative way to write longer conditionals with some help from a built-in type.

Extract the Result From Several Possible Function Shapes

There’s a gotcha when working with union and conditional types known as the Distributive Conditional Type. In this exercise, we'll find workarounds.

Distributivity in Conditional Types

Conditional Types and Infer

TypeScript provides a powerful type useful for turning union types into objects.

Map Over a Union to Create an Object

Mapped types aren’t just for unions. They can also be used on objects.

Mapped Types with Objects

It can be useful to transform an object’s keys while you’re mapping them. You can do this in a mapped type without changing your original object!

Transforming Object Keys in Mapped Types

The ImportedDataState type in Excalidraw’s codebase is a great example of using a mapped types to support legacy types.

How Excalidraw uses Mapped Types to Save Lines of Code

You can selectively remap an object’s properties by pattern matching against a template literal.

Conditionally Extract Properties from Object

TypeScript allows you to create new objects by mapping over discriminated unions to pull out only the data you need.

Map a Discriminated Union to an Object

Objects can be mapped into unions of tuples. This is useful for when you want to guarantee values and their order.

Map an Object to a Union of Tuples

Mapped types allow you to do any type transformation you want. This time, we’ll transform an object to a union of template literals.

Transform an Object into a Union of Template Literals

Use the key remapping technique to transform a discriminated union into a union

Transform a Discriminated Union into a Union

Mapped Types in TypeScript let you dynamically create objects from other types.

Mapped Types

Combine techniques from previous exercises to extract dynamic parameters from a path.

Transform Path Parameters from Strings to Objects

Discriminated unions are useful when dealing with form handling. With a few transformation steps, we can create one from an existing object.

Transform an Object into a Discriminated Union

Following an earlier challenge, here we revisit transforming a discriminated union with unique values into an object.

Transform a Discriminated Union with Unique Values to an Object

Partials allow you to construct types where some higher-level properties are optional. DeepPartial goes further by allowing all properties to be optional.

Construct a Deep Partial of an Object

Challenges

Type Transformations

By the end of this workshop, you'll be a master of generics and have a good understanding of function overloads, inference, and all the tricks you need.

TypeScript Generics Workshop Welcome

Generics allow you to ensure that your functions are properly typed, often without having to specify the return type.

Typing Functions with Generics

It is possible to specify what can be passed into a generic while still allowing its literal type to be inferred.

Restricting Generic Argument Types

Types passed into a function can be used to infer types in an object that gets returned.

Typing Independent Parameters

Generics work really well with Type Helpers. One use case is typing properties that are passed in as part of an object.

Approaches for Typing Object Parameters

In Excalidraw's codebase, we'll examine a sum function that accepts an array and a mapper function used to reduce values down to a number.

Generic Functions in Excalidraw

Here you will learn how generics can be used to allow you to pass in typed properties of any shape when instantiating a class.

Generics in Classes

With generics you can specify that certain properties are present and of a specific type while also allowing for any additional properties to be present.

Generic Mapper Function

Orta Therox, an ex-TypeScript team member, says generics are crucial to avoid lengthy types in its structural type system, unlike Objective-C's nominal types.

The Importance of Generics in TypeScript

The TypeScript docs for generics have info and examples on creating and using generic types.

Generics section of the TypeScript docs

Learn more about the unknown type in the TypeScript docs

The unknown Type from the TypeScript Docs

The "Generic Constraints" page from the TypeScript documentation provides detailed information on how to define constraints for generic types

Generic Constraints from the TypeScript Docs

The Classes section of the TypeScript docs provides detailed information on how to use generics with classes, including examples and best practices.

Classes section of the TypeScript docs

See a real-world example of how generics are used in a software project.

gesture.ts from the Excalidraw GitHub Repo

A refresher from the Type Transformations workshop lesson, "Support Function Type Constraints with Variable Arguments", showing extends in action.

Total TypeScript - The Extends Keyword in action

Intro to Generics

Many of TypeScript's built-in types support type arguments. With help from generics you can specify the types that a function accepts and returns.

Add Type Parameters to a Function

By adding a default generic, you ensure that your functions remain type safe. The generic context follows a similar pattern to the type helper context.

Defaults in Type Parameters

Generic slots can be added to the type arguments of classes or type helpers.

Infer Types from Type Arguments

Generics are captured at different levels based on where they're called. Here we'll examine how generics are used in a reduce function.

Strongly Type a Reduce Function

Not all libraries support generics by default. Fortunately, there are some techniques for working around this with help from generics.

Avoid any Types with Generics

The repo for cal.com contains several examples of how passing type arguments allows for overriding the weaknesses of external libraries.

Passing Type Arguments in cal.com

Improving Code Maintainability

MDN reference for the Set object in JavaScript, which is a collection of unique values.

JavaScript Set from MDN

Documentation for the Record utility type in the TypeScript Handbook.

Record Types from the TypesScript docs

TypeScript's reduce method signature on GitHub in the type declaration file used as a reference for JavaScript's built-in objects available in TypeScript.

TypeScript's reduce type signature from its source on GitHub

TypeScript's DOM lib provides the types for interacting with the Document Object Model. 

fetch, Response, and Body from TypeScript's DOM lib source on GitHub

Documentation for the Awaited utility type in the TypeScript Handbook. This type can be used to extract the type of a Promise or Async value.

Awaited Utility Type from the TypeScript docs

A TypeScript class for interacting with the SendGrid email service in the cal.com repository.

Sengrid.ts from the Cal.com Github Repo

Passing Type Arguments

The approach you take to generics impacts how far you have to drill into objects, and the readability of your code on the whole.

Generics at Different Levels

This section is all about figuring out how best to represent these generics in terms of the things that are being passed into functions.

Typed Object Keys

Generics allow you to type arguments for functions that are passed to other functions.

Become a TypeScript Wizard