The same namespace declared and used across multiple TypeScript files

typescript namespace alias
namespace vs module typescript
typescript declare module
typescript cannot find namespace
typescript is not a module
typescript nested namespaces
typescript declare module multiple files
cannot use namespace as a type

I'm new to TypeScript and I having a problem with the same namespace used across multiple files:

file model.ts

export namespace MyCompany {
   export class Model {
      ...
   }
}

file webviewer.ts

import { Model } from './model';

export namespace MyCompany {
   model : Model;
   export class WebViewer {
      use() : void {
         this.model = new Model();
         ...
      }
      ...
   }
}

file index.ts

import { WebViewer } from './webviewer';

let webviewer = new WebViewer();
webviewer.use();

I cannot find any documentation on how to use MyCompany.Model in MyCompany.WebViewer class and MyCompany.WebViewer in index.ts file.

This document below contains many examples, but none of them treats my case, when the same namespace declared and used used across multiple files of the same library.

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#110-namespaces

UPDATE

Now I'm asking myself if it's OK using namespaces in every file. Probably there is a way to use .d.ts files where the classes can be exported inside namespaces, so later the library can be consumed as Acme.WebViewer etc

The basic idea of a namespace is to avoid naming collisions (what if you or some other dev on your team wanted another Model class, and wasn't aware of yours?)

Namespaces became a bit obsolete with the introduction of modules, because they solve the problem in a more elegant fashion. You could just do the following and skip the namespaces altogether:

model.ts

export class Model {
  // ...
}

webviewer.ts

import { Model } from './model';

export class WebViewer {
  private model: Model;
  use(): void {
    this.model = new Model();
  }
}

index.ts

import { WebViewer } from './webviewer';

let webviewer = new WebViewer();
webviewer.use();

Namespaces � TypeScript, Here, we'll split our Validation namespace across many files. Even though the files are separate, they can each contribute to the same namespace and can be a <script> tag (instead of a module loader), its declaration uses namespaces to � I am building a client framework, and would like to split my code among multiple files. I would also like that each file can participate in the same namespace to export different things (classes, interfaces, functions, vars, ) TypeScript Version: 2.0.3. Code. _comon.ts_

You can leave out import when using namespaces. When calling an object from outside the namespace you have to include it in the call: let m = new MyCompany.Model(). You also had a typo in webviewer (the model variable has to be declared inside the class)

model.ts

export namespace MyCompany {
   export class Model {
      ...
   }
}

webviewer.ts

export namespace MyCompany {
   export class WebViewer {
      model : Model;
      use() : void {
         this.model = new Model();
      }
   }
}

index.ts

let webviewer = new MyCompany.WebViewer();
webviewer.use();

Handbook - Namespaces and Modules, Namespaces are simply named JavaScript objects in the global namespace. Unlike modules, they can span multiple files, and can be concatenated using us to locate the declaration file that contains the declaration for the ambient module. is that two different modules will never contribute names to the same scope. TypeScript allows you to use EcmaScript import syntax to bring code from another file, or multiple files. This is very useful if you do not want to have all your code into a single file, or if you want to reuse code in different files.

I think I understand you my friend, did you find a solution? I have js project I am trying to port to ts. I have namespace Presentation and try to use one view in another

Presentation.User --- > Presentation.Profile

To show profile UI inside User UI.

what I could do is this

export namespace Presentation{
   export class Profile{}
}

and use that this way

import {Presentation as _Presentation} from 'Profile';
export namespace Presentation{
   export class User{
      profileView:_Presentation.Profile;
   }
}

hope you found a better approach

Declaration Merging � TypeScript, For the purposes of this article, “declaration merging” means that the compiler Namespace-creating declarations create a namespace, which contains Similarly, namespaces can be used to extend enums with static members: in an augmentation are merged as if they were declared in the same file as the original. As a NodeJS / TypeScript developer who: uses one class per file and compiles to separate files (i.e. uses external modules) uses namespaces to organize classes; I would like an elegant way to: reference imported namespaces without re-declaring them; import multiple external modules into the same namespace

Is typescript Namespace feature deprecated?, You can actually have many files that declare objects and classes in the same namespace: // typescript: // file 1 namespace Validation { const� Namespaces are a TypeScript-specific way to organize code. Namespaces are simply named JavaScript objects in the global namespace. This makes namespaces a very simple construct to use. Unlike modules, they can span multiple files, and can be concatenated using --outFile.

TypeScript Namespaces, The namespace is used for logical grouping of the functionalities. Use the following --outFile command to generate a single .js file for a single namespace or multiple namespaces. Namespaces cannot declare their dependencies. Didn't say I don't intend to use modules. The simple fact that an import extracts that particular file out of its original scope and isolates it into a module, without even bringing the original namespace originally spaced out across multiple files with it, is simply a cop-out design for this feature.

Typescript namespace multiple files, Even though the files are separate, they can each contribute to the same Here, we'll split our Validation namespace across many files. ts” and are used by Adds "go to declaration" that works with modules declared elsewhere, and� Using same namespace in multiple files. greentype. I am trying to use a namespace in separately compiled files. The individual compiles work fine, but the final link

Comments
  • When I first started with Typescript I found the whole build process using webpack or browserify rather intimidating. When learning Typescript, namespaces are a good middle ground IMHO
  • So where are modules used in your example? The only changes I see are: private accessor on model field and the removal of namespaces (I'm quite new to TS, so sorry for dumb questions). I thought that modules have to be declared explicitly