\n\nA note about terminology:\nIt’s important to note that in TypeScript 1.5, the nomenclature has changed.\n“Internal modules” are now “namespaces”.\n“External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that
\nmodule X {is equivalent to the now-preferrednamespace X {).
This post outlines the various ways to organize your code using namespaces (previously “internal modules”) in TypeScript.\nAs we alluded in our note about terminology, “internal modules” are now referred to as “namespaces”.\nAdditionally, anywhere the module keyword was used when declaring an internal module, the namespace keyword can and should be used instead.\nThis avoids confusing new users by overloading them with similarly named terms.
Let’s start with the program we’ll be using as our example throughout this page.\nWe’ve written a small set of simplistic string validators, as you might write to check a user’s input on a form in a webpage or check the format of an externally-provided data file.
\n\ntsinterface StringValidator {\n isAcceptable(s: string): boolean;\n}\n\nlet lettersRegexp = /^[A-Za-z]+$/;\nlet numberRegexp = /^[0-9]+$/;\n\nclass LettersOnlyValidator implements StringValidator {\n isAcceptable(s: string) {\n return lettersRegexp.test(s);\n }\n}\n\nclass ZipCodeValidator implements StringValidator {\n isAcceptable(s: string) {\n return s.length === 5 && numberRegexp.test(s);\n }\n}\n\n// Some samples to try\nlet strings = [\"Hello\", \"98052\", \"101\"];\n\n// Validators to use\nlet validators: { [s: string]: StringValidator } = {};\nvalidators[\"ZIP code\"] = new ZipCodeValidator();\nvalidators[\"Letters only\"] = new LettersOnlyValidator();\n\n// Show whether each string passed each validator\nfor (let s of strings) {\n for (let name in validators) {\n let isMatch = validators[name].isAcceptable(s);\n console.log(`'${s}' ${isMatch ? \"matches\" : \"does not match\"} '${name}'.`);\n }\n}
As we add more validators, we’re going to want to have some kind of organization scheme so that we can keep track of our types and not worry about name collisions with other objects.\nInstead of putting lots of different names into the global namespace, let’s wrap up our objects into a namespace.
\nIn this example, we’ll move all validator-related entities into a namespace called Validation.\nBecause we want the interfaces and classes here to be visible outside the namespace, we preface them with export.\nConversely, the variables lettersRegexp and numberRegexp are implementation details, so they are left unexported and will not be visible to code outside the namespace.\nIn the test code at the bottom of the file, we now need to qualify the names of the types when used outside the namespace, e.g. Validation.LettersOnlyValidator.
\ntsnamespace Validation {\n export interface StringValidator {\n isAcceptable(s: string): boolean;\n }\n\n const lettersRegexp = /^[A-Za-z]+$/;\n const numberRegexp = /^[0-9]+$/;\n\n export class LettersOnlyValidator implements StringValidator {\n isAcceptable(s: string) {\n return lettersRegexp.test(s);\n }\n }\n\n export class ZipCodeValidator implements StringValidator {\n isAcceptable(s: string) {\n return s.length === 5 && numberRegexp.test(s);\n }\n }\n}\n\n// Some samples to try\nlet strings = [\"Hello\", \"98052\", \"101\"];\n\n// Validators to use\nlet validators: { [s: string]: Validation.StringValidator } = {};\nvalidators[\"ZIP code\"] = new Validation.ZipCodeValidator();\nvalidators[\"Letters only\"] = new Validation.LettersOnlyValidator();\n\n// Show whether each string passed each validator\nfor (let s of strings) {\n for (let name in validators) {\n console.log(\n `\"${s}\" - ${\n validators[name].isAcceptable(s) ? \"matches\" : \"does not match\"\n } ${name}`\n );\n }\n}
As our application grows, we’ll want to split the code across multiple files to make it easier to maintain.
\nHere, we’ll split our Validation namespace across many files.\nEven though the files are separate, they can each contribute to the same namespace and can be consumed as if they were all defined in one place.\nBecause there are dependencies between files, we’ll add reference tags to tell the compiler about the relationships between the files.\nOur test code is otherwise unchanged.
\ntsnamespace Validation {\n export interface StringValidator {\n isAcceptable(s: string): boolean;\n }\n}
\nts/// <reference path=\"Validation.ts\" />\nnamespace Validation {\n const lettersRegexp = /^[A-Za-z]+$/;\n export class LettersOnlyValidator implements StringValidator {\n isAcceptable(s: string) {\n return lettersRegexp.test(s);\n }\n }\n}
\nts/// <reference path=\"Validation.ts\" />\nnamespace Validation {\n const numberRegexp = /^[0-9]+$/;\n export class ZipCodeValidator implements StringValidator {\n isAcceptable(s: string) {\n return s.length === 5 && numberRegexp.test(s);\n }\n }\n}
\nts/// <reference path=\"Validation.ts\" />\n/// <reference path=\"LettersOnlyValidator.ts\" />\n/// <reference path=\"ZipCodeValidator.ts\" />\n\n// Some samples to try\nlet strings = [\"Hello\", \"98052\", \"101\"];\n\n// Validators to use\nlet validators: { [s: string]: Validation.StringValidator } = {};\nvalidators[\"ZIP code\"] = new Validation.ZipCodeValidator();\nvalidators[\"Letters only\"] = new Validation.LettersOnlyValidator();\n\n// Show whether each string passed each validator\nfor (let s of strings) {\n for (let name in validators) {\n console.log(\n `\"${s}\" - ${\n validators[name].isAcceptable(s) ? \"matches\" : \"does not match\"\n } ${name}`\n );\n }\n}
Once there are multiple files involved, we’ll need to make sure all of the compiled code gets loaded.\nThere are two ways of doing this.
\nFirst, we can use concatenated output using the --outFile flag to compile all of the input files into a single JavaScript output file:
tsc --outFile sample.js Test.ts\nThe compiler will automatically order the output file based on the reference tags present in the files. You can also specify each file individually:
\ntsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts\nAlternatively, we can use per-file compilation (the default) to emit one JavaScript file for each input file.\nIf multiple JS files get produced, we’ll need to use <script> tags on our webpage to load each emitted file in the appropriate order, for example:
\nhtml<script src=\"Validation.js\" type=\"text/javascript\" />\n<script src=\"LettersOnlyValidator.js\" type=\"text/javascript\" />\n<script src=\"ZipCodeValidator.js\" type=\"text/javascript\" />\n<script src=\"Test.js\" type=\"text/javascript\" />
Another way that you can simplify working with namespaces is to use import q = x.y.z to create shorter names for commonly-used objects.\nNot to be confused with the import x = require(\"name\") syntax used to load modules, this syntax simply creates an alias for the specified symbol.\nYou can use these sorts of imports (commonly referred to as aliases) for any kind of identifier, including objects created from module imports.
\ntsnamespace Shapes {\n export namespace Polygons {\n export class Triangle {}\n export class Square {}\n }\n}\n\nimport polygons = Shapes.Polygons;\nlet sq = new polygons.Square(); // Same as 'new Shapes.Polygons.Square()'
Notice that we don’t use the require keyword; instead we assign directly from the qualified name of the symbol we’re importing.\nThis is similar to using var, but also works on the type and namespace meanings of the imported symbol.\nImportantly, for values, import is a distinct reference from the original symbol, so changes to an aliased var will not be reflected in the original variable.
To describe the shape of libraries not written in TypeScript, we need to declare the API that the library exposes.\nBecause most JavaScript libraries expose only a few top-level objects, namespaces are a good way to represent them.
\nWe call declarations that don’t define an implementation “ambient”.\nTypically these are defined in .d.ts files.\nIf you’re familiar with C/C++, you can think of these as .h files.\nLet’s look at a few examples.
The popular library D3 defines its functionality in a global object called d3.\nBecause this library is loaded through a <script> tag (instead of a module loader), its declaration uses namespaces to define its shape.\nFor the TypeScript compiler to see this shape, we use an ambient namespace declaration.\nFor example, we could begin writing it as follows:
","headings":[{"value":"Introduction","depth":1},{"value":"First steps","depth":1},{"value":"Validators in a single file","depth":2},{"value":"Namespacing","depth":1},{"value":"Namespaced Validators","depth":2},{"value":"Splitting Across Files","depth":1},{"value":"Multi-file namespaces","depth":2},{"value":"Validation.ts","depth":5},{"value":"LettersOnlyValidator.ts","depth":5},{"value":"ZipCodeValidator.ts","depth":5},{"value":"Test.ts","depth":5},{"value":"MyTestPage.html (excerpt)","depth":5},{"value":"Aliases","depth":1},{"value":"Working with Other JavaScript Libraries","depth":1},{"value":"Ambient Namespaces","depth":2},{"value":"D3.d.ts (simplified excerpt)","depth":5}],"frontmatter":{"permalink":"/docs/handbook/namespaces.html","title":"Namespaces"}}},"pageContext":{"slug":"/docs/handbook/namespaces.html","isOldHandbook":true}}}tsdeclare namespace D3 {\n export interface Selectors {\n select: {\n (selector: string): Selection;\n (element: EventTarget): Selection;\n };\n }\n\n export interface Event {\n x: number;\n y: number;\n }\n\n export interface Base extends Selectors {\n event: Event;\n }\n}\n\ndeclare var d3: D3.Base;