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

Book Overview & Buying
Table Of Contents

Understanding TypeScript

By : Maximilian Schwarzmüller

Buy this Video

Understanding TypeScript

By: Maximilian Schwarzmüller

Buy this Video

Overview of this book

This course provides a structured journey through TypeScript, starting with its core concepts like type definitions, type inference, and how it enhances JavaScript. You’ll set up a development environment, compile TypeScript to JavaScript, and configure TypeScript projects. The curriculum introduces functions, arrays, objects, and advanced type features such as union and literal types, equipping you with a solid foundation. As you progress, you’ll explore object-oriented programming with TypeScript, mastering classes, interfaces, inheritance, and access modifiers. You’ll work with advanced type manipulations, including generics, mapped types, and utility types, to write cleaner and scalable code. The course also covers TypeScript’s integration with JavaScript frameworks like React and Node.js, along with handling third-party libraries, decorators, and debugging strategies. By the end, you’ll have built real-world projects, including a drag-and-drop tool and a full-stack application. You’ll configure TypeScript with Webpack, Vite, and other build tools, ensuring an efficient workflow. This course will equip you with the knowledge to implement TypeScript professionally, improving code maintainability and scalability while enhancing your development skills.

Getting Started

Introduction

Welcome to the Course

What Is TypeScript?

Why Would You Use TypeScript?

Compiling TypeScript to JavaScript

Editor & Project Setup

About the Course

How to Get the Most Out of This Course

TypeScript Basics & Basic Types

Module Introduction

Project Setup

Working with Types & Exploring Built-in Types

Vanilla JavaScript Has Types, Too!

Type Inference vs Type Assignment

Assigning Types to Function Parameters

The "any" Type

Understanding Union Types

Arrays & Types

Advanced Array Types

A First Glimpse at Generic Types - Alternative Array Type Declaration

Making Sense of Tuples

Object Types

Tricky: The "Must Not Be Null" Type

Flexible Objects with the Record Type

Working with Enums

Being Specific with Literal Types

Type Aliases & Custom Types

Function Return Value Types

The "void" Type

The "never" Type

Functions as Types

null & undefined - Special Types

Inferred null & A First Look at Type Narrowing

Forced "Not Null" and Optional Chaining

Type Casting

The "unknown" Type

Optional Values & TypeScript

Nullish Coalescing

The TypeScript Compiler

Module Introduction

TypeScript Project Setup & Creating a tsconfig.json File

Exploring tsconfig Options: Target & Libs

Controlling File Input & Emission

Configuring Type Checking

Compiling with tsconfig

Using TypeScript's Watch Mode

Installing Type Packages

TypeScript Essentials Demo Project

Module Introduction

Getting Started & First Steps

Creating a First Custom Type

Defining a Function with a Union Type Return Value

Adding Application Logic

Connecting Functions & Passing Values

Compilation & Execution

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

Classes & Interfaces

Module Introduction

What Are Classes?

Creating a First Class

A Useful TypeScript Shortcut & Compiling to JavaScript

Making Sense of "public" and "private"

Marking Fields as "readonly"

Understanding Getters

Setting Values with Setters

Exploring Static Properties & Methods

Understanding Inheritance

The "protected" Modifier

Making Sense of Abstract Classes

Introducing Interfaces

Creating a First Interface

Interfaces as Object Types

Interfaces vs Type Aliases & Understanding Declaration Merging

Implementing Interfaces

Ensuring Base Types with Interfaces

Extending Interfaces

How Interfaces Get Compiled

Advanced Types

Module Introduction

Introducing Intersection Types

Revisiting Type Guards

Exploring Discriminated Unions

Guards with "instanceof"

"Outsourcing" Type Guards & Working with Type Predicates

The Case for Function Overloads

Using Function Overloads

Working with Index Types

Constant Types with "as const"

Revisiting the Record Type

The "satisfies" Keyword

Generic Types

Module Introduction

A Generic Type We Already Know

Understanding Generic Types

Creating & Using a Generic Type

Generic Functions & Inference

Working with Multiple Generic Parameters

Generics & Constraints

Constraints & Multiple Generic Types

Working with Generic Classes & Interfaces

Summary

Classes & Generics - Demo Project

Module Introduction

What Is a Linked List?

Creating List & Node Classes

Making the Class Generic

Adding an "add" Method

Adding Items More Efficiently

Accessing the Data & Compiling + Running the Code

Finishing the Linked List

Deriving Types from Types

Module Introduction

Using "typeof"

"typeof" & A More Useful Example

Extracting Keys with "keyof"

"keyof" & A More Useful Example

Understanding Indexed Access Types

Accessing Array Elements with Indexed Access Types

Introducing Mapped Types

Readonly Types & Optional Mapping

Exploring Template Literal Types

Introducing Conditional Types

Conditional Types - Another Example

Making Sense of the "infer" Keyword

TypeScript's Got You Covered: Built-in Utility Types

Decorators

Module Introduction

What Are Decorators? And ECMAScript Decorators vs Experimental Decorators

Exploring Different Types of Decorators

Building a First Decorator

Building a Class Decorator That Edits a Class

Understanding Decorator Code Execution Order

Creating a Method Decorator

Using Decorators to Solve a Common Problem

Implementing a Decorator-Based Solution: autobind

Replacing Methods with Decorators

Introducing the Field Decorator

Building Configurable Decorators with Factories

Onwards to Experimental Decorators

Experimental 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 Decorators

Other Decorator Return Types

Example: Creating an "Autobind" Decorator

Validation with Decorators - First Steps

Validation with Decorators - Finished

Wrap Up

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 Reusable 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

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?

Understanding "type" Imports

Wrap Up

Creating & Running TypeScript Projects with Vite

Module Introduction

The Problem with the TypeScript Compiler

Building with Webpack or ESBuild

Introducing Vite

Using Vite

Installing TypeScript on a Per-Project Basis

Making Sense of .d.ts Files

Importing Non-TS Files

Wrap Up

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

3rd Party Libraries & TypeScript

Module Introduction

Facing Problems with JS Libraries in TS Projects

Bridging the Gap with @types Packages

Exploring .d.ts Files

There Are Libraries with Great TypeScript Support!

Exploring Zod as a TypeScript-First Library

Defining a More Complex Zod Schema

Runtime vs Compile-Time Types with Zod

Time to Practice! Let's Build a "Select & Share a Place" App

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

React.js & TypeScript

Module Introduction

Creating a React + TypeScript Project

Typing Components & Props

Using Components & Props

TypeScript, The Special "children" Prop & Optional Props

Adding Another Component with Props

An Alternative Component Function Type Syntax

Working with State & TypeScript

Passing Functions as Props

Handling Form Submission

Using Refs with TypeScript

More Function Passing & State Updating

Wrap Up

Node.js & TypeScript

Module Introduction

Node + TypeScript - You Have Multiple Options

Project Setup & Configuration

Adding Node.js Types & Running a Basic Server

Adding & Using Express.js

Managing Data With Help of TypeScript

Adding & Testing a First Route

Finishing the Basic App

Native Node.js TypeScript Support Without Compilation

Type Stripping vs Type Transformation

Considering Alternative Runtimes

Course Roundup

Roundup & Next Steps

Understanding TypeScript

By : Maximilian Schwarzmüller

Understanding TypeScript

By: Maximilian Schwarzmüller

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access