How to import declared global variable in typescript using webpack

Question

I am having trouble importing declared global variable.

On our website, we have third party framework, which integrates only using tag and creates global variable on window for example window.thirdParty. So usage is like: thirdParty.methodOne() I wrote definition file third-party.d.ts which is like this:

import { ITrirdPartyFramework } from './third-party-definitions/third-party-framework';

export interface ITrirdPartyFramework {
   methodOne():void,
}

then i have a file (global-variables.ts), which defines global variables:

export declare const thirdParty: ITrirdPartyFramework;

and finally i want to use it in my modules:

import { thirdParty } from './global-variables';

export const myFunction = () => {
    thirdParty.methodOne();
}

Problem is that webpack compiles the definitions as regular modules and on runtime i get error, because compiled code looks like this:

_global_variables__WEBPACK_IMPORTED_MODULE_3__["thirdParty"].methodOne();

instead of

thirdParty.methodOne();

Do you know, how to tell webpack to ignore the definitions or how to deal with this situation ?

Thanks for tip, i tried it but webpack doesnt compile, it cant find the module: Module not found: Error: Can't resolve './global-variables' in 'my-code-file.ts'. — Masner
– Masner, Commented Sep 23, 2019 at 14:57
You don't have to import *.d.ts files, they are globally visible. You can keep only type definitions in those files, but not implementation — Artem Bozhko
– Artem Bozhko, Commented Sep 23, 2019 at 15:07
1. Rename global-variables.ts to global-variables.d.ts. 2. remove export keyword from global-variables. 3. remove line "import { thirdParty } from './global-variables';" — Artem Bozhko
– Artem Bozhko, Commented Sep 23, 2019 at 15:25
Thanks a lot @Artem, it really solved my problem. But i cant accept comment as answer. If you want, you can post the answer and i will accept it, or i am going to rewrite you answer tomorrow. — Masner
– Masner, Commented Sep 24, 2019 at 7:11

Artem Bozhko · Accepted Answer · 2019-09-24 11:18:01Z

2

You don't have to import *.d.ts files, they are globally visible.
You can keep only type definitions in those files, but not implementation

Next steps will solve your problem:

Rename global-variables.ts to global-variables.d.ts
remove export keyword from global-variables.d.ts
remove line import { thirdParty } from './global-variables';

answered Sep 24, 2019 at 11:18

Artem Bozhko

1,89414 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

How to import declared global variable in typescript using webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related