Temporal
React and TypeScript, v3
4 hours, 22 minutes
CC
Course Description
Write higher-quality code with React and TypeScript. Add critical type safety to hooks and component design systems. Learn patterns for complex state management with reducers and discriminated unions. Validate API schemas at runtime with Zod and create a robust type system that catches errors early and gives your team a better developer experience.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Course Details
Published: November 21, 2025
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
Steve Kinney introduces the course by discussing how TypeScript can enhance development experience, provide type safety, and streamline code documentation, making daily tasks easier. He suggests that students explore concepts like discriminated unions, testing types, and building flexible shared components using TypeScript.
useState Type Safety
Section Duration: 54 minutes
Steve introduces types and discusses the importance of structuring code well to minimize the amount of TypeScript needed. He also demonstrates how giving TypeScript hints about variable types can reduce errors without writing additional code, and highlights the benefits of type safety in the component.
Steve introduces extending interfaces and types in TypeScript, showing how they can be used interchangeably with some nuances. He demonstrates adding fields to an interface, explains differences between extending interfaces and types, and highlights how changes can instantly reveal errors, emphasizing TypeScript’s type safety benefits.
Steve instructs students to explore typing children in React components, guiding them through deducing the correct type using React.ReactNode and helper types like PropsWithChildren. He emphasizes type safety, autocomplete benefits, and how to navigate and inspect types in both React and other libraries to make development more efficient.
Steve discusses managing state in React components, starting with synchronous state management using useState. He explains TypeScript's ability to infer types and how it helps in writing more robust code. Steve also demonstrates incrementing, decrementing, and resetting a counter using useState, highlighting how TypeScript ensures type safety throughout the process.
Steve instructs students to build a simple form in React using useState to manage input values and handle form submission. He demonstrates how TypeScript provides immediate feedback on type issues, explains the difference between string and number inputs, and shows how event types and context help prevent common errors while enabling reusable, type-safe handlers.
Event & Form Types
Section Duration: 35 minutes
Steve demonstrates how to pull out elements and make them reusable, emphasizing the importance of understanding types to navigate complexity. He also instructs students on how to create helper types and navigate type errors effectively in TypeScript.
Steve instructs students to refactor a React form into a separate component, managing its own draft state and handling submission via a typed onSubmit prop. He demonstrates how TypeScript and React types provide autocomplete and type safety, explains how to work with form events, and shows strategies for passing only the necessary handlers while keeping the component reusable and maintainable.
Steve introduces the concept of mirroring HTML props to simplify the process of building components that wrap HTML elements. He explains how to extend component props without ref to include all attributes of a form, demonstrating how to avoid implementing each one individually. Steve then instructs the students to apply the same technique to the button element, emphasizing the efficiency gained by creating components as a superset of HTML attributes.
Steve instructs students to transform a basic button into a fully typed, reusable design system component. He shows how to extend HTML props, add custom properties like layout, and use TypeScript for autocomplete, type safety, and implicit documentation, creating functional, self-documenting components.
State Management
Section Duration: 47 minutes
Steve discusses the use of reducers with TypeScript and demonstrates how to utilize useState with type inference and explains the concept of unions to allow for multiple types within a single state. Steve also showcases the use of template strings as types to enforce specific shapes of data, highlighting the importance of type constraints for ensuring code safety.
Steve discusses reducers and discriminated unions, discussing the current state of the counter reducer and the need to eliminate the use of 'any' in actions. He demonstrates how to refactor the counter reducer and integrate it into a user reducer, explaining the importance of defining the shape of actions to avoid runtime errors and advocating for the use of 'unknown' for stricter type checking.
Steve introduces discriminated unions by creating interfaces for different actions like increment, decrement, and set count. He also explains how TypeScript narrows down the possible types based on the action taken, ensuring that only valid actions are handled in the reducer function.
Steve demonstrates refactoring counter actions and simplify dispatching actions. He demonstrates the process of updating the code to handle different actions and payloads, ensuring type safety and error prevention.
Async Data and Suspense
Section Duration: 37 minutes
Steve demonstrates how to use TypeScript and React to handle asynchronous values by setting initial states and properly typing return values. Steve also discusses the importance of avoiding the usage of 'any' type in TypeScript and guides students through updating their code to ensure type safety by specifying return types for functions.
Steve explains how relying solely on TypeScript's type safety can lead to unexpected issues when dealing with data from outside sources. He demonstrates the using Zod to create schemas that help verify the type of incoming data, ensuring a more robust and reliable codebase.
Steve explains how Zod schemas provide both compile-time and runtime safety for data types, ensuring that the data matches the expected type. Steve demonstrates how Zod schemas can be used for form validation, API requests, and local storage, emphasizing the importance of enforcing data integrity when interacting with external sources.
Steve introduces various advanced TypeScript concepts to the students, explaining how to manipulate types using Zod schemas. He demonstrates how to chain optional types, validate data structures, and coerce values to ensure they match the expected types. Steve also discusses using Zod for form validation, coercion, defaults, and type guards, emphasizing the importance of ensuring data integrity throughout the codebase.
Steve explains how using React suspense and useHook in React 19 to handle promises, ensuring that components only render once the promises have resolved, providing a seamless and type-safe solution.
Context API & Generics
Section Duration: 1 hour, 14 minutes
Steve introduces the Context API in React and explains the challenge of defining context and types before having all the necessary information and discusses different approaches to handle this issue. Steve also demonstrates creating a custom context wrapper to ensure type safety and avoid potential errors in the application.
Steve introduces generics by explaining that they act as placeholders for types in functions, allowing for flexibility in defining linked lists with consistent value types. He demonstrates how generics can be used in functions like tap, where the return value is based on the input type, showcasing their utility in making types more flexible.
Steve introduces various utility functions and discusses their practical applications in TypeScript. He also explains how these functions can be used to extract specific prop types from components, especially useful when working with third-party libraries lacking proper type definitions.
Steve introduces a library called TSD, explaining how it can be used to test out types in TypeScript. He demonstrates how to use the library to ensure the correctness of utility types by running Vite tests. Steve then discusses the concept of making certain keys optional in TypeScript, showing how to create custom types like partial and omit to control the structure of objects.
Steve discusses class variance authority, explaining how it simplifies creating variants for components across different frameworks. He demonstrates how to define button variants and discusses the utility type called variant props for managing design system supported variants. Steve then walks through the concept of polymorphic components, showcasing how to create flexible components like buttons and containers that can render as different semantic HTML elements based on specified props.
Steve answers student questions regarding how to build flexible, accessible components using the as pattern, leveraging TypeScript and utility types to infer props from design system variants, and best practices for maintaining consistency across inputs, text areas, and other reusable UI elements.
Wrapping Up
Section Duration: 1 minute
Steve wraps up the course by encouraging students to recognize opportunities to apply advanced TypeScript and utility type techniques, emphasizing how to derive props and solve type challenges in real-world libraries, and that these tools are approachable and ready to use when the right problem arises.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops