Professional TypeScript Training

Advanced React with TypeScript
Type-Checking React Props With Discriminated Unions
Using Discriminated Unions to Create Flexible Component Props in React
Destructuring Discriminated Unions in React Props
Destructuring vs Accessing Discriminated Union Props
Adding a Prop Required Across Discriminated Union Variants
Resolving Discriminated Union Types with an Intersection
Differentiating Props With a Boolean Discriminator
Discriminated Unions for Conditional Props in TypeScript
Using the Record Type to Represent an Empty Object
Conditionally Require Props With Discriminated Unions
Allow Optional Props Using A Discriminated Union Branch With Undefined Types
Finding a Better Type Definition For A Mapped Component
What’s The Difference Between React.ReactNode and React.FC_
Syncing Types without Manual Updates
The keyof typeof Pattern
The Partial Autocompletion Quirk
Solving Partial Autocompletion
Extracting Keys and Values from a Type
Using as const and Indexed Access Types to Extract Keys and Values from a Type
Ensuring Correct Inference for Prop Types
Comparing as const as , and satisfies
Inference from a Single Source of Truth
Understanding and Implementing Dynamic Props Mapping in React
DRY out Code with Generic Type Helpers
Implement a Generic Type Helper
Refactoring to a Type Helper
Creating an _All or Nothing_ Type Helper for React props
Constraining a Type Helper to Accept Specific Values
Add Generic Constraints to Type Helpers
Adding Type Arguments to a Hook
Adding Type Arguments to a Function
Wrapping a Generic Function Inside of Another
Type Inference with Generic Functions in TypeScript
Applying Generics to Components
Add a Generic Type Argument to a Props Interface
Generics in Class Components
Converting a Class Component to be Generic
Passing Type Arguments To Components
Use the Angle Brackets Syntax to Pass a type to a Component
Generic Inference through Multiple Type Helpers
Adding Generic Type Arguments to Type Helpers
Build a useMutation hook
Refactoring a Generic Hook for Best Inference
Generics vs Discriminated Unions
Refactoring from Generics to a Discriminated Union
Fixing Type Inference in a Custom React Hook
Use ‘as const’ to Infer a Tuple return type
Strongly Typing React Context
Using Type Arguments to Create A Strongly Typed Context
Using TypeScript to Manage Complex State
Handling Complex State Management with TypeScript Unions
Using Discriminated Unions in useState
Handling Different State Values with Discriminated Unions
Discriminated Tuples in Custom Hooks
Improved Type Safety with Discriminated Tuples in TypeScript
Use Function Overloads for Better Type Inference
Overloading Functions in TypeScript
Mimicking useState Behavior with Function Overloads
Wrapping useState Functionality with Function Overloads
Currying Hooks
Inferring Type Arguments in Curried Hooks
Exploring the React Namespace
Understanding the React Namespace
JSX.Element, React.ReactElement, and React.ReactNode
Understanding React’s JSX Types
Strongly Typing Children in React
Strongly Typing Children in React Doesn’t Work
Exploring JSX.IntrinsicElements
Understand the Structure of React’s JSX.IntrinsicElements
Understanding React’s ElementType and ComponentType
Appending to React’s Global Namespace
Declaration Merging and the Global Namespace
Modify Existing Interfaces in the Global React Namespace
Extend the Global React namespace with Declaration Merging in TypeScript
Add a New Global Element in TypeScript
Extend JSX.IntrinsicElements with Declaration Merging
Exploring HTML Attribute and Element Types
Navigating HTMLAttribute types
Add Attributes to All Elements with Declaration Merging
Updating the Global Namespace for an Additional Attribute
Strongly Typed Lazy Loading
Strongly Typing Lazy Loaded Components with Generics
Render Props
Typing the Children Prop for Render Props
Records of Components with the Same Props
Infer Shared Props for Multiple Components
The Problem With forwardRef
Fixing forwardRef Locally
Override forwardRef’s Behavior Locally
Typing Higher Order Components
Implementing a Generic Higher Order Component
Using Higher Order Components with Generic Components
Add Generic Component Support to a Higher Order Component
The as Prop in React
Approaching the as Prop with IIMTs and Generics
The as Prop with Custom Components
Type Helpers for React Components
The as Prop with Defaults
Two Approaches to Defaults for the as Prop
The a Prop with forwardRef
Distributive Omit with the as Prop
React Hook Form’s Types
Understanding useForm Type Declarations in React Hook Form
Wrapping the useForm Hook from React Hook Form
Creating a Generic Wrapper for useForm
React-Select’s Generics
Capture and Extend React Select’s Type Definitions
Understanding React Query’s Overloads
Targeting Overloads with useQuery
Wrapping useQuery
Handling Type Arguments in a Custom Query Hook

Advanced TypeScript Patterns
Advanced Workshop Welcome
What is a Branded Type?
Form Validation with Branded Types
Assigning Branded Types to Values
Using Branded Types as Entity IdТs
Add Branded Types to Functions and Models
Creating Reusable Validity Checks with Branded Types and Type Helpers
Combine Type Helpers with Branded Types
Creating Validation Boundaries with Branded Types
Using Branded Types to Validate Code Logic
Using Index Signatures with Branded Types
Indexing an Object with Branded Types
TypeScript’s Global Scope
Add a Function to the Global Scope
Add Functionality to Existing Global Interfaces
Use Declaration Merging to Add Functionality to the Global Window
Add Types to Properties of Global Namespaced Interfaces
Typing process.env in the NodeJS Namespace
Colocating Types for Global Interfaces
Solving the Colocation Problem with Globals
Filtering with Type Predicates
Use a Type Predicate to Filter Types
Checking Types with Assertion Functions
Ensure Valid Types with an Assertion Function
Avoiding TypeScript’s Most Confusing Error
Declare Assertion Functions Properly to Avoid Confusing Errors
Combining Type Predicates with Generics
Filtering with Type Predicates and Generics
Combining Brands and Type Predicates
Checking for Validity with Brands and Type Predicates
Combining Brands with Assertion Functions
Validate Types with Brands and Assertions
Classes as Types and Values
Using Classes in TypeScript
Dive into Classes with Type Predicates
Simplifying TypeScript with Type Predicates
Assertion Functions and Classes
Leverage Assertion Functions for Better Inference in Classes
Class Implementation Following the Builder Pattern
TRPC’s Creator on the Builder Pattern
Create a Type Safe Map with the Builder Pattern
Getters and Setters in the Builder Pattern
Debugging the Builder Pattern
Default Generics in the Builder Pattern
Building Chainable Middleware with the Builder Pattern
The Power of Generics and the Builder Pattern
Subclassing in Zod
Where Do External Types Come From?
Extract Types to Extend an External Library
Retrieve Function Parameters from an External Library
Navigating Lodash’s Type Definitions
Finding Proper Type Arguments and Generics with Lodash
Passing Type Arguments with Lodash
Navigating Express’s Type Definitions
Add Query Params to an Express Request
Make an Express Request Function Generic
Browsing Zod’s Types
Create a Runtime and Type Safe Function with Generics and Zod
Infer Runtime Arguments from a Zod Schema
Override External Library Types
Create a Declarations File to Override Types
Identity Functions as an Alternative to the `as const`
Narrowing in an Identity Function for Better Inference
Add Constraints to an Identity Function
Constraining and Narrowing an Identity Function
Specifying Where Inference Should Not Happen
Fix Inference Issues with F.NoInfer
Find the Generic Flow of an Identity Function
Avoid Duplicate Code in an Identity Function with Generics
Reverse Mapped Types
Inference Inception in an Identity Function
Merge Dynamic Objects with Global Objects
Add Objects to the Global Scope Dynamically
Narrowing with an Array
Narrowing with Arrays and Generics
Create a Type-Safe Request Handler with Zod and Express
Type-Safe Request Handlers with Zod and Express
Building a Dynamic Reducer
Dynamic Reducer with Generic Types
Custom JSX Elements
Adding Custom Elements to JSX.IntrinsicElements

TypeScript Expert Interviews
Tejas Kumar Discusses How to Build Bulletproof Apps with TypeScript
Adopting TypeScript at Netflix with Shaundai Person
Mark Erikson on Avoiding Breaking Changes and Improving Maintainability with TypeScript
The TypeScript Culture at Formidable with Kadi Kraman
Colin McDonnell Talks About The Design Choices Behind Zod
TypeScript’s History and Growth with Daniel Rosenwasser
Priscila Oliveira on Sentry’s TypeScript Migration
Gabriel Vergnaud on Type and Value Level Mapping in TypeScript
Building Familiarity with TypeScript’s Syntax and Functionality with Orta Therox
A Look at tRPC with its Creator Alex _KATT_ Johansson
Exploring Generics in React Query with Tanner Linsley

TypeScriptGenerics
TypeScript Generics Workshop Welcome
Typing Functions with Generics
Replace the unknown Type with a Generic
Restricting Generic Argument Types
Add Constraints to a Generic
Typing Independent Parameters
Use Multiple Generics with a Function
Approaches for Typing Object Parameters
Approaches for Typing Object Parameters: Solution
Generic Functions in Excalidraw
Generics in Classes
Add Types to a Class
Generic Mapper Function
Add Object Property Constraints to a Generic
The Importance of Generics in TypeScript
Add Type Parameters to a Function
Pass Type Arguments to a Function
Defaults in Type Parameters
Specify a Default Value
Infer Types from Type Arguments
Infer from the Type Arguments of a Class
Strongly Type a Reduce Function
Pass Type Arguments to a Reduce Function
Avoid any Types with Generics
Use Generics to Type a Fetch Request
Passing Type Arguments in cal.com
Improving Code Maintainability
Generics at Different Levels
Represent Generics at the Lowest Level
Typed Object Keys
Two Approaches for Typing Object Keys
Make a Generic Wrapper for a Function
Constrain a Type Argument to a Function
Understand Literal Inference in Generics
Understand Generic Inference When Using Objects as Arguments
Inferring Literal Types from any Basic Type
Accepting Multiple Literal Types
Infer the Type of an Array Member
Constrain to the Array Member, Not the Array
Generics in a Class Names Creator
Two Approaches to Working with Class Names
Generics in React Query
Generics with Conditional Types
Ensure Runtime Level & Type Level Safety with Conditional Types
Fixing Errors in Generic Functions
Fixing the “Not Assignable” Error
Generic Function Currying
Fix Type Inference in Curried Functions
Generic Interfaces with Functions
Understanding Generics at Different Levels of Functions
Spotting Useless Generics
Refactoring Functions with Unnecessary Type Arguments
Spotting Missing Generics
Improving Type Inference with Additional Generics
How tRPC Handles Inheritable Generics
Refactoring Generics for a Cleaner API
Create a Factory Function to Apply Type Arguments to All Child Functions
The Partial Inference Problem
A Workaround for The Lack of Partial Inference
What is a Function Overload?
Understanding Function Overloads
Function Overloads vs. Conditional Types
Match Return Types with Function Overloads
Debugging Overloaded Functions
Specifying Types for an Overloaded Function
Function Overloads vs. Union Types
When to Use Overloads and Unions
Generics in Function Overloads
Typing Different Function Use Cases
Solving an Inference Mystery
The Inference Mystery Solved
Use Function Overloads to Infer Initial Data
Split Functions Into Two Different Call Signatures
The “Instantiated with Subtype” Error
Handling Default Arguments with Function Overloads
Make An Infinite Scroll Function Generic with Correct Type Inference
Introduce a Type Parameter to Ensure Type Consistency
Create a Function with a Dynamic Number of Arguments
Use a Tuple to Represent a Dynamic Number of Arguments
Create a Pick Function
Extracting Object Properties with Reduce and Generics
Create a Form Validation Library
Add Strong Typing and Proper Error Handling to a Form Validator
Improve a Fetch Function to Handle Missing Type Arguments
Modify a Generic Type Default for Improved Error Messages
Typing a Function Composition with Overloads and Generics
Using Overloads and Generics to Type Function Composition
Build an Internationalization Library
Extract Types from Strings for an Internationalization Library

TypeTransformations
Type Transformations Workshop Welcome: Explainer
Get the Return Type of a Function
Use a Utility Type to Extract a FunctionТs Return Type
Typeof Keyword, and Type Level
Extract Function Parameters Into A Type
Use a Utility Type to Extract Function Parameters
Extract The Awaited Result of a Promise
Use Utility Types To Extract a Promise’s Result
Create a Union Type From an ObjectТs Keys
Create Unions from Objects Using Two Operators
Understand The Terminology Around Unions
Union Terminology Examples
Extracting Members of a Discriminated Union
Extract From A Union Using a Utility Type
Excluding Parts of a Discriminated Union
Use a Utility Type to Remove a Single Member of a Union
The Power of Union Types in TypeScript: Explainer
Extract Object Properties into Individual Types
Use Indexed Access Types to Extract Object Properties
Extract the Discriminator from a Discriminated Union
Simple Syntax Used to Access Parts of a Discriminated Union
Resolve an ObjectТs Values as Literal Types
The Annotation Used to Infer an Object’s Values as Literal Types
Create a Union From an Object’s Values
Extract Specific Members From A Union with Indexed Access
Get All of an ObjectТs Values
Use Two Operators With Indexed Access to Get All of an Object’s Values
Create Unions out of Array Values
Methods Used to Create Unions out of Array Values
Only Allow Specified String Patterns
Template Literal with Strings
Extract Union Strings Matching a Pattern
Extracting String Pattern Matches with Template Literals
Create a Union of Strings with All Possible Permutations of Two Unions
Passing Unions Into Template Literals
Splitting A String into a Tuple
Using S From ts-toolbelt to Split a String Into a Tuple
Create an Object Whose Keys Are Derived From a Union
Use a Utility Type to Create An Object From A Union
Transform String Literals To Uppercase
Manipulate String Literals Using Type Helpers
Template Literals in Mattermost: Explainer
Introducing Type Helpers
Create Functions that Return Types
Creating a Maybe Type Helper
The Unconstrained Maybe Type Helper
Ensure Type Safety in a Type Helper
Use Constraints to Limit Type Parameters
Create a Reusable Type Helper
Add Support for Multiple Types in a Type Helper
Optional Type Parameters in Type Helpers
Set a Default Type Value in a Type Helper
Functions as Constraints for Type Helpers
Support Function Type Constraints with Variable Arguments
Constraining Types for Anything but null or undefined
Exclude null and undefined from the Maybe Type
Constraining Type Helpers to Non-Empty Arrays
Enforce a Minimum Array Length in a Type Helper
Explainer: Type Helpers in Redux
Add Conditional Logic to a Type Helper
Compare and Return Values with Extends and the Ternary Operator
Refine Conditional Logic in a Type Helper
Prevent Unwanted Type Scenarios from Happening
How TypeScript Added Conditional Types: Explainer
Introducing infer for Conditional Logic
Infer Elements Inside a Conditional with Infer
Extract Type Arguments to Another Type Helper
Use infer with Generics to Extract Types from Arguments
Extract Parts of a String with a Template Literal
Pattern Matching on Template Literals with Infer
Template Literal Types Were Nearly Regexes: Explainer
Extract the Result of an Async Function
Optionally Infer the Return Type of a Function
Extract the Result From Several Possible Function Shapes
Two Methods for Extracting the Result of Multiple Possible Functions
Distributivity in Conditional Types
Using Generic Context to Avoid Distributive Conditional Types
Map Over a Union to Create an Object
Use Mapped Types to Create an Object from a Union
Mapped Types with Objects
Map Over the Keys of an Object
Transforming Object Keys in Mapped Types
Remapping Object Keys in a Mapped Type
How Excalidraw uses Mapped Types to Save Lines of Code: Explainer
Conditionally Extract Properties from Object
Selective Remapping with Conditional Types and Template Literals
Map a Discriminated Union to an Object
Two Techniques for Mapping a Discriminated Union to an Object
Map an Object to a Union of Tuples
Create a Union of Tuples by Reindexing a Mapped Type
Transform an Object into a Union of Template Literals
Map an Object to a Union of Template Literals
Transform a Discriminated Union into a Union
Iteratively Map and Remap to Transform Types
Transform Path Parameters from Strings to Objects
Extract from String with Mapped Types, Template Literals, and infer.
Transform an Object into a Discriminated Union
Create a Discriminated Union through Intermediary Transformations
Transform a Discriminated Union with Unique Values to an Object
Create an Object using Mapped Types, Conditional Types, and TypeScript Keywords
Construct a Deep Partial of an Object
Use Recursion and Mapped Types to Create a Type Helper

updates
Add Constraints to an Identity Function
Constraining and Narrowing an Identity Function
Identity Functions as an Alternative to the ‘as const’
Using const type parameters For Better Inference