title: Typescript: How to have some imports in the global scope?
body: <h2>Context:</h2>
  
  <p>I work on a project where the senior programmer decided to reduce the boilerplate code in newly created typescript files. Two examples of this boilerplate code would be importing the React library or the function that fetches and processes our localized strings.</p>
  
  <h2>Question:</h2>
  
  <p>Is it possible to have imports always available in files placed in certain folders without having to write the import tags every time?</p>
  
  <h2>What I've tried:</h2>
  
  <p>I've searched and read on the subject and found those links that talk about defining variables to use in the global space:
  <a href="https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html" rel="nofollow noreferrer">global.d.ts</a>, <a href="https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-modifying-module-d-ts.html" rel="nofollow noreferrer">global-modifying-module.d.ts</a>, <a href="https://github.com/Microsoft/TypeScript/issues/3180" rel="nofollow noreferrer">A typescript issue that seems to get it working</a></p>
  
  <p>However, I was still unable to get it to work. Here is what I've tried:</p>
  
  <p>At the root of the folder where I want React to be always available, I created a global.d.ts file which contains:</p>
  
  <pre><code>import * as R from "react";
  
  declare global{
    const React: typeof R;
  }
  </code></pre>
  
  <p>With this file, the resource "React" is supposed to always be available to other files in subsequent folders. My IDE (Webstorm) recognizes that the import is there and allows me to manipulate the variable React without complaining. However, when I try to run the app, I get this error:</p>
  
  <blockquote>
    <p>ReferenceError: React is not defined</p>
  </blockquote>
  
  <p>I don't understand what is wrong with the code! Here is an example of the file I'm trying to render:</p>
  
  <pre><code>export default class World extends React.Component&lt;{}, any&gt; {
    public render() {
      return (&lt;div&gt;Hello world&lt;/div&gt;);
    }
  }
  </code></pre>
  
  <p>From this <a href="https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined">stackoverflow question</a>, I was under the impression that the problem could be webpack related. For the sake of completeness, here is the webpack config file we're currently using:</p>
  
  <pre><code>const webpack = require('webpack');
  const path = require('path');
  
  const BUILD_DIR = path.resolve(__dirname, './../bundles');
  const WEBPACK_ENTRYFILE = path.resolve(__dirname, './../srcReact/ReactWrapper.tsx');
  
  
  // `CheckerPlugin` is optional. Use it if you want async error reporting.
  // We need this plugin to detect a `--watch` mode. It may be removed later
  // after https://github.com/webpack/webpack/issues/3460 will be resolved.
  const { CheckerPlugin } = require('awesome-typescript-loader');
  
  
  const config = {
      entry: [WEBPACK_ENTRYFILE],
      resolve: {
          extensions: ['.ts', '.tsx', '.js', '.jsx', '.less']
      },
      output: {
          path: BUILD_DIR,
          filename: 'bundle.js'
      },
      plugins: [
          new CheckerPlugin()
      ],
      devtool: 'source-map',    // Source maps support ('inline-source-map' also works)
      module: {
          loaders: [
              {
                  loader: 'url-loader',
                  exclude: [
                      /\.html$/,
                      /\.(js|jsx)$/,
                      /\.(ts|tsx)$/,
                      /\.css$/,
                      /\.less$/,
                      /\.ttf/,
                      /\.woff/,
                      /\.woff2/,
                      /\.json$/,
                      /\.svg$/
                  ],
                  query: {
                      limit: 10000,
                      name: 'static/media/[name].[hash:8].[ext]'
                  }
              },
              {
                  loader: 'url-loader',
                  test: /\.(ttf|woff|woff2)$/
              },
              {
                  loader: "style-loader!css-loader!less-loader",
                  test: /\.less$/
              },
              {
                  loader: "style-loader!css-loader",
                  test: /\.css$/
              },
              {
                  loader: "svg-loader",
                  test: /\.svg$/
              },
              {
                  loader: "json-loader",
                  test: /\.json$/
              },
              {
                  loader: "awesome-typescript-loader",
                  test: /\.(ts|tsx)$/
              }
          ]
      }
  };
  
  module.exports = config;
  </code></pre>
  
  <p>I am certain I am missing something. Can anyone help me?</p>