CourseFlix

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

Academind Pro thumbnail

Academind Pro is the premium tier of Academind, the education platform run by Maximilian Schwarzmüller and Manuel Lorenz. Maximilian is one of the most-watched programming instructors in the world, with over 2 million Udemy students across his React, Angular, Node.js, and TypeScript courses.

The free Academind YouTube channel covers JavaScript fundamentals; the paid Academind Pro membership ships in-depth bootcamps that go beyond what fits in single Udemy courses. The flagship offerings include the React, Angular, and Vue complete guides, plus full-stack courses combining frontend with Node.js, MongoDB, and Firebase backends. Maximilian's teaching style emphasizes building complete projects rather than isolated feature demos.

udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

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

  • TypeScript Masterclass thumbnail

    TypeScript Masterclass

    Sources: Net Ninja
    TypeScript is a strongly typed programming language built on top of JavaScript, with additional features added in - primarily the ability to add types to values It provides a lot…
    5 hours 21 minutes 53 seconds 5 / 5
  • React & TypeScript Chrome Extension Development [2021] thumbnail

    React & TypeScript Chrome Extension Development [2021]

    Sources: udemy
    Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on bu
    8 hours 52 minutes 35 seconds
  • Build a Notion Clone with React and TypeScript thumbnail

    Build a Notion Clone with React and TypeScript

    Sources: zerotomastery.io
    Master React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a
    7 hours 57 minutes 47 seconds 5 / 5
  • TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL thumbnail

    TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

    Sources: fullstack.io
    Learn to build a full app with React, TypeScript, Node, and GraphQL. You build features step by step and use clear patterns in a real project.
    30 hours 50 minutes 42 seconds 5 / 5
  • React and Typescript: Build a Portfolio Project thumbnailFree

    React and Typescript: Build a Portfolio Project

    Sources: udemy, Stephen Grider
    Kick off your learning experience with an introduction on how to use React and Typescript together. Not familiar with Typescript? No problem! A lightning fast - but comprehensive…
    29 hours 21 minutes 48 seconds 5 / 5
  • Fullstack React with Typescript thumbnail

    Fullstack React with Typescript

    Sources: fullstack.io
    Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by…
    10 hours 16 minutes 46 seconds 5 / 5