About Course
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. Instead, 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
Classes in TypeScript
Namespaces and modules
Interfaces
Generics
Decorators
How to integrate Third-Party JavaScript libraries 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
Real projects and use-cases!
And so much more!
What Will You Learn?
- Use TypeScript and its Features like Types, ES6 Support, Classes, Modules, Interfaces and much more in any of their Projects
- Understand what TypeScript really is about and how it works
- Why TypeScript offers a real advantage over vanilla JavaScript
- Learn TypeScript both in theory as well as applied to real use-cases and projects
- Learn how to combine TypeScript with ReactJS or NodeJS / Express
Course Content
Welcome The Course
-
Welcome to the Course!
00:00 -
What Is TypeScript & Why Should You Use It
00:00 -
Installing & Using TypeScript
00:00 -
TypeScript Advantages – Overview
00:00 -
Course Outline
00:00 -
How To Get The Most Out Of The Course
00:00 -
Setting Up A Code Editor IDE
00:00 -
The Course Project Setup
00:00
TypeScript Basics & BasicsTypes
-
Module Introduction
00:00 -
Using Types
00:00 -
TypeScript Types vs JavaScript Types
00:00 -
Working with Numbers, Strings & Booleans
00:00 -
Type Assignment & Type Inference
00:00 -
Object Types
00:00 -
Arrays Types
00:00 -
Working with Tuples
00:00 -
Working with Enums
00:00 -
The “any” Type
00:00 -
Union Types
00:00 -
Literal Types
00:00 -
Type Aliases / Custom Types
00:00 -
Function Return Types & “void”
00:00 -
Functions as Types
00:00 -
Function Types & Callbacks
00:00 -
The “unknown” Type
00:00 -
The “never” Type
00:00 -
Wrap Up
00:00
The TypeScript Compiler(and its Configuration)
-
Module Introduction
00:00 -
Using “Watch Mode”
00:00 -
Compiling the Entire Project / Multiple Files
00:00 -
Including & Excluding Files
00:00 -
Setting a Compilation Target
00:00 -
Understanding TypeScript Core Libs
00:00 -
More Configuration & Compilation Options
00:00 -
Working with Source Maps
00:00 -
rootDir and outDir
00:00 -
Stop Emitting Files on Compilation Errors
00:00 -
Strict Compilation
00:00 -
Code Quality Options
00:00 -
Debugging with Visual Studio Code
00:00 -
Wrap Up
00:00
Next – Generation JavaScript & TypeScript
-
Module Introduction
00:00 -
“let” and “const”
00:00 -
Arrow Functions
00:00 -
Default Function Parameters
00:00 -
The Spread Operator (…)
00:00 -
Rest Parameters
00:00 -
Array & Object Destructuring
00:00 -
How Code Gets Compiled & Wrap Up
00:00
Classes and Interfaces
-
Module Introduction
00:00 -
What are Classes?
00:00 -
Creating a First Class
00:00 -
Compiling to JavaScript
00:00 -
Constructor Functions & The “this” Keyword
00:00 -
“private” and “public” Access Modifiers
00:00 -
Shorthand Initialization
00:00 -
“readonly” Properties
00:00 -
Inheritance
00:00 -
Overriding Properties & The “protected” Modifier
00:00 -
Getters & Setters
00:00 -
Static Methods & Properties
00:00 -
Abstract Classes
00:00 -
Singletons & Private Constructors
00:00 -
Classes – A Summary
00:00 -
A First Interface
00:00 -
Using Interfaces with Classes
00:00 -
Why Interfaces?
00:00 -
Readonly Interface Properties
00:00 -
Extending Interfaces
00:00 -
Interfaces as Function Types
00:00 -
Optional Parameters & Properties
00:00 -
Compiling Interfaces to JavaScript
00:00 -
Wrap Up
00:00
Advanced Types
-
Module Introduction
00:00 -
Intersection Types
00:00 -
More on Type Guards
00:00 -
Discriminated Unions
00:00 -
Type Casting
00:00 -
Index Properties
00:00 -
Function Overloads
00:00 -
Optional Chaining
00:00 -
Nullish Coalescing
00:00 -
Wrap Up
00:00
Generics
-
Module Introduction
00:00 -
Built-in Generics & What are Generics?
00:00 -
Creating a Generic Function
00:00 -
Working with Constraints
00:00 -
Another Generic Function
00:00 -
The “keyof” Constraint
00:00 -
Generic Classes
00:00 -
A First Summary
00:00 -
Generic Utility Types
00:00 -
Generic Types vs Union Types
00:00
Decorators
-
Module Introduction
00:00 -
A First Class Decorator
00:00 -
Working with Decorator Factories
00:00 -
Building More Useful Decorators
00:00 -
Adding Multiple Decorators
00:00 -
Diving into Property Decorators
00:00 -
Accessor & Parameter Decorators
00:00 -
When Do Decorators Execute?
00:00 -
Returning (and changing) a Class in a Class Decorator
00:00 -
Other Decorator Return Types
00:00 -
Example: Creating an “Autobind” Decorator
00:00 -
Validation with Decorators – First Steps
00:00 -
Validation with Decorators – Finished
00:00 -
Wrap Up
00:00
Practice Time Lets Build a Drag & Drop Project
-
Module Introduction
00:00 -
Getting Started
00:00 -
DOM Element Selection & OOP Rendering
00:00 -
nteracting with DOM Elements
00:00 -
Creating & Using an “Autobind” Decorator
00:00 -
Fetching User Input
00:00 -
Creating a Re-Usable Validation Functionality
00:00 -
Rendering Project Lists
00:00 -
Managing Application State with Singletons
00:00 -
More Classes & Custom Types
00:00 -
Filtering Projects with Enums
00:00 -
Adding Inheritance & Generics
00:00 -
Rendering Project Items with a Class
00:00 -
Using a Getter
00:00 -
Utilizing Interfaces to Implement Drag & Drop
00:00 -
Drag Events & Reflecting the Current State in the UI
00:00 -
Adding a Droppable Area
00:00 -
Finishing Drag & Drop
00:00 -
Wrap Up
00:00
Modules & Namespaces
-
Module Introduction
00:00 -
Writing Module Code – Your Options
00:00 -
Working with Namespaces
00:00 -
Organizing Files & Folders
00:00 -
A Problem with Namespace Imports
00:00 -
Important: Use Chrome or Firefox
00:00 -
Using ES Modules
00:00 -
Understanding various Import & Export Syntaxes
00:00 -
How Does Code In Modules Execute?
00:00 -
Wrap Up
00:00
Using Webpack With TypeScript
-
Module Introduction
00:00 -
What is Webpack & Why do we need it?
00:00 -
Installing Webpack & Important Dependencies
00:00 -
Adding Entry & Output Configuration
05:58 -
Adding TypeScript Support with the ts-loader Package
00:00 -
Finishing the Setup & Adding webpack-dev-server
00:00 -
Adding a Production Workflow
00:00 -
Wrap Up
00:00
3rd Party Libraries & TypeScript
-
Module Introduction
00:00 -
Using JavaScript (!) Libraries with TypeScript
00:00 -
Using “declare” as a “Last Resort”
00:00 -
No Types Needed: class-transformer
00:00 -
TypeScript-embracing: class-validator
00:00 -
Wrap Up
00:00
Time to Practice Let’s Build a “Select & Share a Place ” App (incl.Google Maps)
-
Module Introduction
00:00 -
Project Setup
00:00 -
Getting User Input
00:00 -
Setting Up a Google API Key
00:00 -
Using Axios to Fetch Coordinates for an Entered Address
00:00 -
Rendering a Map with Google Maps (incl. Types!)
00:00
React.js & TypeScript
-
Module Introduction
00:00 -
Setting Up a React + TypeScript Project
00:00 -
How Do React + TypeScript Work Together?
00:00 -
Working with Props and Types for Props
00:00 -
Getting User Input with “refs”
00:00 -
Cross-Component Communication
03:58 -
Working with State & Types
00:00 -
Managing State Better
00:00 -
More Props & State Work
00:00 -
Adding Styling
00:00 -
Types for other React Features (e.g. Redux or Routing)
00:00 -
Wrap Up
00:00
Node.js + Express & TypeScript
-
Module Introduction
00:00 -
Executing TypeScript Code with Node.js
00:00 -
Setting up a Project
00:00 -
Finished Setup & Working with Types (in Node + Express Apps)
00:00 -
Adding Middleware & Types
00:00 -
Working with Controllers & Parsing Request Bodies
00:00 -
More CRUD Operations
00:00 -
Wrap Up
00:00
Course Roundup
-
Thanks for being part of the course!
00:00
Project
-
Assignment: Building a TypeScript Application
00:00