TypeScript Modules and Namespaces - Exercises and Solutions

TypeScript Modules and Namespaces [9 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts. Go to the editor]

These exercises will help you practice using the TypeScript module system for organizing and sharing code in your applications and TypeScript namespaces, including basic namespaces, nested namespaces, splitting into files, exporting namespace content, and understanding declaration merging.

Module System (import/export):

1. Write a TypeScript module that exports two functions, add and subtract. add should accept two numbers and return their sum, while subtract should accept two numbers and return their difference. Import and use these functions in a separate TypeScript file to perform addition and subtraction operations.
Click me to see the solution

2. Write a TypeScript module that exports a class called Student with properties name and age. Import the Student class in another TypeScript file, create instances of Student, and display their information.  
Click me to see the solution

3. Write a TypeScript module that exports multiple functions and variables using named exports. Import specific named exports in a separate TypeScript file and use them.  
Click me to see the solution

4. Write a TypeScript module that exports a default function or class. Import the default export into another TypeScript file and use it to perform a task or create an instance. 
Click me to see the solution

5. Write two TypeScript modules that import from each other, creating a circular dependency. Show how TypeScript handles circular dependencies and uses the imported functions or classes.  
Click me to see the solution

Namespace Declarations:

6. Write a TypeScript namespace called MathUtility that contains functions for basic mathematical operations such as addition, subtraction, multiplication, and division. Write the functions inside the namespace and use them to perform operations.  
Click me to see the solution

7. Create a TypeScript namespace called Geometry and nest two sub-namespaces within it: Shapes and Utilities. Define classes for different geometric shapes (e.g., Circle, Rectangle) inside the Shapes namespace and utility functions (e.g., calculateArea, calculatePerimeter) inside the Utilities namespace. Demonstrate how to access these namespaces and use their contents.  
Click me to see the solution

8. Write a TypeScript namespace called Logger that contains a function logMessage. Export the Logger namespace and import it into a different TypeScript file to use the logMessage function for logging messages.  
Click me to see the solution

Error Propagation:

9. Write a TypeScript namespace called "UI" and declare an interface Button and a function createButton within it. In a separate TypeScript file, declare another interface Button and a function createButton within the same UI namespace. Show how TypeScript merges these declarations and allows you to access both sets of declarations in your code.  
Click me to see the solution

More to Come !

TypeScript Editor

See the Pen TypeScript by w3resource (@w3resource) on CodePen.

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.