Table of Contents
Introduction
Components
React Component with TypeScript
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
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
Students are instructed to type non-primitive objects like React components. These include JSX elements and React nodes/children.
Typing Component State
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
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
Fetching API Data
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
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
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
Typing Reducers
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
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
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
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
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
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
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
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
Students are instructed to refactor the Packing List application to use the Context API and useState hook.
TypeScript Utilities Methods
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
Generics & Template Literals
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
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
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
Steve refactors the Color Theory application to use the custom createContext method.
Auto Complete
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
Steve shares a couple of use cases for creating polymorphic components that utilize a base component type system to represent common elements.
