React and TypeScript
Table of Contents
IntroductionSteve Kinney introduces the course, shares some personal history with React and TypeScript, and discusses advantages and disadvantages of TypeScript. Course materials and a brief course overview are also provided in this segment.
Local SetupSteve demonstrates how to set up a local version of the course exercises to allow exercise completion without accessing individual code sandboxes.
propTypesSteve 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 TypesSteve 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 InterfacesSteve 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 ExerciseStudents are instructed to correctly type children without using the any type.
Typing Children SolutionSteve 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 StylingSteve 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 HookSteve 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 ValueSteve discusses how to explicitly specify the type in useState without the TypeScript type checker throwing an error.
useEffect TypeScript ExerciseStudents are instructed to use the error message given by TypeScript to correct the problem within the example's code.
useEffect TypeScript SolutionSteve live codes the solution to the useEffect TypeScript exercise.
Typing Class-Based ComponentsSteve 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 ExerciseStudents are instructed to add events to the hook-based example while adhering to TypeScript type checking.
Typing Hooks & Component SolutionSteve live codes the solution to the Typing Hooks and Component exercise.
Asynchronous Events ExerciseStudents are instructed to wire up the forms and events with some asynchronous data to load the requested number of dog facts.
Asynchronous Events SolutionSteve live codes the solution to the Asynchronous Events exercise.
Working with Reducers
Typing ReducersSteve 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 ExerciseStudents are instructed to add a reducer instead of using state in the counter exercise.
Reducers SolutionSteve 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 ActionSteve 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 APISteve 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 ContextSteve 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 InterfaceSteve 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
GenericsSteve 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 ExerciseStudents are instructed to take a basic version of the tap utility method and implement it with the types.
Generics SolutionSteve live codes the solution to the Generics exercise.
Utility Types in ReactSteve 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 TypesSteve 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 ExerciseStudents 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 SolutionSteve live codes the solution to the Utility Types exercise.
Template LiteralsSteve 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 ContinuedSteve 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 ComponentsSteve 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 ExerciseStudents 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 SolutionSteve live codes the solution to the Higher Order Components exercise.
Advanced Component Patterns
Limiting PropsSteve 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 ComponentsSteve 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 ExerciseStudents 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 SolutionSteve live codes the solution to the Polymorphic Components exercise
Function OverloadsSteve discusses function overloads and how they allow the ability to provide more than one type of signature to the same function.
Function Overloads ExerciseStudents are then instructed to make an add function that works with partial application.
Function Overloads SolutionSteve live codes the solution to the Function Overloads exercise.
Context API Edge CasesSteve 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.