Guided: Manipulate the DOM Safely with TypeScript Type Assertions

Welcome to this hands-on lab where you’ll learn to manipulate the Document Object Model (DOM) safely using TypeScript’s type assertions!

The DOM is a programming interface that represents your web page’s structure, allowing you to dynamically update its content and appearance.

In this lab, you’ll build a to-do list app, mastering how to create elements, handle user interactions, and enhance accessibility—all while leveraging TypeScript’s type safety to prevent errors.

DOM manipulation is a cornerstone of interactive web development. Without it, your web pages would be static, unable to respond to user actions like adding tasks.

TypeScript enhances this process by catching mistakes early through static type checking. Type assertions let you specify an element’s exact type (for example, HTMLInputElement instead of just HTMLElement), ensuring you can access its properties safely.

This lab will teach you these skills step-by-step, making your code both powerful and reliable.

info> If you get stuck, you can check the solutions folder for the solution file that corresponds to any given task.

You can launch the app at anytime during the lab by doing the following:

1. Click the Run button at the bottom right of the Terminal.
2. Then view the web page by clicking this link to the Angular website: {{localhost:3000}}
   • You can also view the webpage by clicking the Web Browser tab's Refresh button once the app is running. It may take a moment for the page to load.

Before manipulating the DOM, you need a solid foundation.

This step focuses on configuring your TypeScript environment for DOM work and setting up the initial structure, enabling your code to interact with the web page. A proper setup is critical because it ensures TypeScript can compile and access DOM types, preparing you for dynamic manipulation.

You’ll configure a TypeScript module, define the task data model, and initialize the HTML structure. These tasks mimic real-world web development workflows, setting the stage for an interactive app. When working in a browser environment, it's best practice to ensure that you don't interact with DOM elements until the webpage is loaded. Hooking into the DOMContentLoaded event is one way that you can do this safely. Establish a type-safe data structure for tasks to support DOM rendering. Defining TypeScript interfaces is one way to ensure that your custom data structures are typed. It's time to build the app's UI dynamically with TypeScript.

You can use TypeScript to create and append DOM elements in a type-safe manner via type assertions. Type assertions of the form element as HTMLInputElement let you narrow the more generic HTMLElement type that is returned from the different DOM query selection APIs.

Now you’ll start shaping the to-do list by rendering tasks and preparing for interactivity.

This step teaches you to create and append DOM elements safely using TypeScript, focusing on type-safe properties and attributes. Rendering elements dynamically is essential for displaying user data like tasks in a list.

You’ll create a function to render tasks, leveraging the Task interface to ensure type safety when manipulating the DOM. There are often times when you want to add a custom attribute to an HTMLElement.

In HTML, this is done via data-* attributes.

In TypeScript, you can access these custom data attributes using the dataset property. This property returns a DOMStringMap object. For example, to access the data-id attribute on an <li> element, you might write the following code: li.dataset.id."

Every element also has a handy classList property that can be used to add and remove CSS classes to/from them. Now it's time to allow users to mark tasks as completed using checkboxes.

You will do this via toggling the completed class on and off whenever the checkbox element's change event listener is executed.

The addEventListener method that exists on all HTML elements is how you can listen in on certain events and execute a function appropriately. For example:

 checkbox.addEventListener('change', () => {
 
 });
```` Now you can add a button to remove completed tasks. 

You can use  TypeScript to query and remove DOM elements with type-safe selectors like `querySelectorAll`, which can be used to find a list of elements that match a given CSS selector. 

The `querySelectorAll` function on an HTML element returns a `NodeListOf<Element>` type. You can then use `forEach` on this list to iterate over each element and call its `remove` method.

With the UI in place, you’ll make the app interactive by handling user inputs.

This step covers selecting elements, processing user events, and updating the DOM dynamically—key skills for responsive web apps. TypeScript’s type assertions ensure you access element properties and handle events safely.

These tasks enable users to add tasks, mark them as completed, and clear completed tasks, bringing the to-do list to life. Now, you can tie your custom Task data model into your DOM manipulation code by enabling users to add tasks through the input field.

You can do this by adding a click event listener onto the add-button element. This click event listener should use your Task interface to create a task.

Enhance the app with advanced features to improve usability and accessibility.

This step focuses on dynamic UI updates, accessibility attributes, and alternative input methods, using TypeScript for type-safe DOM manipulation. These enhancements make the app more inclusive and user-friendly, a hallmark of professional web development.

You’ll add accessibility features, prevent invalid inputs, and support keyboard interactions, polishing the to-do list app. It's important to improve accessibility for screen readers. You can do this in a type-safe manner with TypeScript via the setAttribute method that exists on all HTML elements. Handling edge cases is important when working with forms in order to prevent inconsistent UI states. You can use TypeScript to monitor input changes and update button state. Now you can display the number of tasks in the heading for user feedback.

The textContent property on the HTMLHeadingElement TypeScript type is a great means by which you can achieve this. The DOM is an event-based environment. TypeScript allows you to handle events, even keyboard events, in a type-safe way.

Fantastic work—you’ve built a to-do list app with TypeScript and safe DOM manipulation!

This lab has given you hands-on experience selecting elements, modifying them, and handling user input, all while ensuring type safety with assertions. You’re now equipped for real-world web development tasks.

You’ve learned how to:

• Safely select DOM elements using type assertions
• Modify properties like text content and class names
• Handle forms to process user input
• Check for missing elements to make your code more robust

These skills are the foundation of interactive web apps.

Next, try enhancing your app! Add a delete button for tasks, style completed items with a class, or explore local storage to save tasks. Dive deeper into TypeScript with interfaces for task data or check out more web development labs. Your journey continues!