How to use js modules from non-module files

Question

I'm a beginner at using js modules.

I'm working on a fairly simple web application. It uses typescript and angular 2, which heavily relies on modules.

Most of my app ts files 'import' one or many js modules (usually mostly angular 2 modules).

As I understand, because my app ts files have a top level 'import', they are automatically considered a js module by typescript.

However, I want any of my app ts files to be accessible by any other of my app ts files, without having to 'import' each other. But because they are now modules themselves, ts requires me to do that...

Is it possible?

It seems crazy to me that for each of my app ts file, I should have to declare every other of my app ts files that are used in there (I like to have tiny files with a single class/interface). In addition, this relies on relative paths which breaks as soon as I restructure my folder structure.

Am I thinking about this the wrong way?

Answer 1

You must have a js file which is an entry point to your application right?.. So in that file just import all the modules which you want to access without importing and attach them to the window object. Since the window object is available globally, you can access your module from anywhere without importing the corresponding module. For example,

Consider this scenario: You have a module in a file called module1.ts The entry point of your application is a file called index.ts And you have a module2 where you require something from module1

// module1.ts
function add(first: number, second: number): number {
    return first + second
}
export {add}

in your index.ts

// index.ts
import {add} from '<path to module1>/module1';

window.add = add

Now in your module2

// module2.ts
window.add(1, 2)

Since the window object is available globally you can attach as many properties to it as you like. As far as the type resolution is concerned you can declare a window module with the add function you require in a .d.ts file as follows:

declare module window {
add: (first: number, second: number) => number 
}