Steve Kinney
Temporal
Course Description
Catch errors in your code as you type without having to leave your editor! That's the power of using TypeScript with React. Learn to use TypeScript with React components ensuring you have the correct properties. And use the Context API, React Hooks, and type props to build more robust and reliable Typescript applications at scale!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: January 19, 2023
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 8 minutes
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.
Components
Section Duration: 57 minutes
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.
Students are instructed to refactor the controls.jsx component to use Typescript. When to use types versus interfaces is also discussed in this lesson.
Students are instructed to type non-primitive objects like React components. These include JSX elements and React nodes/children.
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.
Students are instructed to update the Accident Counter, so the form updates the state from both the input field and the submit button.
API's
Section Duration: 27 minutes
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.
Students are instructed to replace the hard-coded state with data from the API and include the correct type for the array of quotes.
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 & Refactoring
Section Duration: 1 hour, 51 minutes
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.
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.
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.
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.
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.
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.
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.
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.
Students are instructed to refactor the Packing List application to use the Context API and useState hook.
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
Section Duration: 59 minutes
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.
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.
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.
Steve refactors the Color Theory application to use the custom createContext method.
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.
Steve shares a couple of use cases for creating polymorphic components that utilize a base component type system to represent common elements.
Wrapping Up
Section Duration: 6 minutes
Steve wraps up the course by sharing a few resources and answering an audience question about composing types.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops