TypeScript Section 10 -Modules & Namespaces


Updated Mar 14th, 2022

Table of Contents

Chapter Details

Module Introduction

A lot of code all in one file is not what we want to do. So we write modular code again, import them in, and then use a build tool to combine them all.

Writing Module Code – Your Options

We have three options, 1.) we manually import into html, 2.) namespaces and file bundling 3.) ES6 import/export syntax (ES6 modules) with 3rd-party bundler like webpack.

Working with Namespaces

Add new “drag-drop-interfaces.ts” file and cut interfaces into the following code.

namespace App{}

These features are only available in this namespace.

So we add the “export” keyword in front of each interface.

Back in the “app.ts” file we import this namespace.

<reference path="drag-drop-interfaces.ts" />

namespace App {
  put everything into the namespace

“Namespaces” only exist in the TS world.

In the “dist” folder we will now se two files as a result.

Interfaces don’t exist in JS so if they are in the separate file it doens’t do much.

But what if we put something that does exist in JS in it’s own file.

We have to carry over connection by going to “tsconfig.json” file and setting “outFile” option but we must set “module” to “amd” as well.



This will allows us to update our “script” import tag to point to this bundle file.

Organizing Files & Folders

Put project state management code from “app.ts” file into “project-state.ts” file. Put all code in a namespace “App” and export what you need.

Note all namespaces in the individual files are using the name “App.”

Move decorator as well by putting in own file, and putting in namespace “App” and exporting what you need.

For 3 or 4 files this is okay, but from there we probably want to add subfolders.

Need to update paths now.

/// <reference path="decorators/decorator.ts" />

A Problem with Namespace Imports

Some individual files may need to import other individual files if there is code used there.

Important: Use Chrome or Firefox

Important: In the next lecture, we’ll use a feature which only works in modern browsers. Later in the course, we’ll find a way to make it work in older browsers as well, but for now make sure you are following along in Chrome or Firefox!

Using ES Modules

This is the recommended way to handle importing/exporting.

Clearly states what we import from which file. ES6 exists outside if TS. “export” is default JS syntax that exists in TS as well.

import { Draggable } from "../models/drag-drop.js"

We need the “.js” here for now.

In “tsconfig.js” change “module” from “amd” to “es2015” and make sure your “target” is set to “es6” or higher.

Modern browsers support this syntax but you need to tell them that you want to use it.

// in index.html

<script type="module" src="dist/app.js"></script>

In the “network” tab in the dev tools, you can see the files loaded in.

Understanding various Import & Export Syntaxes

Some variations on “import/export” syntax

Can group imports

import * as Validation from "../path"

In the file you need to use dot notation.

The alias thing is also a thing.

import {autobind as Autobind } from "../pathToAutobind" 

Default exports

export default

Tells JS this is the main export. Can have named exports in addition to the default but cannot have more than one default export.

When importing defaults exports you do not need curly braces.

Named exports are nice because you get auto-completion, enforce a clear naming pattern.

How Does Code In Modules Execute?

What happens when you import the same file multiple times? Imports run once when the file is imported for the first time.

Wrap Up

Use “ES Modules” over “namespaces” but it only works in modern browsers so to make this work in all browsers we will use a bundling tool like webpack.

In the “network” tab in the dev tools, you see a white box at beginning of the block showing the file being downloaded. This is a setup for each request.

Useful Resources & Links