Understanding TypeScript

Boost your JavaScript projects with TypeScript: Learn all about core types, generics, TypeScript + React or Node & more!

4.66 (49596 reviews)
Udemy
platform
English
language
Web Development
category
Understanding TypeScript
237,022
students
15 hours
content
Jan 2024
last update
$109.99
regular price

What you will 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

Why take this 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!

Content

Getting Started

Welcome to the Course!
What Is TypeScript & Why Should You Use It?
Installing & Using TypeScript
TypeScript Advantages - Overview
Course Outline
How To Get The Most Out Of The Course
Setting Up A Code Editor / IDE
The Course Project Setup

TypeScript Basics & Basic Types

Module Introduction
Using Types
TypeScript Types vs JavaScript Types
Important: Type Casing
Working with Numbers, Strings & Booleans
Type Assignment & Type Inference
Understanding Types
Object Types
Nested Objects & Types
Arrays Types
Working with Tuples
Working with Enums
The "any" Type
Union Types
Literal Types
Type Aliases / Custom Types
Type Aliases & Object Types
Core Types & Concepts
Function Return Types & "void"
Functions as Types
Function Types & Callbacks
Functions & Types
The "unknown" Type
The "never" Type
Wrap Up
Useful Resources & Links

The TypeScript Compiler (and its Configuration)

Module Introduction
Using "Watch Mode"
Compiling the Entire Project / Multiple Files
Including & Excluding Files
Setting a Compilation Target
Understanding TypeScript Core Libs
More Configuration & Compilation Options
Working with Source Maps
rootDir and outDir
Stop Emitting Files on Compilation Errors
Strict Compilation
Code Quality Options
Debugging with Visual Studio Code
Wrap Up
Useful Resources & Links

Next-generation JavaScript & TypeScript

Module Introduction
"let" and "const"
Arrow Functions
Default Function Parameters
The Spread Operator (...)
Rest Parameters
Array & Object Destructuring
How Code Gets Compiled & Wrap Up
Useful Resources & Links

Classes & Interfaces

Module Introduction
What are Classes?
Creating a First Class
Compiling to JavaScript
Constructor Functions & The "this" Keyword
"private" and "public" Access Modifiers
Shorthand Initialization
"readonly" Properties
Class Basics
Inheritance
Overriding Properties & The "protected" Modifier
Getters & Setters
Static Methods & Properties
Abstract Classes
Singletons & Private Constructors
Classes - A Summary
Classes
A First Interface
Using Interfaces with Classes
Why Interfaces?
Readonly Interface Properties
Extending Interfaces
Interfaces as Function Types
Optional Parameters & Properties
Compiling Interfaces to JavaScript
Interfaces
Wrap Up
Useful Resources & Links

Advanced Types

Module Introduction
Intersection Types
More on Type Guards
Discriminated Unions
Type Casting
Index Properties
Function Overloads
Optional Chaining
Nullish Coalescing
Advanced Types
Wrap Up
Useful Resources & Links

Generics

Module Introduction
Built-in Generics & What are Generics?
Creating a Generic Function
Working with Constraints
Another Generic Function
The "keyof" Constraint
Generic Classes
A First Summary
Generic Utility Types
Generic Types vs Union Types
Generics
Useful Resources & Links

Decorators

Module Introduction
A First Class Decorator
Working with Decorator Factories
Building More Useful Decorators
Adding Multiple Decorators
Diving into Property Decorators
Accessor & Parameter Decorators
When Do Decorators Execute?
Returning (and changing) a Class in a Class Decorator
Other Decorator Return Types
Example: Creating an "Autobind" Decorator
Validation with Decorators - First Steps
Validation with Decorators - Finished
Fixing a Validator Bug
Wrap Up
Useful Resources & Links

Practice Time! Let's build a Drag & Drop Project

Module Introduction
Getting Started
DOM Element Selection & OOP Rendering
Interacting with DOM Elements
Creating & Using an "Autobind" Decorator
Fetching User Input
Creating a Re-Usable Validation Functionality
Rendering Project Lists
Managing Application State with Singletons
More Classes & Custom Types
Filtering Projects with Enums
Adding Inheritance & Generics
Rendering Project Items with a Class
Using a Getter
Utilizing Interfaces to Implement Drag & Drop
Drag Events & Reflecting the Current State in the UI
Adding a Droppable Area
Finishing Drag & Drop
Wrap Up
Useful Resources & Links

Modules & Namespaces

Module Introduction
Writing Module Code - Your Options
Working with Namespaces
Organizing Files & Folders
A Problem with Namespace Imports
Important: Use Chrome or Firefox
Using ES Modules
Understanding various Import & Export Syntaxes
How Does Code In Modules Execute?
Wrap Up
Useful Resources & Links

Using Webpack with TypeScript

Module Introduction
What is Webpack & Why do we need it?
Installing Webpack & Important Dependencies
Adding Entry & Output Configuration
Adding TypeScript Support with the ts-loader Package
Finishing the Setup & Adding webpack-dev-server
Adding a Production Workflow
Wrap Up
Useful Resources & Links

3rd Party Libraries & TypeScript

Module Introduction
Using JavaScript (!) Libraries with TypeScript
Using "declare" as a "Last Resort"
No Types Needed: class-transformer
TypeScript-embracing: class-validator
Wrap Up
Useful Resources & Links

Time to Practice! Let's build a "Select & Share a Place" App (incl. Google Maps)

Module Introduction
Project Setup
Getting User Input
Setting Up a Google API Key
Using Axios to Fetch Coordinates for an Entered Address
Rendering a Map with Google Maps (incl. Types!)
Working with Maps without a Credit Card
Useful Resources & Links

React.js & TypeScript

Module Introduction
Setting Up a React + TypeScript Project
How Do React + TypeScript Work Together?
Working with Props and Types for Props
Getting User Input with "refs"
Cross-Component Communication
Working with State & Types
Managing State Better
More Props & State Work
Adding Styling
Types for other React Features (e.g. Redux or Routing)
Wrap Up
Useful Resources & Links

Node.js + Express & TypeScript

Module Introduction
Executing TypeScript Code with Node.js
Setting up a Project
Finished Setup & Working with Types (in Node + Express Apps)
Adding Middleware & Types
Working with Controllers & Parsing Request Bodies
More CRUD Operations
Wrap Up
Useful Resources & Links

Course Roundup

Roundup

[LEGACY] Getting Started

What does [LEGACY] mean?
Course Introduction
What is TypeScript?
Join our Online Learning Community
Why TypeScript and How to use it?
Installing TypeScript
Using TypeScript
Setting up the Course Workspace
Asking Questions & Course Materials

[LEGACY] Using Types for a better Code

Introduction
Type Basics
Numbers & Booleans
Assigning Types Explicitly
Arrays and Types
Tuples
Enums
The "Any" Type
Understanding the created JavaScript Code
Using Types in Functions (Arguments & Return Values)
Functions as Types
Objects and Types
Example: Putting it all together in a Complex Object
Creating custom Types with Type Aliases
Allowing multiple Types with Union Types
Checking for Types during Runtime
The "never" Type (added with TypeScript 2.0)
Nullable Types (added with TypeScript 2.0)
Module Exercise: Problem
Module Exercise: Problem Code
Module Exercise: Solution
Module Summary

[LEGACY] Understanding the TypeScript Compiler

Introduction
How Code gets Compiled
Changing the Compiler Behavior on Errors
Debugging your TypeScript Code using Source Maps
Avoiding implicit "Any"
More Compiler Options
Compiler Improvements with TypeScript 2.0
Resource: Compiler Documentation
Module Summary

[LEGACY] TypeScript and ES6

Introduction
ES6 & TypeScript Compatibility
"Let" and "Const"
Block Scope
Arrow Functions
Arrow Functions - Variations
Functions and Default Parameters
The Spread Operator
The Rest Operator
Rest Parameters & Tuples
Destructuring Arrays
Destructuring Objects
Template Literals
Other ES6 Features
Module Exercise: Problem
Module Exercise: Solution
Module Summary

[LEGACY] Using Classes to create Objects

Introduction
Creating Classes and Class Properties
Class Methods and Access Modifiers
Inheritance
Inheritance and Constructors
Inheritance Wrap Up
Getters & Setters
Static Properties and Methods
Abstract Classes
Private Constructors & Singletons (added with TypeScript 2.0)
"readonly" Properties (added with TypeScript 2.0)
Module Exercise: Problem
Module Exercise: Solution
Module Summary

[LEGACY] Namespaces and Modules

Introduction
An Introduction to Namespaces
Namespaces and Multiple Files
Namespace Imports
More on Namespaces
Limitations of Namespaces
Modules
Use SystemJS 0.x
Loading Modules
Importing & Exporting Modules
Module Resolution
Namespaces vs Modules - Wrap Up
Module Summary

[LEGACY] Doing Contract Work with Interfaces

Introduction
The Basics about Interfaces
Interfaces and Properties
Interfaces and Methods
Using Interfaces with Classes
Interfaces and Function Types
Interface Inheritance
What happens once Interfaces get Compiled
Module Summary

[LEGACY] Generics

Introduction
Why and What?
Creating a Generic Function
A built-in Generic Type: Arrays
Generic Types and Arrays
Using Generic Types
Creating a Generic Class
Constraints
Using more than one Generic type
Module Exercise: Problem
Module Exercise: Solution
Module Summary

[LEGACY] Behind the Scenes with Decorators

Introduction
Creating a Class Decorator
Decorator Factories
Creating a useful Decorator
Using Multiple Decorators
A first Summary
Method Decorators
Property Decorators
Parameter Decorators
Module Summary

[LEGACY] Using JavaScript Libraries (like jQuery) with TypeScript

Introduction
Using jQuery
Declaring Variables
Understanding Declaration Files
Using Public Type Definitions
Wrap Up
Using the [LEGACY] Content
[LEGACY] Introduction
[LEGACY] Installing a Third-Party Library
[LEGACY] Importing the Library
[LEGACY] Translating JavaScript to TypeScript with TypeScript Definition Files
[LEGACY] Option 1: Manually download TypeScript Definition Files
[LEGACY]Option 2: Managing TypeScript Defintion Files with the "typings" Package
[LEGACY] Easier Type Management with TypeScript 2.0
[LEGACY] Module Summary

[LEGACY] TypeScript Workflows

Introduction
Using "tsc" and the tsconfig File
How TypeScript resolves Files using the tsconfig.json File
More on "tsc" and the tsconfig File
Adding TypeScript into a Gulp Workflow
Working with Webpack 4+
Adding TypeScript into a Webpack Workflow
Module Summary

[LEGACY] Example: Using TypeScript together with ReactJS

Introduction
Project Setup
Using PropTypes
Types & Class Components
Wrap Up
Using the [LEGACY] Content
[LEGACY] Introduction
[LEGACY] Setting up the Project & Adding React Packages
[LEGACY] Adding the ReactJS TypeScript Definition Files
[LEGACY] Installing Webpack
[LEGACY] Configuring Webpack
[LEGACY] Creating ReactJS Code - with TypeScript
[LEGACY] Configuring the TypeScript Compiler to work with ReactJS
[LEGACY] Using TypeScript 2.0 Type Management
[LEGACY] Module Summary

[LEGACY] After finishing this Course

Course Roundup
Further Resources
Bonus: More Content!

Screenshots

Understanding TypeScript - Screenshot_01Understanding TypeScript - Screenshot_02Understanding TypeScript - Screenshot_03Understanding TypeScript - Screenshot_04

Our review

--- ## Global Course Rating: 4.66 ### Pros: - **Comprehensive Content:** The course covers a wide range of TypeScript topics, ensuring that learners receive a thorough introduction to the language. - **Clear and Concise Explanations:** Many users appreciated the instructor's ability to explain complex concepts in a straightforward and easy-to-understand manner. - **Energetic and Engaging Teaching Style:** The instructor's energetic approach keeps learners interested and motivated throughout the course. - **High-Quality Instruction:** Positive feedback indicates that the instructor, Maximilian Schwarzmüller, is well-respected for his teaching abilities and the quality of his courses. - **Diverse Learning Resources:** The inclusion of examples and exercises helps reinforce learning and cater to different learning styles. - **Positive Impact on Learning Journey:** Several users reported that the knowledge gained from this course helped them overcome difficulties they encountered with other technologies like Angular. ### Cons: - **Pacing Concerns:** Some users felt that the instructor speaks too quickly, making it difficult to keep up and fully grasp the material, especially in certain exercise sections (e.g., chapters 9, 13, 14, and 15). - **Code Organization:** The code examples provided by the instructor are sometimes large and complex, which may not align with best practices and could be overwhelming for some learners. - **Language and Cultural Nuances:** There were mentions of language barriers and cultural differences affecting the learning experience, though it is noted that high-quality courses do exist from various regions, including India. - **Need for Updated Content:** Some users recommended updating the course to reflect the latest practices and technologies relevant for 2022/23. - **Accessibility Issues:** The suggestion to slow down video playback indicates that some learners might require more time to process the information presented at the original speed. ### General Feedback: - **Recommendation for Didactic Improvement:** It was suggested that for future courses, the instructor could take inspiration from other high-quality courses, like Jonas Schmedtmann's "The Complete JavaScript Course 2023: From Zero to Expert!", which are didactically better structured. - **Language and Support:** Despite some users mentioning language barriers, others expressed their appreciation for the instructor's courses and their ability to learn effectively from them, even with language support like auto-translated captions. - **Overall Satisfaction:** The overall sentiment towards the course is highly positive, with many learners finding it very helpful and a valuable resource for getting started with TypeScript. --- In conclusion, this TypeScript course by Maximilian Schwarzmüller receives a strong recommendation from most users who praised its comprehensive coverage of TypeScript, clear explanations, and engaging teaching style. While there are some areas for improvement regarding pacing and code organization, the course is generally well-regarded as an excellent introduction to TypeScript for learners at various levels of proficiency. It's important for future iterations of the course to address these concerns to enhance the learning experience for all users.

Coupons

DateDiscountStatus
7/19/201989% OFF
expired
12/17/202094% OFF
expired
6/15/202193% OFF
expired
10/31/202285% OFF
expired
11/15/202285% OFF
expired
1/23/202387% OFF
expired
8/13/202385% OFF
expired

Charts

Price

Understanding TypeScript - Price chart

Rating

Understanding TypeScript - Ratings chart

Enrollment distribution

Understanding TypeScript - Distribution chart

Related Topics

947098
udemy ID
9/1/2016
course created date
6/9/2019
course indexed date
Bot
course submited by