The same namespace declared and used across multiple TypeScript files

Question

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

Answer 1

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();

Answer 2

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();

Answer 3

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