React and TypeScript, v2

Table of Contents

• 

  Introduction

  00:00:00 - 00:08:31 View Transcript

  Steve 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 TypeScript

  00:08:32 - 00:21:49 View Transcript

  Steve 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 Exercise

  00:21:50 - 00:41:54 View Transcript

  Students 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 Exercise

  00:41:55 - 00:51:44 View Transcript

  Students are instructed to type non-primitive objects like React components. These include JSX elements and React nodes/children.
• 

  Typing Component State

  00:51:45 - 00:59:09 View Transcript

  Steve 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 Exercise

  00:59:10 - 01:05:42 View Transcript

  Students are instructed to update the Accident Counter, so the form updates the state from both the input field and the submit button.

• 

  Fetching API Data

  01:05:43 - 01:12:41 View Transcript

  Steve 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 Exercise

  01:12:42 - 01:26:55 View Transcript

  Students 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 Components

  01:26:56 - 01:33:25 View Transcript

  Steve 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 Reducers

  01:33:26 - 01:42:51 View Transcript

  Steve 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 any

  01:42:52 - 01:54:04 View Transcript

  Steve 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 Actions

  01:54:05 - 02:07:42 View Transcript

  Steve 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 colorReducer

  02:07:43 - 02:22:58 View Transcript

  Steve 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 Prop

  02:22:59 - 02:38:48 View Transcript

  Steve 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.
• 

  Template Literal Types

  02:38:49 - 02:45:57 View Transcript

  Steve demonstrates template literal types, allowing JavaScript template literals to expand types into many strings via unions. When a union is used in the interpolated position, the type is a set of every possible string literal that each union member could represent.
• 

  Typing Actions & Reducers Exercise

  02:45:58 - 02:51:32 View Transcript

  Students 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 API

  02:51:33 - 03:05:17 View Transcript

  Steve 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 Exercise

  03:05:18 - 03:18:27 View Transcript

  Students are instructed to refactor the Packing List application to use the Context API and useState hook.
• 

  TypeScript Utilities Methods

  03:18:28 - 03:25:30 View Transcript

  Steve 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 Literals

  03:25:31 - 03:31:36 View Transcript

  Steve 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 Systems

  03:31:37 - 03:40:58 View Transcript

  Steve 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 Generics

  03:40:59 - 03:57:34 View Transcript

  Steve 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 createContext

  03:57:35 - 04:07:09 View Transcript

  Steve refactors the Color Theory application to use the custom createContext method.
• 

  Auto Complete

  04:07:10 - 04:19:56 View Transcript

  Steve 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 Components

  04:19:57 - 04:25:02 View Transcript

  Steve shares a couple of use cases for creating polymorphic components that utilize a base component type system to represent common elements.

• 

  Wrapping Up

  04:25:03 - 04:31:43 View Transcript

  Steve wraps up the course by sharing a few resources and answering an audience question about composing types.