Understanding TypeScript – 2020 Edition

Table of Contents

Chapter 1 : Getting Started

Welcome to the Course!

Why 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

Chapter 2 : TypeScript Basics Basic Types

Module Introduction

Using Types

TypeScript Types vs JavaScript Types

Working with Numbers, Strings Booleans

Type Assignment Type Inference

Object Types

Arrays Types

Working with Tuples

Working with Enums

The ‘any’ Type

Union Types

Literal Types

Type Aliases / Custom Types

Function Return Types ‘void’

Functions as Types

Function Types Callbacks

The ‘unknown’ Type

The ’never’ Type

Wrap Up

Chapter 3 : The TypeScript Compiler and 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

Chapter 4 : 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

Chapter 5 : 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

Inheritance

Overriding Properties The ‘protected’ Modifier

Getters Setters

Static Methods Properties

Abstract Classes

Singletons Private Constructors

Classes - A Summary

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

Wrap Up

Chapter 6 : Advanced Types

Module Introduction

Intersection Types

More on Type Guards

Discriminated Unions

Type Casting

Index Properties

Function Overloads

Optional Chaining

Nullish Coalescing

Wrap Up

Chapter 7 : 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

Chapter 8 : 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

Wrap Up

Chapter 9 : 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

Chapter 10 : Modules Namespaces

Module Introduction

Writing Module Code - Your Options

Working with Namespaces

Organizing Files Folders

A Problem with Namespace Imports

Using ES Modules

Understanding various Import Export Syntaxes

How Does Code In Modules Execute?

Wrap Up

Chapter 11 : 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

Chapter 12 : 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

Chapter 13 : 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!)

Chapter 14 : 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

Chapter 15 : 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

Chapter 16 : Course Roundup

Roundup