React and TypeScript, v2
Table of Contents
IntroductionSteve Kinney, the Head of Engineering at Temporal, begins the course with an overview of what will be covered and the advantages of using TypeScript. Students should be familiar with React, but experience with TypeScript is optional.
React Component with TypeScriptSteve begins refactoring a React component to use TypeScript. The file extension is renamed to use a .tsx extension. As types are added to the component, the editor will display errors where type conflicts occur. Errors can also be displayed in the terminal.
Typing Components ExerciseStudents are instructed to refactor the controls.jsx component to use Typescript. When to use types versus interfaces is also discussed in this lesson.
Typing Component Children ExerciseStudents are instructed to type non-primitive objects like React components. These include JSX elements and React nodes/children.
Typing Component StateSteve demonstrates how to type state properties. By default, TypeScript will infer the type based on the default state passed to the useState hook. This adds immediate type safety around values passed to the setter method.
Typing Component State ExerciseStudents are instructed to update the Accident Counter, so the form updates the state from both the input field and the submit button.
Fetching API DataSteve explains how to add types to state hooks when the data is returned from an API. A type or interface can provide the shape of the state. A default value, such as undefined, should also be provided to handle cases where the data is not loaded or unavailable.
Fetching API Data ExerciseStudents are instructed to replace the hard-coded state with data from the API and include the correct type for the array of quotes.
Passing State Methods to ComponentsSteve refactors the Fetching API exercise solutions to demonstrate what the code would look like if setQuote were passed through to the Quotes component. The setQuote function is added to the QuoteProps type definition.
Typing & Refactoring
Typing ReducersSteve demonstrates how to use a reducer instead of setting the state directly. A simple reducer is created at types are added to the reducer's signature.
Reducers with Explicit anySteve refactors the code to create a more complex reducer that manages both the count and draftCount states. This change introduces the "any" type for the action object, and the issues using "any" are discussed.
Adding Types to Reducer ActionsSteve demonstrates how TypeScript can provide an explicit list of actions for a reducer. This is better than using enumerated values because both the action name and payload type can be specified.
Creating Actions for colorReducerSteve spends a few minutes creating the actions for the colorReducer in the Color Theory Application. When updated, a third-party library is used to convert from RGB to hexadecimal values.
Passing dispatch as a PropSteve adds a type to the dispatch function to pass it as a prop to the child components. TypeScript will validate if dispatch is used correctly and passed the correct action and payload.
Typing Actions & Reducers ExerciseStudents are instructed to pass the dispatch method as a prop. Actions should be added to the associated reducer to handle when a user clicks on one of the related colors or saved colors.
Context APISteve refactors the code to use the Context API, which eliminates the need for the dispatch method to be "prop drilled" to all the subcomponents.
Context API ExerciseStudents are instructed to refactor the Packing List application to use the Context API and useState hook.
TypeScript Utilities MethodsSteve introduces a few utility methods to facilitate common type transformations. The Partial utility method creates types from a list of keys from an object. This is useful when updates to an object should match the object's keys, but not all properties are required.
Generics & Template LiteralsSteve revisits template literals and demonstrates how they can pull keys and values from generics to type actions. A generic can be used to ensure the action type is one of the keys from an object and that the payload for that action uses the correct type.
Generic Type SystemsSteve demonstrates how generics are used to create type systems. Generics act like variables in a type definition. As a type like "string" is passed to a factory function, that type will dynamically fill the specific types in the returned object.
Create Context with GenericsSteve uses generics to code a custom createContext method that will throw an error if the context value is not set. This technique eliminates the need to cast the types with the "as" keyword by taking advantage of generics and closure scope.
Using a Custom createContextSteve refactors the Color Theory application to use the custom createContext method.
Auto CompleteSteve adds auto-complete for props being used on HTML input elements. The type definition for the props uses the ComponentPropsWIthoutRef to union an HTML input's properties with any additional custom props.
Polymorphic ComponentsSteve shares a couple of use cases for creating polymorphic components that utilize a base component type system to represent common elements.