Understanding TypeScript - 2021 Edition

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!