Understanding TypeScript
-
Getting Started
-
TypeScript Basics & Basic TypesModule Introduction0sProject Setup0sWorking with Types & Exploring Built-in Types0sVanilla JavaScript Has Types, Too!0sType Inference vs Type Assignment0sAssigning Types To Function Parameters0sThe “any” Type0sUnderstanding Union Types0sArrays & Types0sAdvanced Array Types0sA First Glimpse At Generic Types – Alternative Array Type Declaration0sMaking Sense of Tuples0sObject Types0sTricky: The “Must Not Be Null” Type0sFlexible Objects with the Record Type0sWorking with Enums0sBeing Specific With Literal Types0sType Aliases & Custom Types0sFunction Return Value Types0sThe “void” Type0sThe “never” Type0sFunctions As Types0snull & undefined – Special Types0sInferred null & A First Look At Type Narrowing0sForced “Not Null” And Optional Chaining0sType Casting0sThe “unknown” Type0sOptional Values & TypeScript0sNullish Coalescing0s
-
The TypeScript Compiler (and its Configuration)Module Introduction0sTypeScript Project Setup & Creating a tsconfig.json File0sExploring tsconfig Options: Target & Libs0sControlling File Input & Emission0sConfiguring Type Checking0sConfiguring Code Quality ChecksExample tsconfig.json & Deep DiveCompiling with tsconfig0sUsing TypeScript’s Watch Mode0sInstalling Type Packages0s
-
TypeScript Essentials Demo Project
-
Next-generation JavaScript & TypeScript
-
Classes & InterfacesModule Introduction0sWhat are Classes?0sCreating a First Class0sA Useful TypeScript Shortcut & Compiling to JavaScript0sMaking Sense of “public” and “private”0sMarking Fields as “readonly”0sUnderstanding Getters0sSetting Values with Setters0sExploring Static Properties & Methods0sUnderstanding Inheritance0sThe “protected” Modifier0sMaking Sense Of Abstract Classes0sIntroducing Interfaces0sCreating a First Interface0sInterfaces As Object Types0sInterfaces vs Type Aliases & Understanding Declaration Merging0sUsing Interfaces To Define Function TypesImplementing Interfaces0sEnsuring Base Types with Interfaces0sExtending Interfaces0sHow Interfaces Get (Not) Compiled To JavaScript0s
-
Advanced TypesModule Introduction0sIntersection Types0sMore on Type Guards0sDiscriminated Unions0sType Guards via “instanceof”0s“Outsourcing” Type Guards & Using Type Predicates0sFunction Overloads0sWorking with Function Overloads0sMaking Sense of Index Types0sConstant Types with “as const”0sRevisiting the “Record” Type0sThe “satisfies” Keyword0sAdvanced Types
-
Generic TypesModule Introduction0sA Generic Type We Already Know0sUnderstanding Generic Types0sCreating & Using a Generic Type0sGeneric Functions & Inference0sWorking with Multiple Generic Parameters0sGenerics & Constraints0sConstraints & Multiple Generic Types0sWorking with Generic Classes & Interfaces0sSummary0s
-
Classes & Generics – Demo Project
-
Deriving Types From TypesModule Introduction0sUsing “typeof”0s“typeof” & A More Useful Example0sAnother Great Use-case for “typeof”Extracting Keys with “keyof”0s“keyof” & A More Useful Example0sUnderstanding Indexed Access Types0sAccessing Array Elements with Indexed Access Types0sIntroducing Mapped Types0sReadonly Types & Optional Mapping0sExploring Template Literal Types0sIntroducing Conditional Types0sConditional Types – Another Example0sMaking Sense of the “infer” Keyword0sTypeScript’s Got You Covered: Built-in Utility Types0s
-
ECMAScript DecoratorsModule Introduction0sWhat Are Decorators? And ECMAScript Decorators vs Experimental Decorators0sExploring Different Types of Decorators0sBuilding a First Decorator0sBuilding a Class Decorators That Edits a Class0sUnderstanding Decorator Code Execution Order0sCreating a Method Decorator0sUsing Decorators To Solve A Common Problem0sImplementing A Decorator-based Solution: autobind0sReplacing Methods with Decorators0sIntroducing the Field Decorator0sBuilding Configurable Decorators with Factories0sOnwards to Experimental Decorators0s
-
Experimental DecoratorsModule Introduction0sA First Class Decorator0sWorking with Decorator Factories0sBuilding More Useful Decorators0sAdding Multiple Decorators0sDiving into Property Decorators0sAccessor & Parameter Decorators0sWhen Do Decorators Execute?0sReturning (and changing) a Class in a Class Decorator0sOther Decorator Return Types0sExample: Creating an “Autobind” Decorator0sValidation with Decorators – First Steps0sValidation with Decorators – Finished0sFixing a Validator BugWrap Up0sUseful Resources & Links
-
Practice Time! Let’s build a Drag & Drop ProjectModule Introduction0sGetting Started0sDOM Element Selection & OOP Rendering0sInteracting with DOM Elements0sCreating & Using an “Autobind” Decorator0sFetching User Input0sCreating a Re-Usable Validation Functionality0sRendering Project Lists0sManaging Application State with Singletons0sMore Classes & Custom Types0sFiltering Projects with Enums0sAdding Inheritance & Generics0sRendering Project Items with a Class0sUsing a Getter0sUtilizing Interfaces to Implement Drag & Drop0sDrag Events & Reflecting the Current State in the UI0sAdding a Droppable Area0sFinishing Drag & Drop0sWrap Up0sUseful Resources & Links
-
Modules & NamespacesModule Introduction0sWriting Module Code – Your Options0sWorking with Namespaces0sOrganizing Files & Folders0sA Problem with Namespace Imports0sUsing ES Modules0sConfiguring tsconfigUnderstanding various Import & Export Syntaxes0sHow Does Code In Modules Execute?0sUnderstanding “type” Imports0sWrap Up0sUseful Resources & Links
-
Creating & Running TypeScript Projects with Vite
-
Using Webpack with TypeScriptAbout This SectionModule Introduction0sWhat is Webpack & Why do we need it?0sInstalling Webpack & Important Dependencies0sAdding Entry & Output Configuration0sAdding TypeScript Support with the ts-loader Package0sAdjust Webpack ConfigFinishing the Setup & Adding webpack-dev-server0sAdding a Production Workflow0sWrap Up0sUseful Resources & Links
-
3rd Party Libraries & TypeScriptModule Introduction0sProblem: Using JavaScript (!) Libraries with TypeScript0sSolution: Installing @types Packages0sExploring .d.ts Files0sDiving Deeper Into .d.ts FilesUsing “declare” ManuallyThere Are Libraries With Great TypeScript Support!0sExploring Zod As a TypeScript-first Library0sDiving Deeper Into Zod0sRuntime vs Compile-time Types with Zod0s
-
Time to Practice! Let’s build a Select & Share a Place App (incl. Google Maps)
-
React.js & TypeScriptModule Introduction0sSetting Up a React + TypeScript Project0sTyping Components & Props0sUsing Components & Props0sThe Special “children” Prop & Optional Props0sAdding Another Components With Props0sComponent Functions & Types – An Alternative0sManaging State0sPassing Functions As Props0sHandling Form Submission0sWorking with Refs0sMore Function Passing & State Updating0sWrap Up0s
-
Node.js + Express & TypeScriptModule Introduction0sNode & TypeScript: Options & Alternatives0sSetting up a Project0sFirst Server & Working with Node Types0sAdding & Using Express (+ Types)0sManaging Data with Help of TypeScript0sAdding & Testing a First Route0sFinishing The Basic App0sNative Node.js TypeScript Support (Without Compilation!)0sType Stripping vs Type Transformation0sExploring Alternative Runtimes Like Bun0s
-
Course Roundup
-
LEGACY TypeScript Basics & Basic TypesLEGACY Lectures BelowModule Introduction0sUsing Types0sTypeScript Types vs JavaScript Types0sImportant: Type CasingWorking with Numbers, Strings & Booleans0sType Assignment & Type Inference0sUnderstanding TypesObject Types0sNested Objects & TypesArrays Types0sWorking with Tuples0sWorking with Enums0sThe “any” Type0sUnion Types0sLiteral Types0sType Aliases / Custom Types0sType Aliases & Object TypesCore Types & ConceptsFunction Return Types & “void”0sFunctions as Types0sFunction Types & Callbacks0sFunctions & TypesThe “unknown” Type0sThe “never” Type0sWrap Up0sUseful Resources & LinksWhere Should You Go Next?
-
LEGACY The TypeScript Compiler (and its Configuration)LEGACY Lectures BelowModule Introduction0sUsing “Watch Mode”0sCompiling the Entire Project / Multiple Files0sIncluding & Excluding Files0sSetting a Compilation Target0sUnderstanding TypeScript Core Libs0sMore Configuration & Compilation Options0sWorking with Source Maps0srootDir and outDir0sStop Emitting Files on Compilation Errors0sStrict Compilation0sCode Quality Options0sDebugging with Visual Studio Code0sWrap Up0sUseful Resources & LinksWhere Should You Go Next?
-
LEGACY Classes & InterfacesLEGACY Lectures BelowModule Introduction0sWhat are Classes?0sCreating a First Class0sCompiling to JavaScript0sConstructor Functions & The “this” Keyword0s“private” and “public” Access Modifiers0sShorthand Initialization0s“readonly” Properties0sClass BasicsInheritance0sOverriding Properties & The “protected” Modifier0sGetters & Setters0sStatic Methods & Properties0sAbstract Classes0sSingletons & Private Constructors0sClasses – A Summary0sClassesA First Interface0sUsing Interfaces with Classes0sWhy Interfaces?0sReadonly Interface Properties0sExtending Interfaces0sInterfaces as Function Types0sOptional Parameters & Properties0sCompiling Interfaces to JavaScript0sInterfacesWrap Up0sUseful Resources & LinksWhere Should You Go Next?
-
LEGACY GenericsLEGACY Lectures BelowModule Introduction0sBuilt-in Generics & What are Generics?0sCreating a Generic Function0sWorking with Constraints0sAnother Generic Function0sThe “keyof” Constraint0sGeneric Classes0sA First Summary0sGeneric Utility Types0sGeneric Types vs Union Types0sGenericsUseful Resources & LinksWhere Should You Go Next?
Re-recorded large parts of the course to cover missing TypeScript concepts (e.g., “satisfies”), improve explanations and add extra examples & demo projects.
Added more than 10h of new content!
—
Learn what TypeScript is, why it really is a powerful addition to JavaScript, what its features are and how to use it! Learn why TypeScript is amazing, how it improves your JavaScript code and how it helps you avoid nasty bugs and errors!
This course takes you from the very basics and its most important feature (types!) to the point where you’re able to use TypeScript in any of your projects. ReactJS projects included!
As TypeScript is developed by Microsoft and strongly advertised and used by Angular 2+ (Google) and other popular libraries, it’s here to stay. Indeed, TypeScript is one of the most popular web development languages you can learn these days!
Gain an edge today and be amongst the first to really understand TypeScript!
Learn how you can use TypeScript to bring modern JS features like destructuring, arrow functions or classes to any environment and codebase – even if it does not support those features yet! Understand which types you may use and how you can build your own types. Learn how to write better code with types and with the many features offered by TypeScript!
But, in this course, we’ll not stop after the basics! You will also learn about more advanced features (like decorators) and also how to set up workflows with TypeScript. This includes a TypeScript-only workflow as well as a webpack workflow.
You’ll also learn that you’re not limited to Angular or plain JavaScript/ TypeScript projects. Instead, a complete module covers how you may use TypeScript with ReactJS and improve your React code with TypeScript as well.
Practice what you learn!
Watching videos is a great way to learn. And to a lot of students, it’s the best way. If you also want to practice the things you learn, this course offers you more than that though. Because this course comes with plenty of exercises (and solutions, of course) in addition to all the high-quality learning videos.
So much Content!
I’m not a fan of these courses which teach you the basics and then leave you alone.
That’s why in this course you’ll get insights into:
Types and how to use them
How the TypeScript compiler works (and how you may configure it)
ES6 features with TypeScript
Advanced TypeScript Features like “infer”, Mapped Types, Constant Types & Much More!
Classes in TypeScript
Namespaces and modules
Interfaces
Generics
Decorators
How to integrate Third-Party JavaScript libraries like Zod into your TypeScript projects
How to set up a TypeScript project with Webpack
Or how to set up a plain-TypeScript workflow
How to use TypeScript together with ReactJS
How to use TypeScript together with Node/ Express (incl. native Node.js TypeScript support)
Real projects and use-cases!
And so much more!
What's included
- 22.5 hours on-demand video
- 37 articles
- 163 downloadable resources
- Access on mobile and TV
- Certificate of completion