Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Understanding TypeScript
Getting Started
Welcome to the Course (1:31)
What Is TypeScript? (2:54)
Why Would You Use TypeScript? (5:32)
Compiling TypeScript To JavaScript (6:18)
Editor & Project Setup (2:11)
Course Setup
About The Course (1:40)
The Academind Pro Referral Program
How To Get The Most Out Of This Course (3:29)
Join Our Learning Community
TypeScript Basics & Basic Types
Module Introduction (1:12)
Project Setup (2:56)
Working with Types & Exploring Built-in Types (4:44)
Vanilla JavaScript Has Types, Too! (2:53)
Type Inference vs Type Assignment (2:59)
Assigning Types To Function Parameters (2:45)
The "any" Type (3:02)
Understanding Union Types (2:02)
Arrays & Types (2:28)
Advanced Array Types (1:56)
A First Glimpse At Generic Types - Alternative Array Type Declaration (1:46)
Making Sense of Tuples (3:15)
Object Types (4:48)
Tricky: The "Must Not Be Null" Type (2:25)
Flexible Objects with the Record Type (4:55)
Working with Enums (6:39)
Being Specific With Literal Types (5:04)
Type Aliases & Custom Types (4:13)
Quiz: Core Types & Concepts
Function Return Value Types (3:04)
The "void" Type (1:28)
The "never" Type (3:16)
Functions As Types (8:36)
Quiz: Functions & Types
null & undefined - Special Types (2:40)
Inferred null & A First Look At Type Narrowing (3:29)
Forced "Not Null" And Optional Chaining (5:20)
Type Casting (4:26)
The "unknown" Type (5:22)
Optional Values & TypeScript (2:41)
Nullish Coalescing (5:36)
The TypeScript Compiler (and its Configuration)
Module Introduction (1:26)
TypeScript Project Setup & Creating a tsconfig.json File (2:46)
Exploring tsconfig Options: Target & Libs (5:31)
Controlling File Input & Emission (5:16)
Configuring Type Checking (3:16)
Configuring Code Quality Checks
Example tsconfig.json & Deep Dive
Compiling with tsconfig (1:28)
Using TypeScript's Watch Mode (1:01)
Installing Type Packages (5:36)
TypeScript Essentials Demo Project
Module Introduction (1:24)
Getting Started & First Steps (4:42)
Creating a First Custom Type (4:03)
Defining a Function with a Union Type Return Value (3:33)
Adding Application Logic (9:57)
Connecting Functions & Passing Values (3:52)
Compilation & Execution (3:33)
Next-generation JavaScript & TypeScript
Module Introduction (3:39)
"let" and "const" (6:35)
Arrow Functions (4:50)
Default Function Parameters (2:09)
The Spread Operator (...) (4:32)
Rest Parameters (5:04)
Array & Object Destructuring (5:17)
How Code Gets Compiled & Wrap Up (1:37)
Useful Resources & Links
Classes & Interfaces
Module Introduction (1:02)
What are Classes? (1:23)
Creating a First Class (6:04)
A Useful TypeScript Shortcut & Compiling to JavaScript (5:18)
Making Sense of "public" and "private" (5:47)
Marking Fields as "readonly" (1:53)
Understanding Getters (3:31)
Setting Values with Setters (5:06)
Exploring Static Properties & Methods (2:30)
Understanding Inheritance (3:23)
The "protected" Modifier (2:33)
Making Sense Of Abstract Classes (4:25)
Introducing Interfaces (1:38)
Creating a First Interface (3:57)
Interfaces As Object Types (1:43)
Interfaces vs Type Aliases & Understanding Declaration Merging (4:03)
Using Interfaces To Define Function Types
Implementing Interfaces (3:10)
Ensuring Base Types with Interfaces (1:52)
Extending Interfaces (1:54)
How Interfaces Get (Not) Compiled To JavaScript (1:00)
Advanced Types
Module Introduction (0:48)
Introducing Intersection Types (4:36)
Revisiting Type Guards (5:30)
Exploring Discriminated Unions (4:33)
Guards with "instanceof" (2:37)
"Outsourcing" Type Guards & Working with Type Predicates (3:14)
The Case For Function Overloads (4:39)
Using Function Overloads (2:31)
Rest Parameters & Types
Working with Index Types (5:02)
Constant Types with "as const" (2:52)
Revisiting the Record Type (1:45)
The "satisfies" Keyword (7:49)
Generic Types
Module Introduction (0:49)
A Generic Type We Already Know (1:56)
Understanding Generic Types (2:01)
Creating & Using a Generic Type (6:16)
Generic Functions & Inference (5:09)
Working with Multiple Generic Parameters (2:00)
Generics & Constraints (4:03)
Constraints & Multiple Generic Types (2:42)
Working with Generic Classes & Interfaces (2:06)
Summary (1:03)
Classes & Generics - Demo Project
Module Introduction (0:49)
What Is A Linked List? (1:35)
Creating List & Node Classes (4:49)
Making the Class Generic (3:11)
Adding an "add" Method (6:45)
Adding Items More Efficiently (3:07)
Accessing the Data & Compiling + Running the Code (3:59)
Finishing the Linked List (1:54)
Deriving Types From Types
Module Introduction (0:48)
Using "typeof" (4:47)
Another Great Use-case for "typeof"
"typeof" & A More Useful Example (4:06)
Extracting Keys with "keyof" (2:22)
"keyof" & A More Useful Example (6:26)
Understanding Indexed Access Types (4:35)
Accessing Array Elements with Indexed Access Types (3:54)
Introducing Mapped Types (7:52)
Readonly Types & Optional Mapping (7:22)
Exploring Template Literal Types (10:13)
Introducing Conditional Types (9:26)
Conditional Types - Another Example (6:04)
Making Sense of the "infer" Keyword (7:28)
TypeScript's Got You Covered: Built-in Utility Types (2:57)
Decorators
Module Introduction (0:51)
What Are Decorators? And ECMAScript Decorators vs Experimental Decorators (7:09)
Exploring Different Types of Decorators (1:17)
Building a First Decorator (8:09)
Building a Class Decorators That Edits a Class (5:25)
Understanding Decorator Code Execution Order (3:07)
Creating a Method Decorator (4:17)
Using Decorators To Solve A Common Problem (4:09)
Implementing A Decorator-based Solution: autobind (3:44)
Replacing Methods with Decorators (3:38)
Introducing the Field Decorator (4:43)
Building Configurable Decorators with Factories (4:01)
Onwards to Experimental Decorators (0:40)
Experimental Decorators
Module Introduction (1:55)
A First Class Decorator (5:21)
Working with Decorator Factories (2:02)
Building More Useful Decorators (5:59)
Adding Multiple Decorators (2:52)
Diving into Property Decorators (5:00)
Accessor & Parameter Decorators (5:36)
When Do Decorators Execute? (3:11)
Returning (and changing) a Class in a Class Decorator (8:37)
Other Decorator Return Types (3:44)
Example: Creating an "Autobind" Decorator (9:04)
Validation with Decorators - First Steps (7:28)
Validation with Decorators - Finished (12:14)
Wrap Up (3:21)
Fixing a Bug
Useful Resources & Links
Practice Time! Let's build a Drag & Drop Project
Module Introduction (1:32)
Getting Started (5:20)
DOM Element Selection & OOP Rendering (11:43)
Interacting with DOM Elements (8:03)
Creating & Using an "Autobind" Decorator (4:44)
Fetching User Input (9:14)
Creating a Re-Usable Validation Functionality (14:10)
Rendering Project Lists (11:18)
Managing Application State with Singletons (15:32)
More Classes & Custom Types (7:11)
Filtering Projects with Enums (5:59)
Adding Inheritance & Generics (18:40)
Rendering Project Items with a Class (11:58)
Using a Getter (3:33)
Utilizing Interfaces to Implement Drag & Drop (10:24)
Drag Events & Reflecting the Current State in the UI (5:58)
Adding a Droppable Area (8:08)
Finishing Drag & Drop (6:44)
Wrap Up (1:22)
Useful Resources & Links
Modules & Namespaces
Module Introduction (1:24)
Writing Module Code - Your Options (2:34)
Working with Namespaces (10:50)
Organizing Files & Folders (8:41)
A Problem with Namespace Imports (2:52)
Using ES Modules (12:20)
Understanding various Import & Export Syntaxes (4:57)
How Does Code In Modules Execute? (1:43)
Understanding "type" Imports (2:16)
Wrap Up (3:14)
Useful Resources & Links
Creating & Running TypeScript Projects with Vite
Module Introduction (1:14)
The Problem With The TypeScript Compiler (3:35)
Building with Webpack or ESBuild (4:13)
Introducing Vite (2:25)
Using Vite (7:21)
Installing TypeScript on a Per-Project Basis (1:49)
Making Sense of .d.ts Files (2:33)
Importing non-TS Files (1:56)
Wrap Up (0:46)
Using Webpack with TypeScript
About This Section
Module Introduction (1:01)
What is Webpack & Why do we need it? (5:32)
Installing Webpack & Important Dependencies (3:55)
Adding Entry & Output Configuration (5:57)
Adding TypeScript Support with the ts-loader Package (7:00)
Finishing the Setup & Adding webpack-dev-server (3:33)
Adding a Production Workflow (4:04)
Wrap Up (1:40)
Useful Resources & Links
3rd Party Libraries & TypeScript
Module Introduction (1:09)
Facing Problems with JS Libraries in TS Projects (3:43)
Bridging the Gap with @types Packages (4:40)
Exploring .d.ts Files (6:43)
Diving Deeper Into .d.ts Files
Using "declare" Manually
There Are Libraries With Great TypeScript Support! (2:21)
Exploring Zod as a TypeScript-first Library (8:02)
Defining a More Complex Zod Schema (4:25)
Runtime vs Compile-time Types with Zod (4:16)
Time to Practice! Let's build a "Select & Share a Place" App (incl. Google Maps)
Module Introduction (0:41)
Project Setup (3:56)
Getting User Input (2:41)
Setting Up a Google API Key (2:48)
Using Axios to Fetch Coordinates for an Entered Address (10:14)
Rendering a Map with Google Maps (incl. Types!) (6:35)
Useful Resources & Links
React.js & TypeScript
Module Introduction (1:22)
Creating a React + TypeScript Project (4:08)
Typing Components & Props (5:47)
Using Components & Props (2:47)
TypeScript, The Special "children" Prop & Optional Props (3:01)
Adding Another Component With Props (4:03)
An Alternative Component Function Type Syntax (2:30)
Working with State & TypeScript (2:05)
Passing Functions As Props (5:15)
Handling Form Submission (4:43)
Using Refs with TypeScript (5:40)
More Function Passing & State Updating (4:05)
Wrap Up (1:06)
Node.js & TypeScript
Module Introduction (0:55)
Node + TypeScript - You Have Multiple Options (3:52)
Project Setup & Configuration (7:23)
Adding Node.js Types & Running a Basic Server (3:28)
Adding & Using Express.js (and its Types) (3:27)
Managing Data With Help Of TypeScript (8:28)
Adding & Testing a First Route (with Data Extraction) (9:38)
Finishing the Basic App (11:39)
Native Node.js TypeScript Support Without Compilation (incl. tsconfig Setup) (7:28)
Type Stripping vs Type Transformation (9:01)
Considering Alternative Runtimes (1:44)
Course Roundup
Roundup & Next Steps (1:15)
Adding Items More Efficiently
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock