Global Namespace in Javascript: Migrating to TypeScript

Question

I have multiple files like:

library0.js
library1.js
...
libraryn.js

Each populates part of a global object "MY_GLOBAL" like this example:

library0.js

// check that the MY_GLOBAL namespace exists
if (typeof(MY_GLOBAL) === 'undefined') {
    var MY_GLOBAL = {};
}

MY_GLOBAL.TIMEOUT =  120000; // 2 minutes

MY_GLOBAL.extractErrMsg = function(reqResponse) {
    console.log(reqResponse);
};

library1.js

// check that the MY_GLOBAL namespace exists
if (typeof(MY_GLOBAL) === 'undefined') {
    var MY_GLOBAL = {};
}

MY_GLOBAL.STRING =  'STRING';

MY_GLOBAL.exposed = function() {
    console.log("This is exposed);
};

Currently in my index.html file, I add all these files in script includes. Therefore all my other js files can simple call:

MY_GLOBAL.extractErrMsg

or any other function/object on MY_GLOBAL.

I am migrating to TypeScript and I am not sure what to do with this global namespacing. Everywhere I reference the global object MY_GLOBAL, I get error TS2304: Cannot find name 'MY_GLOBAL'. Should I port all these to modules?

Thank you!

Justin · Accepted Answer · 2018-01-09 00:04:53Z

3

You may want to consider TypeScript namespace, depending on your migration needs. TypeScript will compile the namespace(s) into module style javascript where MY_GLOBAL is still defined in the global scope but injected into the function so it can be extended. So you may not need to convert all your js initially.

https://www.typescriptlang.org/docs/handbook/namespaces.html

lib0.ts

namespace MY_GLOBAL {
    export const TIMEOUT = 120000;
    export const extractErrMsg = reqResponse => console.log(reqResponse);
}

after complication

var MY_GLOBAL;
(function (MY_GLOBAL) {
  MY_GLOBAL.TIMEOUT = 120000;
  MY_GLOBAL.extractErrMsg = function (reqResponse) { return 
  console.log(reqResponse); };
})(MY_GLOBAL || (MY_GLOBAL = {}));

lib1.ts

namespace MY_GLOBAL {
  export const STRING = 'STRING';
  export const exposed = () => console.log("This is exposed");
}

after complication

var MY_GLOBAL;
(function (MY_GLOBAL) {
  MY_GLOBAL.STRING = 'STRING';
  MY_GLOBAL.exposed = function () { return console.log("This is exposed"); };
})(MY_GLOBAL || (MY_GLOBAL = {}));

answered Jan 9, 2018 at 0:04

Justin

1811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ProgrammedChem Over a year ago

thank you for the suggestion. How would I then use MY_GLOBAL in other files?

Explosion Pills · Accepted Answer · 2018-01-08 17:44:19Z

It will be some work, but rather than using a global variable like this I would change your code to export the values instead:

// library1.ts

export const TIMEOUT = 120000;
export const extractErrMsg = reqResponse => console.log(reqResponse);

Then in code that uses it, you can import it as a module:

import { TIMEOUT, extractErrMsg } from './library1';

If you want you could also do something like import * as MY_GLOBAL from './libary1', but you could only do this for one import at a time.

If you don't want to go through this or you don't have the ability to do so yet, then you can still do what you need by declareing MY_GLOBAL:

// order here actually doesn't matter; you may want to do the import first
declare const MY_GLOBAL: any;
import './library1';

Then you can use whatever values you want from MY_GLOBAL. You could also define a more specific type than any if you wanted that includes the known values.

unional · Accepted Answer · 2018-01-08 20:15:13Z

0

If you want you could also do something like import * as MY_GLOBAL from './libary1', but you could only do this for one import at a time.

Amending to this, you can do:

// my-global/file1.ts
export const TIMEOUT = 123

// my-global/file2.ts
export const foo = 123

// my-global/index.ts
export * from './file1'
export * from './file2'

// consume.ts
import * as MY_GLOBAL from './my-global'

answered Jan 8, 2018 at 20:15

unional

15.8k6 gold badges36 silver badges57 bronze badges

Collectives™ on Stack Overflow

Global Namespace in Javascript: Migrating to TypeScript

library0.js

library1.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

library0.js

library1.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related