We don’t want all of our code in a single file. What we want to do is to write modular code which means splitting your code into modules. In this module we will learn about two options to organize code in multiple files.

Writing Module Code - Your Options

One option is to write code in multiple TS files and then combine the output JS files accordingly. This is an option but the issue here is that you have to manage all these imports manually which can be cumbersome and hard. And also lets say there is some types defined in file A and you want to use them in file B. It will not be easy specially for bigger projects. So, we have 2 options:

1. Namespaces & File Bundling: It is a TS feature, where you can add special code to use this feature. It allows you to group code together below a namespace and then import namespaces into other files. It also has this bundling feature which bundles all the other files into one file.

2. ES6 Imports/Exports also called ES6 modules: This is a feature from modern JS. We use the import/export syntax for this which is also supported by TS. You compile per file but you only need single <script> import.

   

   Now one important note here, with that we technically will end up with multiple files still and whilst we won't have to manage the imports manually, the script imports, we still have some disadvantages because of that because every file you're depending on needs to be downloaded separately which means more HTTP requests and so on and therefore you can bundle files together to work on multiple files during development but ship a single file for production but you need third-party tools for that, for example Webpack.

   So for now let's use these two approaches in their basic form and let's see how we can improve our code by splitting it across multiple files.

   Working with Namespaces

   We will do changes and split our drag and drop project: 9. Practice Time: “Drag & Drop” Project into multiple files.

   First lets move our Draggable and DropTarget interfaces to another file:

Now, lets use namespaces here:

You can put anything like classes, interfaces, custom types, etc into a namespace. Here, note on line 3 and line 7 we are adding an export statement this will export a feature from namespace. This is needed because by default the things inside the namespace will be valid only inside it.

Now, lets import this namespace in the app.ts:

On top of the app.ts:

Note: Line 1. Here notice the /// it is not a comment. It has 3 slashes. This is a TS syntax which tells TS what to import. Now, lets use this in the app.ts classes. To use this what we will do is we will rename the namespace as App and we will also make a new namespace App in the app.ts which will contain all of the current code in app.ts:

app.ts:

Notice on line 3 we have put all the code of this file inside the App namespace. In the drag-drop-interfaces.ts:

Here you can see I have renamed the namespace to App. Now things should be better. Now, this is working and there is no error.

NOTE: Don’t forget to export from the namespace.

Similarly: