Skip to Content
Module Outline

TypeScript and Advanced JavaScript

Module Summary

This module introduces TypeScript, an essential tool for promoting type safety in JavaScript applications. You will also learn advanced JavaScript concepts such as asynchronous programming using Promises and async/await, effective error handling, and making HTTP requests using the Fetch API. These skills are critical for building robust, scalable web applications. By the end of this module, learners will have a thorough understanding of TypeScript and advanced JavaScript techniques, enabling them to write clean, reliable code and handle asynchronous tasks with confidence.

Learning Objectives

By the end of this module, learners will be able to:

  • Explain and utilize TypeScript to enforce type safety in JavaScript code.
  • Apply asynchronous programming techniques using Promises and async/await.
  • Handle errors in JavaScript applications effectively using try/catch blocks and custom error handling.
  • Make HTTP requests using the Fetch API to retrieve and post data from/to servers.
  • Understand and apply key JavaScript concepts such as closures, the event loop, and callback functions.

Learning Outcomes

Upon completing this module, learners will be able to:

  • Write TypeScript code that enforces type safety and reduces common errors.
  • Refactor existing JavaScript codebases into TypeScript.
  • Manage asynchronous operations using Promises, async/await, and understand the implications of the JavaScript event loop.
  • Handle errors in code execution gracefully with custom error handling strategies.
  • Fetch, display, and manipulate data from remote APIs using Fetch.

Module Outline

Lesson 1: Introduction to TypeScript and Type Safety

  • Time: 1.5 hours
  • Topics:
    • What is TypeScript?
    • Differences between TypeScript and JavaScript.
    • Basic TypeScript types: string, number, boolean, array, tuple, enum
  • Activities:
    • Create a TypeScript Project and Refactor JavaScript Code

Lesson 2: TypeScript Functions, Interfaces, and Type Aliases

  • Time: 2 hours
  • Topics:
    • Function annotations in TypeScript.
    • Interfaces to define object types.
    • Type aliases and union types.
  • Activities:
    • Build a function that calculates cart values using TypeScript interfaces.
    • Design interfaces for user profiles and manipulate them using TypeScript.

Lesson 3: Classes, Object-Oriented Programming, and Modules in TypeScript

  • Time: 2 hours
  • Topics:
    • TypeScript classes and object-oriented programming.
    • Access modifiers: public, private, protected.
    • Modules in TypeScript.
  • Activities:
    • Create an inventory system using classes.
    • Refactor class-based code for inheritance and implement modules.

Lab: TypeScript and Object-Oriented Programming

  • Time: 1.5 hours (asynchronous)
  • Task: Create a simple object-oriented program utilizing TypeScript.
  • Objective: Demonstrate the ability to use TypeScript with type annotations, interfaces, and object-oriented programming concepts.

Required Reading: Tooling for TypeScript and Object-Oriented Programming

  • Time: 30 minutes (asynchronous)
  • Topics:
    • TypeScript Compiler (tsc)
    • Visual Studio Code (VS Code)
    • ESLint
    • Prettier
    • Jest
    • Webpack

Lesson 4: TypeScript Generics and Advanced Types

  • Time: 2 hours
  • Topics:
    • Introduction to generics and their utility.
    • Advanced types: intersections, unions, and type guards.
  • Activities:
    • Create a generic stack data structure.
    • Discuss the use of generics and advanced types in web applications.

Lesson 5: Error Handling and Custom Errors

  • Time: 1.5 hours
  • Topics:
    • Handling errors in JavaScript with try/catch/finally.
    • Custom error handling.
    • Best practices for error handling.
  • Activities:
    • Write a function to handle various types of errors gracefully.
    • Discuss the use of custom error handling in large codebases.

Lesson 6: Asynchronous Programming with Promises

  • Time: 2 hours
  • Topics:
    • Introduction to asynchronous programming.
    • Promises: then, catch, finally.
    • Chaining Promises and error handling.
  • Activities:
    • Write a series of Promises simulating an API call sequence.
    • Compare synchronous vs. asynchronous code.

Lab: Promises and Error Handling Challenge

  • Time: 2 hours (asynchronous)
  • Task: Use the asynchronous API provided alongside Promises to create a small application, and implement error handling.
  • Objective: Demonstrate the ability to manage asynchronous operations using Promises and error handling.

Lesson 7: Async/Await and the JavaScript Event Loop

  • Time: 2 hours
  • Topics:
    • Refactoring Promises to async/await.
    • The JavaScript event loop and call stack.
    • Error handling in async/await.
  • Activities:
    • Refactor Promise-based code into async/await.
    • Create an asynchronous function that fetches data and handles errors.

Lesson 8: Using the Fetch API for HTTP Requests

  • Time: 2.5 hours
  • Topics:
    • Fetch API basics: GET and POST requests.
    • Handling JSON data from APIs.
    • Handling errors in network requests.
  • Activities:
    • Make GET requests to fetch and display data from an API.
    • Build a form that submits data to a server using POST.

Lesson 9: Closures, Higher-Order Functions, and Callbacks

  • Time: 1 hour
  • Topics:
    • JavaScript closures and scope.
    • Higher-order functions.
    • Using callbacks effectively.
  • Activities:
    • Create functions demonstrating closures and higher-order functions.
    • Discuss closures’ implications in real-world applications.

Final Assessments

Skills-Based Assessment (SBA)

  • Time: 5.5 hours
  • Format: Practical project
  • Activity: Build a TypeScript-based web application that fetches data from an API, processes it asynchronously, and handles errors effectively. Use advanced JavaScript concepts such as closures, higher-order functions, and error handling.
  • Deliverable: Submit the project via GitHub and provide a reflection on the use of TypeScript and advanced JavaScript techniques.

Knowledge-Based Assessment (KBA)

  • Time: 1.5 hours (asynchronous)
  • Format: 20-30 multiple-choice or short-answer questions
  • Coverage: TypeScript, Promises, async/await, error handling, Fetch API, closures, and higher-order functions.
  • Focus: Practical understanding of advanced TypeScript and JavaScript concepts through scenario-based questions and code snippets.
Lesson 1: Introduction to TypeScript and Type Safety