Home

All courses

Understanding TypeScript

Web Development

Typescript

Development

Understanding TypeScript

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

4.6

(56606)

275519 enrolled on this course

Last updated 11/2021

None

₹ 4999.0

₹ 6499.0

Buy Now

30-Day Money-Back Guarantee

Lessons

Quizzes

Duration

13 Hours

Skill level

Beginner

Language

English

Certificate

Yes

Full lifetime access

Yes

Description

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!
Who this course is for:
This Course is for every student who wants to extend his or her horizon beyond vanilla JavaScript
Everyone learning Angular should definitely understand how TypeScript works

What you'll 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

Requirements

You will need a copy of Adobe XD 2019 or above. A free trial can be downloaded from Adobe.
No previous design experience is needed.
No previous Adobe XD skills are needed.

Course Content

27 sections • 95 lectures

Expand All Sections

1-Getting Started

1.1-Welcome to the Course!

1.2-What Is TypeScript & Why Should You Use It?

1.3-Join Our Learning Community

1.4-Installing & Using TypeScript

1.5-TypeScript Advantages - Overview

1.6-Course Outline

1.7-How To Get The Most Out Of The Course

1.8-Setting Up A Code Editor / IDE

1.9-Course Setup

1.10-The Course Project Setup

2-TypeScript Basics & Basic Types

2.1-Module Introduction

2.2-Using Types

2.3-TypeScript Types vs JavaScript Types

2.4-Important: Type Casing

2.5-Working with Numbers, Strings & Booleans

2.6-Type Assignment & Type Inference

2.7-Understanding Types

2.8-Object Types

2.9-Nested Objects & Types

2.10-Arrays Types

2.11-Working with Tuples

2.12-Working with Enums

2.13-The "any" Type

2.14-Union Types

2.15-Literal Types

2.16-Type Aliases / Custom Types

2.17-Type Aliases & Object Types

2.18-Core Types & Concepts

2.19-Function Return Types & "void"

2.20-Functions as Types

2.21-Function Types & Callbacks

2.22-Functions & Types

2.23-The "unknown" Type

2.24-The "never" Type

2.25-Wrap Up

2.26-Useful Resources & Links

3-The TypeScript Compiler (and its Configuration)

3.1-Module Introduction

3.2-Using "Watch Mode"

3.3-Compiling the Entire Project / Multiple Files

3.4-Including & Excluding Files

3.5-Setting a Compilation Target

3.6-Understanding TypeScript Core Libs

3.7-More Configuration & Compilation Options

3.8-Working with Source Maps

3.9-rootDir and outDir

3.10-Stop Emitting Files on Compilation Errors

3.11-Strict Compilation

3.12-Code Quality Options

3.13-Debugging with Visual Studio Code

3.14-Wrap Up

3.15-Useful Resources & Links

4-Next-generation JavaScript & TypeScript

4.1-Module Introduction

4.2-"let" and "const"

4.3-Arrow Functions

4.4-Default Function Parameters

4.5-The Spread Operator (...)

4.6-Rest Parameters

4.7-Array & Object Destructuring

4.8-How Code Gets Compiled & Wrap Up

4.9-Useful Resources & Links

5-Classes & Interfaces

5.1-Module Introduction

5.2-What are Classes?

5.3-Creating a First Class

5.4-Compiling to JavaScript

5.5-Constructor Functions & The "this" Keyword

5.6-"private" and "public" Access Modifiers

5.7-Shorthand Initialization

5.8-"readonly" Properties

5.9-Class Basics

5.10-Inheritance

5.11-Overriding Properties & The "protected" Modifier

5.12-Getters & Setters

5.13-Static Methods & Properties

5.14-Abstract Classes

5.15-Singletons & Private Constructors

5.16-Classes - A Summary

5.17-Classes

5.18-A First Interface

5.19-Using Interfaces with Classes

5.20-Why Interfaces?

5.21-Readonly Interface Properties

5.22-Extending Interfaces

5.23-Interfaces as Function Types

5.24-Optional Parameters & Properties

5.25-Compiling Interfaces to JavaScript

5.26-Interfaces

5.27-Wrap Up

5.28-Useful Resources & Links

6-Advanced Types

6.1-Module Introduction

6.2-Intersection Types

6.3-More on Type Guards

6.4-Discriminated Unions

6.5-Type Casting

6.6-Index Properties

6.7-Function Overloads

6.8-Optional Chaining

6.9-Nullish Coalescing

6.10-Advanced Types

6.11-Wrap Up

6.12-Useful Resources & Links

7-Generics

7.1-Module Introduction

7.2-Built-in Generics & What are Generics?

7.3-Creating a Generic Function

7.4-Working with Constraints

7.5-Another Generic Function

7.6-The "keyof" Constraint

7.7-Generic Classes

7.8-A First Summary

7.9-Generic Utility Types

7.10-Generic Types vs Union Types

7.11-Generics

7.12-Useful Resources & Links

8-Decorators

8.1-Module Introduction

8.2-A First Class Decorator

8.3-Working with Decorator Factories

8.4-Building More Useful Decorators

8.5-Adding Multiple Decorators

8.6-Diving into Property Decorators

8.7-Accessor & Parameter Decorators

8.8-When Do Decorators Execute?

8.9-Returning (and changing) a Class in a Class Decorator

8.10-Other Decorator Return Types

8.11-Example: Creating an "Autobind" Decorator

8.12-Validation with Decorators - First Steps

8.13-Validation with Decorators - Finished

8.14-Fixing a Validator Bug

8.15-Wrap Up

8.16-Useful Resources & Links

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

9.1-Module Introduction

9.2-Getting Started

9.3-DOM Element Selection & OOP Rendering

9.4-Interacting with DOM Elements

9.5-Creating & Using an "Autobind" Decorator

9.6-Fetching User Input

9.7-Creating a Re-Usable Validation Functionality

9.8-Rendering Project Lists

9.9-Managing Application State with Singletons

9.10-More Classes & Custom Types

9.11-Filtering Projects with Enums

9.12-Adding Inheritance & Generics

9.13-Rendering Project Items with a Class

9.14-Using a Getter

9.15-Utilizing Interfaces to Implement Drag & Drop

9.16-Drag Events & Reflecting the Current State in the UI

9.17-Adding a Droppable Area

9.18-Finishing Drag & Drop

9.19-Wrap Up

9.20-Useful Resources & Links

10-Modules & Namespaces

10.1-Module Introduction

10.2-Writing Module Code - Your Options

10.3-Working with Namespaces

10.4-Organizing Files & Folders

10.5-A Problem with Namespace Imports

10.6-Important: Use Chrome or Firefox

10.7-Using ES Modules

10.8-Understanding various Import & Export Syntaxes

10.9-How Does Code In Modules Execute?

10.10-Wrap Up

10.11-Useful Resources & Links

11-Using Webpack with TypeScript

11.1-Module Introduction

11.2-What is Webpack & Why do we need it?

11.3-Installing Webpack & Important Dependencies

11.4-Adding Entry & Output Configuration

11.5-Adding TypeScript Support with the ts-loader Package

11.6-Adjust Webpack Config

11.7-Finishing the Setup & Adding webpack-dev-server

11.8-Adding a Production Workflow

11.9-Wrap Up

11.10-Useful Resources & Links

12-3rd Party Libraries & TypeScript

12.1-Module Introduction

12.2-Using JavaScript (!) Libraries with TypeScript

12.3-Using "declare" as a "Last Resort"

12.4-No Types Needed: class-transformer

12.5-TypeScript-embracing: class-validator

12.6-Wrap Up

12.7-Useful Resources & Links

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

13.1-Module Introduction

13.2-Project Setup

13.3-Getting User Input

13.4-Setting Up a Google API Key

13.5-Using Axios to Fetch Coordinates for an Entered Address

13.6-Rendering a Map with Google Maps (incl. Types!)

13.7-Working with Maps without a Credit Card

13.8-Useful Resources & Links

14-React.js & TypeScript

14.1-Module Introduction

14.2-Setting Up a React + TypeScript Project

14.3-How Do React + TypeScript Work Together?

14.4-Working with Props and Types for Props

14.5-Getting User Input with "refs"

14.6-Cross-Component Communication

14.7-Working with State & Types

14.8-Managing State Better

14.9-More Props & State Work

14.10-Adding Styling

14.11-Types for other React Features (e.g. Redux or Routing)

14.12-Wrap Up

14.13-Useful Resources & Links

15-Node.js + Express & TypeScript

15.1-Module Introduction

15.2-Executing TypeScript Code with Node.js

15.3-Setting up a Project

15.4-Finished Setup & Working with Types (in Node + Express Apps)

15.5-Adding Middleware & Types

15.6-Working with Controllers & Parsing Request Bodies

15.7-More CRUD Operations

15.8-Wrap Up

15.9-Useful Resources & Links

16-Course Roundup

16.1-Thanks for being part of the course!

Course Categories

Popular Courses

Understanding TypeScript

Description

What you'll learn

Requirements

Course Content

You May Like