Programming with TypeScript

TypeScript & JavaScript: An Introduction

JavaScript is the foundational programming language of the modern web and a key technology across many other domains, including backend services, desktop applications, mobile apps, cloud platforms, and tooling. In this module, we start with a brief introduction to JavaScript as the runtime language, and then show how TypeScript builds on top of it to make development more reliable, scalable, and maintainable.

• From Browser Scripts to Powering the Modern Software Stack: A Brief History of JavaScript
• ECMAScript: The Standard Behind JavaScript's Evolution
• From JavaScript to TypeScript: Adding Safety and Structure to a Dynamic Language

Setting Up a TypeScript Project

In this module, you'll learn how to create and configure a TypeScript project from scratch. We'll introduce the tools and configuration files required to compile TypeScript to JavaScript, explain how a typical project is structured, and set up a simple workflow for modern development.

• The TypeScript Compiler
• Understanding tsconfig.json
• Running TypeScript Code: Browser vs Node.js
• Editor Support and Developer Tools

Variables and Primitive Types

In this module, we'll introduce the fundamental building blocks of TypeScript: variables and primitive types. You'll see how values are stored and used in your programs, and how TypeScript helps guide you toward safer code. These concepts form the foundation for everything you'll build later.

• Declaring Variables
• Primitive Types and Operators
• Type Inference and Explicit Type Annotations
• Control Flow
• Functions and Typed Parameters
• Handling Null and Undefined
• Variable Scope and Lifetime
• Basic Error Handling
• LAB - Creating Your First Scripts

Objects and Data Modeling

Objects are the primary way to structure data in TypeScript. In this module, you'll learn how to create and work with objects, define clear data shapes, and use TypeScript to enforce consistency across your code. You'll also see how objects form the basis for modeling real-world concepts in applications.

• Creating and Using Objects
• Defining Data Shapes with Interfaces and Type Aliases
• Optional and Readonly Properties
• Value vs Reference Semantics
• The Object Type
• Standard Built-in Objects
• LAB - Modeling Real-World Data with Objects

Collections

Real-world applications work with collections of data. This module introduces arrays and common ways to work with them, such as iterating, filtering, and transforming data. You'll learn how TypeScript helps you work with collections safely, and we'll highlight the difference between mutable and immutable operations when manipulating data.

• Arrays and Array Types
• Iterating over Collections
• Common Collection Operations
• Mutability vs Immutability
• Tuples and Other Collection Types
• LAB - Implementing Collection Logic for a Todo App and a Webshop Cart

Functions in Depth

Functions are a core building block of TypeScript applications. JavaScript is often described as a multi-paradigm language with strong support for functional programming concepts. In this module, we'll explore functions in more detail and see how they can be used to structure logic in a clear and reusable way.

• Function Declarations and Expressions
• Typing Functions and Return Values
• Function Parameters
• Scope and Closures
• Introduction to Functional Programming Concepts
• LAB - Creating and Using Function

Classes and Object-Oriented Programming

In this module, you'll learn how to use classes to model both data and behavior, apply core object-oriented principles, and write structured and maintainable code using TypeScript. We'll also look at how TypeScript enhances classes with strong typing and access control.

• Defining Classes and Creating Instances
• Class and Static Members
• Constructors
• Access Modifiers
• Inheritance and Interfaces
• Prototypes: Classes are Syntactic Sugar
• LAB - Modeling Domain Logic with Classes

Advanced Typing and Type Reuse

TypeScript's advanced type system enables powerful abstraction and reuse. This module introduces more advanced typing concepts that help scale applications safely.

• Duck Typing
• Union and Literal Types
• Enumerations
• Generics
• Type Assertions
• Type Declarations
• Creating Types from Types

Asynchronous Programming

Modern applications are asynchronous by nature. In this module, you'll learn how JavaScript and TypeScript handle asynchronous operations, from callbacks and promises to async and await. We'll also introduce the event loop and callback/microtask queue to explain how asynchronous code is scheduled and executed, helping you better understand application behavior and performance.

• Synchronous vs Asynchronous Code: JavaScript is Single-Threaded
• Callbacks and Callback-Based APIs
• Promises and Promise Chaining
• Async and Await
• The Event Loop: Callback Queue and Microtask Queue
• Error Handling in Asynchronous Code
• LAB - Working with Asynchronous Operations

Communicating with External Services

Modern applications communicate with external systems in different ways. In this module, you'll learn how JavaScript and TypeScript interact with external services using both request-response and real-time communication patterns. We'll start with the Fetch API for HTTP-based communication and then introduce real-time, event-driven communication to show how applications stay responsive and up to date.

• Communication Patterns: Request-Response vs Real-Time
• HTTP Fundamentals
• Making Requests with the Fetch API
• Working with JSON Data
• Error Handling and Retries
• Introduction to Real-Time Communication
• Event-Driven Messaging (WebSockets)
• LAB - Communicating with External Services

JavaScript Runtime APIs

JavaScript is just a language. On its own, it cannot interact with the outside world. To build real applications, JavaScript runs inside a runtime environment, such as a web browser (what JS was initially made for) or Node.js. These runtimes provide additional APIs that allow JavaScript code to interact with users, the system, and the environment it runs in. You'll explore how TypeScript's type definitions help you interact with these APIs safely and confidently, whether you're responding to user interactions in the browser or working with system-level features in Node.js.

• Interacting with the Browser via the DOM
• Handling Browser Events
• Overview of Common Browser APIs
• Introduction to Node.js Runtime APIs
• LAB - Making an Interactive Website

Structuring a TypeScript Application

As applications grow, structure becomes critical. In this module, we'll look at how JavaScript and TypeScript applications have evolved over time, from simple script files loaded via a CDN to modular applications with a build step. You'll learn how modules work, how dependencies are managed, and how modern tooling fits into the TypeScript and JavaScript ecosystem.

• From Script Tags to Modules: A Brief History
• Understanding JavaScript Modules (import/export)
• Using Libraries
• Introduction to npm
• Why a Build Step Exists in Modern Applications
• TypeScript's Role in the Build Process
• LAB - Using Vite to Create a Project

Introduction to (Frontend) Frameworks and Full Stack TypeScript

In this final module, we'll look at how TypeScript is used in modern frontend frameworks and how the concepts from this course apply in real-world applications. We'll explore how TypeScript spans the full stack, from browser code to backend services, and how shared types improve consistency and maintainability across an application.

• Why Frameworks Exist
• TypeScript in Modern Frontend Frameworks
• Component-Based Architectures
• State and Data Flow
• TypeScript Beyond the Browser (Backend and APIs)
• LAB - Creating a FullStack Todo Application with React and Express (MERN Stack)