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.
"module":"amd",
"outFile":"./dist/bundle.js"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 defaultTells 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