Module Introduction

TypeScript Setup & Using TypeScript

Working with Types: Type Inference & Explicit Type Annotations

Basic Primitive Types

Invoking The TypeScript Compiler

Combining Types Union Types (Alternative Types)

Working with Object Types

Working with Array Types

Adding Types to Functions - Parameter & Return Value Types

Defining Function Types

Creating Custom Types / Type Aliases

Defining Object Types with Interfaces

Interfaces vs Custom Types

Merging Types

Being Specific With Literal Types

Adding Type Guards

Type Guards & Type Narrowing - A Closer Look

Making Sense Of Generic Types

Summary

Module Introduction

Creating a React + TypeScript Project

Understanding the Role of tsconfig.json

Building a First Component & Facing a Missing Type

Defining Component Props Types

Storing Props Types as a Custom Type or Interface

Defining a Type for Props with "children"

Component Props & The Special "key" Prop

Another Way Of Typing Components

Exercise: Creating a Header Component

Using useState() and TypeScript

Working with State & Outputting State-based Values

Another Exercise & Reusing Types Across Files

Passing Functions as Values - In A Type-Safe Way

Handling & Typing Events

Working with Generic Event Types

Using useRef() with TypeScript

Handling User Input In A Type-Safe Way

Summary

Module Introduction

Building a More Dynamic & Flexible Component

Problem: Flexible Components With Required Prop Combinations

Solution: Building Components with Discriminated Unions

Onwards To A New Project

Building a Basic Wrapper Component

Building Better Wrapper Components with ComponentPropsWithoutRef

Building a Wrapper Component That Renders Different Elements

Working with Type Predicates & Facing TypeScript Limitations

Building a Basic Polymorphic Component

Building a Better Polymorphic Component with Generics

Examples: More Component Ideas

Using forwardRef with TypeScript

Building Another Wrapper Component (Custom Form Component)

Sharing Logic with "unknown" & Type Casting

Exposing Component APIs with useImperativeHandle (with TypeScript)

Alternative: Avoiding Type Casting with "as"

Summary

Module Introduction

The Starting Project

Creating a Context & Fitting Types

Creating a Type-Safe Provider Component

Accessing Context Type-Safe With A Custom Hook

Getting Started with useReducer() & TypeScript

A Basic Reducer Function & A Basic Action Type

Changing State via the Reducer Function

Using Better Action Types

Wiring Everything Up & Finishing the App

Module Introduction

Creating a First Side Effect

Using useEffect() with TypeScript

Managing An Interval With Refs & The Effect Cleanup Function

UseEffect() & Its Dependencies

A Small Bug & Its Solution

Onwards to Data Fetching!

Building a Utility "get" Function with TypeScript

Fetching & Transforming Data

Alternative: Using the "zod" Library for Response Data Validation

Alternative: A Generic "get" Function

Handling Loading & Error States

Module Introduction

The Starting Project

Redux Setup

Creating a Redux Store & A First Slice

Setting a State Type

A First Reducer & Controlling the Action Payload Type

Adding Logic To The Reducer

Providing the Redux Store

Dispatching Actions & Adjusting the useDispatch Hook

Creating a Type-Safe useSelector Hook

Selecting & Transforming Redux Store Data

Finishing Touches & Summary

Your Task

Your Task - Details

Hints

An Example Solution

Bonus Lecture