React import a module with a declared namespace

Question

I'm trying to figure out how I can use some existing functions in my React app.

There is a javascript file called Foo.js and and associated typing Foo.d.ts

Foo.js has many functions and at the top I see

//I don't understand what the below lines re doing
var A = A || {};
A.B= A.B|| {};
A.B.C= A.B.C|| {};
A.B.C.Foo= A.B.C.Foo|| {};

(function ()
 //here there are many functions
)();

Then in the d.ts file

declare namespace A.B.C.Foo
{
   //here there are exported functions
}

Now I have my react components in another folder, and I wish to use the functions defined in the Foo.js file. How do I use them? I've tried adding the below to my component

///<reference path="../../../typings/@Test/Foo.d.ts" />

My component looks like below

const Component: React.FunctionComponent<IProps> = (props:Iprops) =>
{
  //I'm trying to use the function here.
}

What do I need to do to import the functions? I have no idea how to proceed.

Edit: One more piece of information: In the html file I have a reference to Foo.js added in a script tag

" /> Edit: So I was able to get this to work. The accepted answer pointed me in the right direction with using global. Looks like Foo.js was already declared in a manner that the functions were available in React already. On the react side, adding the below reference path worked. To get type checking what I was missing was that that the .d.ts file exports a namespace so I had to prefix all functions with that namespace like so: A.B.C.Foo.FunctionName() ///

richardaum · Accepted Answer · 2021-02-21 12:59:56Z

3

The best way to expose functions to the other modules of your application is when a module provides a export statement:

// Foo.js
export const mySpecialFunction = () => {}
// otherFile.js
import { mySpecialFunction } from './Foo.js';
mySpecialFunction();

Otherwise, you will need to rely on window (considering your code runs on browser) to expose you function globally by import Foo.js somewhere (preferably on your app's entrypoint) and using the function:

// Foo.js
window.mySpecialFunction = () => {}
// index.js (entrypoint of your app)
import './Foo.js';
// otherFile.js
mySpecialFunction();

But about Typescript, you can't just define a namespace. It must match with a path alias you define on tsconfig.js which points to Foo.js.

The fact is that isn't clear what you are aiming.

Edit:

How would I do this "typescript as a global module attached to window"?

You could follow this documentation https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html. It will help you to define a global function or namespace.
Disclaimer: In a general way, do not rely on global modules as they decrease the code readibility.

edited Feb 21, 2021 at 12:59

answered Feb 20, 2021 at 23:10

richardaum

6,77713 gold badges52 silver badges65 bronze badges

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

6 Comments

Gabriel Beauchemin-Dauphinais Over a year ago

That's the good answer if the foo functions were created by him, but I suspected he got them from an imported library.

Crust3 Over a year ago

So in the html file I have a reference to Foo.js added in a script tag <script src="<path to Foo.js>" /> With that in mind, does that change anything? I'm guessing with the script tag added, I won't need to explicitky import right?

richardaum Over a year ago

You are right, but using script let your import too much implicity. But if you are not in control you Foo.js you can do that.

richardaum Over a year ago

Then you would declare the contents of Foo.js in your typescript as a global module attached to window.

Crust3 Over a year ago

How would I do this "typescript as a global module attached to window"? Thanks for all the info so far!

|

Gabriel Beauchemin-Dauphinais · Accepted Answer · 2021-02-20 23:03:43Z

0

Normally for a well formed library with exported functions you should add:

import FooFunctions from "A.B.C.Foo"

in your component, and then call the functions with FooFunction.{theFunctionYouWantToCall}(). You can also use this format of import:

import {theMatchingFunctionYouWantToCall} from "A.B.C.Foo"

Note: that's the normal scenario if you imported the library from npm, and it is in your node_modules. If you created this library or created the missing .d.ts file for it, make sure that Typescript is finding your .d.ts first.

edited Feb 20, 2021 at 23:03

answered Feb 20, 2021 at 22:57

Gabriel Beauchemin-Dauphinais

3763 silver badges15 bronze badges

Collectives™ on Stack Overflow

React import a module with a declared namespace

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related