global variables are undefined in typescript coming from webpack

Question

In typescript 2.4.0 I am trying to create global/environment variables using DefinePlugin using webpack. So here is the approach I am trying to take:

webpack.js Define part

new webpack.DefinePlugin({
   environment: JSON.stringify('DEVELOPMENT'),
}),

globals.ts

declare const environment: String;
console.log(environment);
export { environment };
console.log(environment);

environmentService.ts

import { IEnvironment } from 'environment';
import { environment } from '../globals';
console.log(environment);

export default class EnvironmentService implements IEnvironment  {
  environmentName: String = environment;

  get isDevelopment(): boolean {
    return this.environmentName === 'DEVELOPMENT';
  }

  get isProduction(): boolean {
    return this.environmentName === 'PRODUCTION';
  }
}

In the console log I get:

DEVELOPMENT
DEVELOPMENT
undefined

So console.log(environment); inside environmentService.ts is giving me undefined when I am expecting DEVELOPMENT and I am not sure why?

It appears it only exports the variable and not the value?

If someone can explain what I am doing wrong and why its getting undefined i would appreciate it.

Edit 1

I think I see what DefinePlugin is doing. Its not setting environment to DEVELOPMENT but rather replacing lines console.log(environment); with console.log('DEVELOPMENT'); and when it exports environment its undefined.

Answer 1

You can create a @types folder and put a declaration file global.d.ts in it, with just below content.

declare const environment: string;

TypeScript includes all @types packages by default during compilation: https://www.typescriptlang.org/tsconfig#types