CODEWITHSUNDEEP
typescriptwebpackes6-modules
Masner
Masner

Reputation: 15

How to import declared global variable in typescript using webpack

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 ?

Upvotes: 1

Views: 3662

Answers (1)

Artem Bozhko
Artem Bozhko

Reputation: 1854

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:

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

Upvotes: 2

Related Questions