This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Table of Contents
Introduction
The Fundamentals
Local Setup
Steve demonstrates how to set up a local version of the course exercises to allow exercise completion without accessing individual code sandboxes.
propTypes
Steve discusses using propTypes in TypeScript to set the intentions of a prop. Setting a propType will let TypeScript know what type to expect when a prop is in use. If the propType does not match TypeScript will throw an error.
Common Types
Steve discusses the common prop types found in TypeScript including primitives, defining arrays, objects, IDs, keys, methods, and optional props. How to create a custom type is also covered in this segment.
Types vs Interfaces
Steve discusses similarities and differences between types and interfaces and answers a student's question regarding how to handle things that collect additional arguments in an array. A chart comparing the two is provided on the course website and in this segment.
Typing Children Exercise
Students are instructed to correctly type children without using the any type.
Typing Children Solution
Steve livecodes the solution to the Typing Children Exercise. A students question regarding if there is a difference between using React.ReactNode versus React.ReactChild or React.Children is also covered in this segment.
Typing CSS Styling
Steve demonstrates TypeScript type checking in regards to CSS styling and how to pass in CSS styles as a prop. What happens when setting an optional property with a default is also demonstrated in this segment.
useState Hook
Steve demonstrates how to toggle a blur className using the useState hook. The useState hook in TypeScript will check the current state of the variable and change it to something new with the same type.
Interacting with Components
Set State Without a Default Value
Steve discusses how to explicitly specify the type in useState without the TypeScript type checker throwing an error.
useEffect TypeScript Exercise
Students are instructed to use the error message given by TypeScript to correct the problem within the example's code.
useEffect TypeScript Solution
Steve live codes the solution to the useEffect TypeScript exercise.
Typing Class-Based Components
Steve discusses how to implement TypeScript in class-based components using a counter example. Two types are being passed into React.Component: the expected type for the prop received and the type of the state.
Typing Hooks & Component Exercise
Students are instructed to add events to the hook-based example while adhering to TypeScript type checking.
Typing Hooks & Component Solution
Steve live codes the solution to the Typing Hooks and Component exercise.
Asynchronous Events Exercise
Students are instructed to wire up the forms and events with some asynchronous data to load the requested number of dog facts.
Asynchronous Events Solution
Steve live codes the solution to the Asynchronous Events exercise.
Working with Reducers
Typing Reducers
Steve demonstrates how to implement and type useReducer to simplify determining state when multiple states are in use. Implementing TypeScript into the pizza calculator involves removing any declarations, setting the state, updating the actions, reducer, and Calculator component, and converting the output. A student's question regarding if a snowball effect could be encountered when changing the shape of a piece of data is also covered in this segment.
Reducers Exercise
Students are instructed to add a reducer instead of using state in the counter exercise.
Reducers Solution
Steve live codes the solution to the Reducers exercise. A student's question regarding whether an enum could be used is also covered in this segment.
Adding Counter Action
Steve demonstrates how to add a BasicCounterAction to the previous counter example that handles the increment and decrement functions. Implementing this function will satisfy the TypeScript type checker by setting the different types of actions being performed.
Color & Context
Context API
Steve demonstrates how to move state management to the Context API using a ThemeContext to create a light mode and dark mode for the application. When React renders a component that subscribes to the created Context object it will read the current context value from the closest matching Provider above it in the tree. A student's questions regarding what keys there are other than strings is also covered in this segment.
State Management with Context
Steve demonstrates how to move the state management into a Context and resolve some of the errors thrown by TypeScript. This example uses an interface as opposed to types to illustrate the different syntax.
Reusable Props Interface
Steve live codes refactoring the color inputs to appease TypeScript. The hard coded input will be swapped out for what the user passes in and avoid errors with TypeScript because the input will conform to the type required.
Just Enough TypeScript
Generics
Steve discusses how using generics in TypeScript will allow more flexibility with assigning types in the type system. Generics can be used to assign variables to an object's type.
Generics Exercise
Students are instructed to take a basic version of the tap utility method and implement it with the types.
Generics Solution
Steve live codes the solution to the Generics exercise.
Utility Types in React
Steve discusses some of the utility types built into React and TypeScript including keyof, unions, intersections, conditionals, exclude, extract, string manipulation, objects, pick, omit, React.HTMLProps, and React.ComponentProps.
Refactoring with Utility Types
Steve walks through refactoring the character cards from earlier in the course to use utility types. Some of the utility types used in this segment are keyof, Capitalize, and Exclude.
Utility Types Exercise
Students are instructed to make a type that excludes accountId and have the Friend component base it's props off of the currentUser component.
Utility Types Solution
Steve live codes the solution to the Utility Types exercise.
Template Literals
Steve discusses the new feature in TypeScript 4.2 of using template literals with types. Using template literals will allow TypeScript to generate all of the composite types without having to individually define them. A challenge exercise of creating an alignment type using template literals is also provided in this segment.
Template Literals Continued
Steve live codes creating composite types using template literals for the challenge in the previous segment and refactoring the color adjustment actions. A student's question regarding if one of the interpolations can be optional is also covered in this segment.
Higher Order Components
Higher Order Components
Steve demonstrates how to define higher order components with TypeScript, return a component while omitting the values being passed in, implement state management, and apply a generic to narrow down the accepted props. A brief walk through of refactoring the component to simplify the component is also covered in this segment.
Higher Order Components Exercise
Students are instructed to create a WithCurrentUser higher-order component that passes in the basic user information and accepts a manually passed salutation prop.
Higher Order Components Solution
Steve live codes the solution to the Higher Order Components exercise.
Advanced Component Patterns
Limiting Props
Steve demonstrates how to limit the props a component can take base on the state of other props. Limiting prop intake can help avoid errors with multiple optional props and safeguard the code against incorrect props being passed in.
Polymorphic Components
Steve demonstrates how to create polymorphic components with an as property word and React.ElementType for more dynamic code in TypeScript. The props that are being overridden in the new polymorphic component should be omitted.
Polymorphic Components Exercise
Students are instructed to create a polymorphic component text element that can be passed an as prop using the pattern from the previous example.
Polymorphic Components Solution
Steve live codes the solution to the Polymorphic Components exercise
Function Overloads
Steve discusses function overloads and how they allow the ability to provide more than one type of signature to the same function.
Function Overloads Exercise
Students are then instructed to make an add function that works with partial application.
Function Overloads Solution
Steve live codes the solution to the Function Overloads exercise.
Context API Edge Cases
Steve demonstrates how to solve for context API edge cases using generics to make an abstraction to solve for what to do if the context value isn't set yet. Updating the provider due to the different signature and hidden context object is also covered in this segment.
Migrating from JavaScript
Steve discusses a recommended path for migrating from JavaScript to TypeScript to ease the transition. Setting a gentle set of TypeScript rules and the allowJs flag to avoid throwing errors at any types.
