CF

Understanding TypeScript - 2023 Edition

14h 54m 54s
English
Paid

Learn what TypeScript is, why it really is a powerful Addition to JavaScript, what its Features are and how to use it! And whilst doing so, also understand what you're actually doing in your Angular 2+ Code.

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 used by Angular 2+ (Google), it's here to stay.

A Journey into the Future

As TypeScript code can be compiled to ES5, you'll be amazed by the many next-gen Features you can start using Today. Be it ES6 Features like Destructuring or Arrow Functions, Decorators, Generics and Interfaces or Modules - TypeScript has them all!

In this Course, we'll not stop after the Basics. You will learn about more advanced Features 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 2+ or plain JavaScript/ TypeScript Projects. A complete Module covers how to use TypeScript with ReactJS to benefit from its Features, there, too.

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 Exercises (and Solutions) in many of the Course Modules.

So much Content!

I'm not a Fan of these Courses which teach you the Basics and then leave you alone. In this Course you'll get insights into:

  • Types and how to use them

  • How the TypeScript Compiler works

  • ES6 Features in TypeScript

  • Classes in TypeScript

  • Namespaces and Modules

  • Interfaces

  • Generics

  • Decorators

  • How to integrate Third-Party JavaScript Libraries into your TypeScript Project

  • 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!

About the Authors

Academind Pro (Maximilian Schwarzmüller)

Academind Pro (Maximilian Schwarzmüller) thumbnail

Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.

The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.

The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 176 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 176 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to the Course!
All Course Lessons (176)
#Lesson TitleDurationAccess
1
Welcome to the Course! Demo
01:56
2
What Is TypeScript & Why Should You Use It?
04:34
3
Installing & Using TypeScript
13:23
4
TypeScript Advantages - Overview
03:06
5
Course Outline
04:18
6
How To Get The Most Out Of The Course
03:14
7
Setting Up A Code Editor / IDE
03:07
8
The Course Project Setup
07:21
9
Module Introduction
00:27
10
Using Types
10:21
11
TypeScript Types vs JavaScript Types
04:54
12
Working with Numbers, Strings & Booleans
05:44
13
Type Assignment & Type Inference
05:40
14
Object Types
07:33
15
Arrays Types
05:31
16
Working with Tuples
06:20
17
Working with Enums
07:06
18
The "any" Type
02:05
19
Union Types
06:31
20
Literal Types
07:55
21
Type Aliases / Custom Types
03:00
22
Function Return Types & "void"
07:26
23
Functions as Types
05:35
24
Function Types & Callbacks
04:24
25
The "unknown" Type
03:44
26
The "never" Type
04:11
27
Wrap Up
01:52
28
Module Introduction
00:47
29
Using "Watch Mode"
02:06
30
Compiling the Entire Project / Multiple Files
03:47
31
Including & Excluding Files
06:14
32
Setting a Compilation Target
04:05
33
Understanding TypeScript Core Libs
05:32
34
More Configuration & Compilation Options
01:42
35
Working with Source Maps
02:01
36
rootDir and outDir
05:32
37
Stop Emitting Files on Compilation Errors
02:52
38
Strict Compilation
11:05
39
Code Quality Options
04:23
40
Debugging with Visual Studio Code
04:21
41
Wrap Up
01:09
42
Module Introduction
02:22
43
"let" and "const"
06:34
44
Arrow Functions
04:51
45
Default Function Parameters
02:10
46
The Spread Operator (...)
04:33
47
Rest Parameters
05:06
48
Array & Object Destructuring
05:18
49
How Code Gets Compiled & Wrap Up
01:38
50
Module Introduction
00:55
51
What are Classes?
04:49
52
Creating a First Class
05:53
53
Compiling to JavaScript
03:03
54
Constructor Functions & The "this" Keyword
07:36
55
"private" and "public" Access Modifiers
05:53
56
Shorthand Initialization
02:59
57
"readonly" Properties
02:46
58
Inheritance
08:08
59
Overriding Properties & The "protected" Modifier
02:44
60
Getters & Setters
06:43
61
Static Methods & Properties
05:09
62
Abstract Classes
05:27
63
Singletons & Private Constructors
05:08
64
Classes - A Summary
01:44
65
A First Interface
04:27
66
Using Interfaces with Classes
06:11
67
Why Interfaces?
01:35
68
Readonly Interface Properties
01:36
69
Extending Interfaces
02:35
70
Interfaces as Function Types
02:42
71
Optional Parameters & Properties
04:12
72
Compiling Interfaces to JavaScript
01:59
73
Wrap Up
01:55
74
Module Introduction
00:59
75
Intersection Types
04:59
76
More on Type Guards
10:35
77
Discriminated Unions
06:12
78
Type Casting
07:46
79
Index Properties
06:36
80
Function Overloads
06:19
81
Optional Chaining
04:22
82
Nullish Coalescing
02:45
83
Wrap Up
01:21
84
Module Introduction
01:06
85
Built-in Generics & What are Generics?
08:45
86
Creating a Generic Function
08:34
87
Working with Constraints
03:40
88
Another Generic Function
05:36
89
The "keyof" Constraint
03:07
90
Generic Classes
08:55
91
A First Summary
01:23
92
Generic Utility Types
07:20
93
Generic Types vs Union Types
03:42
94
Module Introduction
01:35
95
A First Class Decorator
05:22
96
Working with Decorator Factories
02:03
97
Building More Useful Decorators
06:00
98
Adding Multiple Decorators
02:53
99
Diving into Property Decorators
05:01
100
Accessor & Parameter Decorators
05:37
101
When Do Decorators Execute?
03:12
102
Returning (and changing) a Class in a Class Decorator
08:38
103
Other Decorator Return Types
03:45
104
Example: Creating an "Autobind" Decorator
09:05
105
Validation with Decorators - First Steps
07:29
106
Validation with Decorators - Finished
12:15
107
Wrap Up
03:22
108
Module Introduction
00:55
109
Getting Started
05:21
110
DOM Element Selection & OOP Rendering
11:44
111
Interacting with DOM Elements
08:05
112
Creating & Using an "Autobind" Decorator
04:45
113
Fetching User Input
09:15
114
Creating a Re-Usable Validation Functionality
14:11
115
Rendering Project Lists
11:19
116
Managing Application State with Singletons
15:33
117
More Classes & Custom Types
07:12
118
Filtering Projects with Enums
06:00
119
Adding Inheritance & Generics
18:41
120
Rendering Project Items with a Class
11:59
121
Using a Getter
03:34
122
Utilizing Interfaces to Implement Drag & Drop
10:25
123
Drag Events & Reflecting the Current State in the UI
05:59
124
Adding a Droppable Area
08:09
125
Finishing Drag & Drop
06:45
126
Wrap Up
01:23
127
Module Introduction
01:12
128
Writing Module Code - Your Options
03:52
129
Working with Namespaces
10:51
130
Organizing Files & Folders
08:42
131
A Problem with Namespace Imports
02:53
132
Using ES Modules
12:22
133
Understanding various Import & Export Syntaxes
04:58
134
How Does Code In Modules Execute?
01:44
135
Wrap Up
03:15
136
Module Introduction
01:02
137
What is Webpack & Why do we need it?
05:33
138
Installing Webpack & Important Dependencies
03:56
139
Adding Entry & Output Configuration
05:58
140
Adding TypeScript Support with the ts-loader Package
07:01
141
Finishing the Setup & Adding webpack-dev-server
03:34
142
Adding a Production Workflow
04:05
143
Wrap Up
01:42
144
Module Introduction
01:19
145
Using JavaScript (!) Libraries with TypeScript
09:02
146
Using "declare" as a "Last Resort"
02:26
147
No Types Needed: class-transformer
08:29
148
TypeScript-embracing: class-validator
06:18
149
Wrap Up
01:58
150
Module Introduction
00:31
151
Project Setup
03:57
152
Getting User Input
02:42
153
Setting Up a Google API Key
02:49
154
Using Axios to Fetch Coordinates for an Entered Address
10:15
155
Rendering a Map with Google Maps (incl. Types!)
06:36
156
Module Introduction
01:06
157
Setting Up a React + TypeScript Project
05:22
158
How Do React + TypeScript Work Together?
03:47
159
Working with Props and Types for Props
06:59
160
Getting User Input with "refs"
07:04
161
Cross-Component Communication
03:59
162
Working with State & Types
04:29
163
Managing State Better
01:34
164
More Props & State Work
04:10
165
Adding Styling
01:03
166
Types for other React Features (e.g. Redux or Routing)
04:02
167
Wrap Up
01:35
168
Module Introduction
01:24
169
Executing TypeScript Code with Node.js
03:34
170
Setting up a Project
04:08
171
Finished Setup & Working with Types (in Node + Express Apps)
05:18
172
Adding Middleware & Types
05:46
173
Working with Controllers & Parsing Request Bodies
09:54
174
More CRUD Operations
10:21
175
Wrap Up
02:12
176
Thanks for being part of the course!
00:56
Unlock unlimited learning

Get instant access to all 175 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this TypeScript course?
The course is designed to take you from the very basics of TypeScript, so prior knowledge of JavaScript would be beneficial but not strictly required. The lessons start with installing and using TypeScript, setting up a code editor, and understanding its advantages. This foundational approach makes the course accessible even if you are new to TypeScript but have some programming background.
What projects will I be able to build by the end of the course?
By the end of the course, you will be able to use TypeScript in any of your projects, including ReactJS projects. The course covers setting up project environments, using types, and implementing TypeScript in various scenarios, enabling you to apply these skills to real-world applications and enhance your JavaScript projects with TypeScript features.
Who is the target audience for this TypeScript course?
This course is ideal for JavaScript developers who want to enhance their skills by learning TypeScript. It's also suitable for developers working with Angular 2+ or ReactJS who want to understand and implement TypeScript in their projects. The course aims to provide a comprehensive understanding of TypeScript, making it suitable for both beginners and experienced developers looking to expand their toolkit.
How does this TypeScript course compare to other programming language courses?
This course specifically focuses on TypeScript, a superset of JavaScript, emphasizing its integration with popular frameworks like Angular 2+ and ReactJS. Unlike general programming courses, it provides detailed explanations of TypeScript's unique features such as types, enums, and classes. The course also covers the practical application of TypeScript in real-world projects, distinguishing it from more theoretical programming courses.
Which specific tools and platforms are used in this course?
The course utilizes Visual Studio Code as the primary code editor for debugging and development. It includes lessons on setting up a code editor, using 'Watch Mode', and configuring TypeScript projects. The course also discusses compiling TypeScript to JavaScript and debugging techniques, ensuring a well-rounded understanding of the tooling ecosystem around TypeScript development.
What topics are not covered in this TypeScript course?
The course does not cover advanced JavaScript frameworks or libraries beyond TypeScript integration with Angular 2+ and ReactJS. It also doesn't delve into backend development or server-side TypeScript applications. The focus is primarily on learning TypeScript syntax, types, and its application in front-end development projects.
How much time should I expect to commit to complete this course?
The course has a total runtime of approximately 14 hours and 55 minutes, spread across 176 lessons. Given the comprehensive nature of the course, you should plan to dedicate additional time for practical exercises and reviewing material to reinforce learning. On average, setting aside a few weeks to a couple of months for completion, depending on your pace, would be reasonable.