# Activity 10: Data Structure in Typescript **Research and Study Data Structures in Typescript** * Understand the commonly used data structures in TypeScript and how they are implemented. * Focus on how TypeScript’s strong typing system enhances the use of data structures. **Explain Each Data Structure in TypeScript:** For each data structure, provide the following details: * **Definition**: A brief explanation of the data structure. * **Key Features**: The important characteristics and behaviors of the data structure. * **Use Cases:** Where and why this data structure is typically used. * **Time Complexity:** Analyze the performance of each data structure (Big-O notation) for common operations like insert, delete, and search. * **Example Code in TypeScript:** Provide a TypeScript code snippet demonstrating how to use each data structure. **Data Structures to Cover:** **Arrays:** Explain how arrays are used in TypeScript. * Arrays in TypeScript are used to store multiple values of the same type in a single variable. They are similar to arrays in JavaScript but with the added benefit of TypeScript’s strong typing system, which helps catch errors at compile time. Provide examples of operations like adding, removing, and accessing elements. **Accessing Elements** * → You can access individual elements in an array using their index, starting from 0 for the first element. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390245236/95c092ee-72a5-442f-8b87-cf6783ad8600.png align="center") **Adding Elements** * You can add elements to the end of an array using the  push()  method. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390324903/4fc37939-0a09-4301-a54a-64d694aa8ca2.png align="center") **Removing Elements** * You can remove the last element of an array using the  pop()  method. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390367090/0a4cb761-9b95-4666-b6c5-fe1116a01592.png align="center") **Declaration and Initialization** * You can declare an array in TypeScript using the following syntax: * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390415157/fc6d36e3-18e6-45f8-b745-8c8bece8ef04.png align="center") arrayName  is the name of the array,  dataType  specifies the type of elements it will hold, and  element1 ,  element2 , etc. are the initial values of the array. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390442880/e6c54b86-ec0e-4cd7-ba97-1e66c9f78e4a.png align="center") **Removing Elements at Specific Index** * You can remove an element at a specific index using the  splice()  method. The  splice()  method takes two arguments: the starting index and the number of elements to remove. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390477862/1bfe61da-97a0-4332-97bd-12d3c3e75fcd.png align="center") **Inserting Elements at Specific Index** * You can insert an element at a specific index using the  splice()  method. The  splice()  method takes three arguments: the starting index, the number of elements to remove (0 in this case), and the element to insert. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390519292/0f3e0513-5c48-4df6-a4c7-092aaa8ed552.png align="center") **Iterating Through Arrays** * You can iterate through the elements of an array using a  for  loop. **Example:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390574817/2928fd95-59fd-4e1c-9c61-95517461fd07.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390637801/a7181d45-2f36-4ec4-8b06-1258f4634f46.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390599943/cc82d9dd-812f-432d-b852-9d6c00c9ac58.png align="center") **Tuple:** Explain how dynamic arrays can be created and managed in TypeScript * Tuples in TypeScript are a special type of array that allows you to store a fixed number of elements where the types of each element are known. Unlike regular arrays, which can hold any number of elements of the same type, tuples can hold a specific number of elements with different types. Provide an example of defining and accessing tuple elements. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390694492/f9b79aa7-4427-4f88-af38-ae1fd54e9acf.png align="center") This example illustrates how to define and access tuple elements in TypeScript Defining: The tuple  employee  is defined to hold three elements: a string for the name, a number for the ID, and a boolean for the status. Accessing: Elements are accessed by their index, starting from 0. Type Safety: TypeScript enforces type safety by preventing attempts to access elements beyond the tuple's length or assign values of incorrect types. **ArrayList (Dynamic Arrays):** Explain how dynamic arrays can be created and managed in TypeScript * Dynamic arrays in TypeScript, much like in JavaScript, can grow or shrink in size during runtime. This flexibility allows you to add or remove elements as needed without worrying about the array’s initial size. Using the  push()  and  pop()  Methods * push() : This method adds an element to the end of the array. * pop() : This method removes and returns the last element of the array. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390832542/48e56e7d-2fd0-4933-9cfa-e4708562d8e5.png align="center") Using the  unshift()  and  shift()  Methods * unshift() : This method adds an element to the beginning of the array. * shift() : This method removes and returns the first element of the array. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390919003/ccc9c820-c3e4-4024-ab95-c94be7b743d9.png align="center") Using the  splice()  Method * splice() : This method allows you to insert, remove, or replace elements at specific indices within the array. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727390959967/57096081-748d-4df6-a04e-4a81e1803c6b.png align="center") Using Array Destructuring * You can use array destructuring to create new arrays with selected elements from an existing array. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727391013272/e626c837-6665-4c6c-a554-3499d1620438.png align="center") Using the  concat()  Method * concat() : This method combines two or more arrays into a new array. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727391055130/9831f7cc-3749-495d-a45d-0c0b9e568407.png align="center") Using Spread Syntax * Spread syntax ( ... ) allows you to expand an array into individual elements within another array. **Stack:** Define how to implement a stack in TypeScript using an array or a class. * A stack is a data structure that follows the Last In First Out (LIFO) principle, meaning the last element added to the stack is the first one to be removed. This is similar to a stack of plates where you can only take the top plate off first. **Stack Using an Array** You can implement a stack using an array in TypeScript.\\ ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400465463/ef3e99d5-6242-4ac2-9227-dba6203a3204.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400492154/6d8093dc-545d-44df-8168-e87e87691ebe.png align="center") **LIFO Principle** The Last In First Out (LIFO) principle means that the most recently added element is the first one to be removed. This is analogous to a stack of books where you can only take the top book off first. **Common Operations** **Push**: Adds an element to the top of the stack. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400523872/853fd8c7-6486-4710-a9e3-dd842a80122d.png align="center") **Pop**: Removes and returns the top element of the stack. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400552707/2a9ee4fc-6944-4cde-8c83-9e9aabaa29ed.png align="center") **Peek**: Returns the top element of the stack without removing it. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400580061/26121fb5-23f7-4bfd-a09a-8d680e93a360.png align="center") **Size**: Returns the number of elements in the stack. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400602186/0ccca986-af8b-4d5c-a299-f449558c6a09.png align="center") **IsEmpty**: Checks if the stack is empty. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400629771/6957ad99-939e-4fa7-af11-b94286ee8f52.png align="center") * **Stack**: A data structure that follows the LIFO principle. * **LIFO**: Last In First Out, meaning the last element added is the first one to be removed. * **Common Operations**: `push`, `pop`, `peek`, `size`, and `isEmpty`. ## **Queue:** * Define how to implement a queue in TypeScript. * Explain the First In First Out (FIFO) principle and common operations (enqueue, dequeue). A queue is a data structure that follows the First In First Out (FIFO) principle, meaning the first element added to the queue is the first one to be removed. This is similar to a line of people waiting for a service, where the person who arrives first is served first. **Implementing a Queue Using a Class** You can implement a queue in TypeScript using a class. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400709326/d9d446e4-91f5-4987-85fa-b073233be981.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400740797/f6542850-862e-45c5-8a6a-bcdd89a673fc.png align="center") **FIFO Principle** The First In First Out (FIFO) principle means that the first element added to the queue is the first one to be removed. This is analogous to a line at a ticket counter where the person who arrives first is served first. **Common Operations** **Enqueue**: Adds an element to the end of the queue. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400774484/84529b09-f686-410c-8a11-3d526d41e276.png align="center") **Dequeue**: Removes and returns the first element of the queue. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400798826/5ca1b54d-d0e8-467e-880d-02d5efeae008.png align="center") **Peek**: Returns the first element of the queue without removing it. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400826938/d843eea8-132a-42f7-a2f3-f268c44fe6b1.png align="center") **Size**: Returns the number of elements in the queue. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400851541/8dc89797-c788-430e-9989-e752e9f3466c.png align="center") **IsEmpty**: Checks if the queue is empty. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400875577/e79b7807-074c-446d-a883-59d42ee0d541.png align="center") ## **LinkedList:** * Explain how to create a singly or doubly linked list in TypeScript using classes. * Provide an example of adding, removing, and traversing nodes. * **Linked List in TypeScript** A singly linked list is a linear data structure where each element (node) points to the next node in the sequence. Here’s how you can implement it using classes in TypeScript: #### Node Class First, define a `Node` class to represent each element in the list. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400914478/e672788e-394d-458b-b5f4-3b407d9806ad.png align="center") * **LinkedList Class** Next, define a `LinkedList` class to manage the nodes. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400967838/415fb996-fed5-41d3-b4f0-b02e10019367.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727400985824/5ec8cf59-3444-44fe-87bf-7d4b91023b31.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401006738/52d3607a-3512-4bec-b31d-b8dd917cdb77.png align="center") * **Creating a Doubly Linked List in TypeScript** A doubly linked list is similar to a singly linked list, but each node points to both the next and the previous node. #### Node Class Define a `Node` class for the doubly linked list. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401074495/a53dcd09-cf39-47a4-8faa-2083bfb5fb47.png align="center") * DoublyLinkedList Class Define a `DoublyLinkedList` class to manage the nodes. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401106709/15736466-5a75-4e0c-9429-0502dfd9fee7.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401123933/7a028e6b-3c7d-4aac-9bb1-b8492804a527.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401143560/4afecefa-c1c0-4f1d-a6b0-1f7b5bf3d6df.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401162714/92f414b1-bd2e-4614-b86f-73736200bca1.png align="center") * **Singly Linked List**: Each node points to the next node. * **Doubly Linked List**: Each node points to both the next and the previous node. * **Common Operations**: Adding (`append`), removing (`remove`), and traversing (`traverse`) nodes. ### **HashMap (or Object/Map):** * Define how to create a key-value pair data structure in TypeScript using Map or an object. * Provide examples of inserting, deleting, and searching for values by keys. * Creating a Key-Value Pair Data Structure in TypeScript In TypeScript, you can create key-value pair data structures using either an object or the `Map` class. Both approaches have their own use cases and advantages. **Using an Object** Objects in TypeScript can be used to store key-value pairs. Here’s how you can define and manipulate an object: * #### **Defining an Object** You can define an object with specific key-value pairs: * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401323606/c7a3c006-2d1e-44e0-8abc-068cce28b5e9.png align="center") * **Inserting Values** To add or update values in the object: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401373708/e2fe05c6-42ea-43d5-bb6b-9c189c699561.png align="center") * **Deleting Values** To delete a key-value pair from the object: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401403829/a8ed237b-0dd9-4551-a3c9-ae8774b4ef8c.png align="center") * **Searching for Values** To access a value by its key: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401425298/756b4593-a7d3-4cfb-8242-bde7ce6e8f13.png align="center") * **Using a Map** The `Map` class in TypeScript provides a more flexible way to handle key-value pairs, especially when keys are not strings. #### Defining a Map You can define a `Map` with specific types for keys and values: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401448847/b45897f9-afb7-4453-a8ce-9c3906c2de26.png align="center") * **Inserting Values** To add or update values in the map: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401482465/2faec48e-63a3-4a97-9aa2-8c99fe889f70.png align="center") #### **Deleting Values** To delete a key-value pair from the map: * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401503330/122083ed-ceed-460d-a9a3-9448da8e4c33.png align="center") * #### **Searching for Values** To access a value by its key: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401527793/85c96aa8-5d81-43ec-aefd-ed295e73ec6d.png align="center") **Example** Here’s a complete example demonstrating the use of both an object and a map: #### Using an Object ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401571440/7f68814b-ab30-4972-b3bf-78e2c88e4b86.png align="center") #### **Using a Map** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401598804/e7b47e99-8fc0-41b6-bfd6-791202bf1366.png align="center") #### **Objects**: Useful for simple key-value pairs where keys are strings. * **Maps**: Provide more flexibility, allowing keys of any type and maintaining insertion order. ## **Set:** * Explain how to create a Set to store unique elements. * Show how to add, remove, and check for elements in a set. * A `Set` in TypeScript is a collection of unique elements. Unlike arrays, sets automatically remove duplicate values, ensuring that all elements are unique. **Creating a Set** You can create a set using the `Set` constructor: * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401656539/afdd8dcf-d592-4933-b0d9-87478ac5dfb7.png align="center") * **Adding Elements** To add elements to a set, use the `add` method: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401678309/aeea50ae-0414-4c49-a4db-876117912a8c.png align="center") * **Removing Elements** To remove elements from a set, use the `delete` method: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401697097/8183c089-8cb3-4556-a859-b1a0338f7fca.png align="center") * **Checking for Elements** To check if a set contains a specific element, use the `has` method: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401719726/0f15e0f7-bdb2-4aa6-9ead-56793661e1af.png align="center") * **Example** Here’s a complete example demonstrating how to create a set, add elements, remove elements, and check for elements: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401747939/b400abc9-9896-43b6-ae86-80dc2a4b1fdd.png align="center") * **Set**: A collection of unique elements. * **Add Elements**: Use the `add` method. * **Remove Elements**: Use the `delete` method. * **Check for Elements**: Use the `has` method. * ## **Tree:** * Explain how binary trees or binary search trees (BST) can be implemented in TypeScript. * Provide an example showing how to insert nodes, traverse the tree, and search for elements. * **Implementing a Binary Search Tree (BST) in TypeScript** A Binary Search Tree (BST) is a node-based data structure where each node has at most two children, referred to as the left child and the right child. For a BST, the left child node’s value is always less than the parent node’s value, and the right child node’s value is always greater. * **Node Class** First, let’s define a `TreeNode` class to represent each node in the tree. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401831616/de11c46c-3a25-44da-802e-b88047fe849f.png align="center") **BinarySearchTree Class** Next, we define the `BinarySearchTree` class to manage the nodes. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401866838/ea16879b-5825-426b-941e-428240b1a29e.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401886409/c6ed1e3c-40cc-4da1-93b9-6681f4d7d019.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401902248/a6f49e8e-21f0-4440-b053-2f35d0855f6d.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401919388/57254a6a-88a4-4b19-bc5e-e33684fcedbd.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727401931638/658e0056-f5a7-451a-b7ff-ef8a2cb59185.png align="center") **Explanation** 1. **Node Class**: Defines the structure of a tree node with a value, a left child, and a right child. 2. **BinarySearchTree Class**: Manages the BST operations: * **Insert**: Adds a new node to the tree while maintaining the BST properties. * **In-Order Traversal**: Visits nodes in ascending order (left, root, right). * **Search**: Finds a node with a specific value. ## **Deliverables:** * A detailed explanation of each data structure with TypeScript examples. * Code snippets for each data structure to demonstrate their usage. **Arrays** **Explanation**: Arrays are used to store multiple values of the same type in a single variable. They are the most basic data structure in TypeScript. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402010967/b03f816e-4f2a-4935-b54b-a48ebfb017a4.png align="center") **Tuples** **Explanation**: Tuples are a special type of array that allows you to store a fixed number of elements where the types of each element are known. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402038621/14348386-8984-40f8-8590-6380e8b1039d.png align="center") **ArrayList (Dynamic Arrays)** **Explanation**: Dynamic arrays can grow or shrink in size during runtime. They allow you to add or remove elements as needed. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402068363/8bb53ddf-8acf-4f2a-b5ea-1ea05eab5768.png align="center") ### **Stack** **Explanation**: A stack follows the Last In First Out (LIFO) principle. The last element added is the first one to be removed. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402099567/3286d6fe-6b80-4640-9692-0d268f82cadc.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402115780/5e491de0-e956-48cd-ac7b-2e278831f4e7.png align="center") **Queue** **Explanation**: A queue follows the First In First Out (FIFO) principle. The first element added is the first one to be removed. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402138908/33d5e5bc-7e7a-4c70-b70c-6d88bc13585d.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402159675/5780e137-17d8-46e1-9f9b-dd60580587dc.png align="center") **LinkedList** **Explanation**: A linked list consists of nodes where each node contains a value and a reference to the next node. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402201499/4dc5a620-e784-4ea6-a6a1-24820a3d83da.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402225417/13f156ed-6d85-4cf9-a84a-160720323626.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402239562/127bb7ca-45bb-4206-9913-3d2d4c0b95b2.png align="center") **HashMap (or Object/Map)** **Explanation**: A key-value pair data structure that allows you to store and retrieve values using keys. **Using Object**: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402276753/164c85ff-b3ec-4efd-9ad8-d32a16d11c7d.png align="center") **Using Map:** ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402303949/e68cdfdb-c401-472d-b31d-dd7553e019ca.png align="center") **Set** **Explanation**: A collection of unique elements. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402330238/b884ddff-47d5-47a0-aadf-2422a6006cf8.png align="center") ### **Binary Search Tree (BST)** **Explanation**: A tree where each node has at most two children, with the left child’s value less than the parent and the right child’s value greater. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402358592/9dd0f15b-6e01-4bac-a26f-5b5a55aa46a4.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727402371875/22a148f8-7ecd-4a11-9b15-2335ba0f9e2f.png align="center")