TypeScript Organization: Namespaces? modules? confusion

Question

I'm new to TypeScript, and the more I read about modules and namespaces, the more I get confused. Should I go with modules? Should I go with namespaces? Do I use both? help!

I have javascript files (.js) that I am trying to convert to TypeScript. There is one .js file with some common functions and one .js file with some functions specific to filters.

Now I would like to organize this a bit more with TypeScript, as I would normally do with C #.

Is this the right use or how to organize it?

I do not use the module, right? (How?)

Company.ts

namespace Company { // nothing yet, but in future it might. } 

Company.Project.ts

 namespace Company.Project { import Company; // like this? let myVar : string = "something"; export function handyGeneralFunction1(foo, bar) { // ... } export function handyGeneralFunction2(foo, bar, foo, bar) { // ... doInternalCalc(); // ... } export function handyGeneralFunction3() { // ... } function doInternalCalc() { // ... } } 

Company.Project.Filter.ts

 namespace Company.Project.Filter { import Project = Company.Project; // like this? export function initializeFilter() { // ... initMetadata(); // ... } function initMetadata() { // ... Project.handyGeneralFunction3(); let helper : FilterHelper = new FilterHelper("aaaa,bbbb"); let res:string[] = helper.parseData(); } function foo() { // ... let x :string = Project.myVar + " else"; // can I use myVar here? } // a class in the namespace export class FilterHelper { data: string; constructor(theData: string) { this.data = theData; } parseData() : string[] { // ... return new Array<string>(); } } } 

Answer 1

If you have the opportunity to really improve the project structure, you should definitely use modules instead of namespaces. Depending on the size of the project, this may require some effort.

Representing namespaces can be useful if your application is not so large and you do not want to invest in switching to another build system that can handle real modules. Using namespaces is not much more than some named global variables that contain functions and variables. This can get confusing pretty soon, since you do not have proper dependency structures. You need to take care to import all the files in the correct order for the namespaces to work properly. The import syntax that you used can even be omitted, since in any case you only refer to another global object that must be initialized at this point in time.

Thus, the namespace may be your first step, if you do not have the ability to make any big changes on your code base. For future installations, I would definitely suggest using real modules. But keep in mind that this does not come for free.

For more information, I suggest looking at the official commentary on this subject at https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html or the section in TypeScript Deep Dive at https://basarat.gitbooks.io /typescript/content/docs/project/namespaces.html