1

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!

Improve this question

3 Answers 3

Reset to default
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 = {}));
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

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.

Improve this answer

Comments

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'
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.