Course Highlights
  • Master design patterns for building large applications
  • Integrate Typescript into React/Redux or Express projects
  • Understand Composition vs Inheritance, and when to use each
  • Write reusable code powered by classes and interfaces
  • Assemble reusable boilerplates for your own Typescript projects
Curriculum

11 Topics
How to Get Help
Join Our Community!
Course Resources
Typescript Overview
Environment Setup
Important Axios Version Information
A First App
Executing Typescript Code
One Quick Change
Catching Errors with Typescript
Catching More Errors!

6 Topics
Do Not Skip - Course Overview
Types
More on Types
Examples of Types
Where Do We Use Types?
Types

9 Topics
Type Annotations and Inference
Annotations with Variables
Object Literal Annotations
Annotations Around Functions
Understanding Inference
The 'Any' Type
Fixing the 'Any' Type
Delayed Initialization
When Inference Doesn't Work

6 Topics
More on Annotations Around Functions
Inference Around Functions
Annotations for Anonymous Functions
Void and Never
Destructuring with Annotations
Annotations Around Objects

4 Topics
Arrays in Typescript
Why Typed Arrays?
Multiple Types in Arrays
When to Use Typed Arrays

3 Topics
Tuples in Typescript
Tuples in Action
Why Tuples?

8 Topics
Interfaces
Long Type Annotations
Fixing Long Annotations with Interfaces
Syntax Around Interfaces
Functions in Interfaces
Code Reuse with Interfaces
General Plan with Interfaces
Interfaces

6 Topics
Classes
Basic Inheritance
Instance Method Modifiers
Fields in Classes
Fields with Inheritance
Where to Use Classes

26 Topics
Updated Parcel Instructions
App Overview
Bundling with Parcel
Project Structure
IMPORTANT Info About Faker Installation
Generating Random Data
Type Definition Files
Using Type Definition Files
Export Statements in Typescript
Defining a Company
Note on Generating an API Key
Adding Google Maps Support
Required Update for New @types Library
Google Maps Integration
Exploring Type Definition Files
Hiding Functionality
Why Use Private Modifiers? Here's Why
Adding Markers
Duplicate Code
One Possible Solution
Restricting Access with Interfaces
Implicit Type Checks
Showing Popup Windows
Updating Interface Definitions
Optional Implements Clauses
App Wrapup

24 Topics
App Overview
Configuring the TS Compiler
Concurrent Compilation and Execution
A Simple Sorting Algorithm
Sorter Scaffolding
Sorting Implementation
Two Huge Issues
Typescript is Really Smart
Type Guards
Why is This Bad?
Extracting Key Logic
Separating Swapping and Comparison
The Big Reveal
Interface Definition
Sorting Arbitrary Collections
Linked List Implementation
Completed Linked List Code
Just...One...More...Fix...
Integrating the Sort Method
Issues with Inheritance
Abstract Classes
Why Use Abstract Classes?
Solving All Issues with Abstract Classes
Interfaces vs Abstract Classes

37 Topics
Project Overview
Project Setup
CSV Data
Type Definition Files - Again!
Reading CSV Files
Running an Analysis
Losing Dataset Context
Using Enums
When to Use Enums
Extracting CSV Reading
Data Types
Converting Date Strings to Dates
Converting Row Values
Type Assertions
Describing a Row with a Tuple
Not Done with FileReader Yet!
Understanding Refactor #1
Creating Abstract Classes
Variable Types with Generics
Applying a Type to a Generic Class
Alternate Refactor
Interface-Based Approach
Extracting Match References - Again!
Transforming Data
Updating Reader References
Inheritance vs Composition
More on Inheritance vs Composition
A Huge Misconception Around Composition
Goal Moving Forward
A Composition-Based Approach
Implementing an Analyzer Class
Building the Reporter
Putting It All Together
Generating HTML Reports
One Last Thing!
Oops My Bad
App Wrapup

4 Topics
More on Generics
Type Inference with Generics
Function Generics
Generic Constraints

76 Topics
App Overview
Reminder on Using Parcel with npx
Parcel Setup
Framework Structure
Designing the User
Retrieving User Properties
Optional Interface Properties
An Eventing System
Listener Support
Storing Event Listeners
Dynamic Array Creation
Triggering Event Callbacks
Small Update for JSON server and Parcel Start Script
Adding JSON Server
Understanding REST Conventions
Adding Fetch Functionality
Successfully Fetching Model Data
Saving User Data
Refactoring with Composition
Re-Integrating Eventing
Composition with Nested Objects
A More Complicated Extraction
Options for Adapting Sync
Refactoring Sync
Generic Constraints Around Sync
Connecting Sync Back to User
Optional Properties
No overload matches this call - this.data
Extracting an Attributes Class
The Get Method's Shortcoming
Two Important Rules
An Advanced Generic Constraint
Re-Integrating Attributes
Composition is Delegation
Reminder on Accessors
Passthrough Methods
A Context Issue
Setting Data While Triggering
Fetching User Data
Saving Data
Composition vs Inheritance...Again!
Extracting a Model Class
Extending the User
Final User Refactor
Model Wrapup
Shortened Passthrough Methods
Users Collection
Implementing a Users Collection
Parsing User JSON
Generic User Collection
A Class Method for Collections
View Classes
Building the UserForm
The UserForm's Render Method
Rendering HTML
Defining an Events Map
Binding Event Handlers
Adding Model Properties
Binding Events on Class Name
Adding Methods to the User
Re-Rendering on Model Change
Reading Input Text
Strict Null Checks
Reusable View Logic
Extracting a View Class
Type 'K' does not satisfy the constraint 'HasId'.ts
Extending with Generic Constraints
Saving Data From a View
UserEdit and UserShow
Nesting with Regions
Mapping Regions
Testing Region Mapping
View Nesting
Collection Views
CollectionView Implementation
App Wrapup

16 Topics
Typescript with JS Libraries
App Overview
Project Setup
Basic Routes with Express
Using an Express Router
Parsing Form Bodies
Why Doesn't Express Play Nicely with TS?
Issues with Type Definition Files
Dealing with Poor Type Defs
Wiring Up Sessions
Checking Login Status
Logging Out
Protecting Routes
A Closer Integration
The Refactoring Process
Prototypes Reminder

8 Topics
Note about target environment in tsconfig
Decorators in Typescript
Details on Decorators
Property Descriptors
Wrapping Methods with Descriptors
Decorator Factories
Decorators Around Properties
More on Decorators

24 Topics
A Quick Disclaimer
Project Overview
Why is This Hard?
Solution Overview
Note about target environment in tsconfig
Basics of Metadata
Practical Metadata
Let's Refactor!
The 'Get' Decorator
ES2016 Fix for Controller Decorator
The Controller Decorator
Proof of Concept
A Few Fixups
Defining a RouteBinder
Closed Method Sets with Enums
Metadata Keys
The 'Use' Decorator
Testing Use
Body Validators
Automated Validation
Testing Automated Validation
Fixing Routes
Using Property Descriptors for Type Checking
App Wrapup

26 Topics
React and Redux Overview
App Overview
Generating the App
ReactDOM warning with React v18
Simple Components
Interfaces with Props
Handling Component State
Confusing Component State!
Functional Components
createStore Strikethrough in Code Editor
Redux Setup
Action Creators with Typescript
Action Types Enum
The Generic Dispatch Function
A Reducer with Enums
Validating Store Structure
Connecting a Component to Redux
Rendering a List
Adding in Delete Functionality
Breaking Out Action Creators
Expressing Actions as Type Union
Type Guards in Reducers
Wiring up deleteToDo Action
Again Type Definition Files
Tracking Loading with Component State
App Wrapup

18 Topics
Generating TypeScript Enabled Projects
ReactDOM warning with React v18
File Extensions and Starting Up React
Changes with TypeScript
The Big Difference with Props
Explicit Component Type Annotations
Property 'children' does not exist
Annotations with Children
State with TypeScript
Type Inference with State
Quick Finish to the Example
More on State
Type Unions in State
Inline Event Handlers
Typing Standalone Event Handlers
Handling Drag Events Too!
Applying Types to Refs
More on Refs

28 Topics
App Overview
Updated Install Command and Versions for React 18
Project Setup
Redux Store Design
Reducer Setup
Annotating the Return Type
Typing an Action
Separate Interfaces for Actions
Applying Action Interfaces
Adding an Action Type Enum
A Better Way to Organize Code
Small Update for Try / Catch Block
Adding Action Creators
Adding Request Logic
Applying Typings to Dispatch
createStore Strikethrough in Code Editor
Setting Up Exports
Wiring Up to React
Oops... Initial State!
Reminder on Event Types
TypeScript Error When Dispatching Action
Calling an Action Creator
Binding Action Creators
Selecting State
Awkward Typings Around React-Redux
Creating a Typed Selector
Consuming Store State
Quick Wrapup - Final Lecture

1 Topic
Bonus!

  Write a Review

Typescript: The Complete Developer's Guide

Go to Paid Course