How to import plain JS into TypeScript (without Typings)

Question

We have a project using TypeScript with ts-loader in Webpack, for most of the things we've used now there were type definitions in Definitely Types (via typings), but not for the one we wanted to use now: redux-auth.

At first I had no module defined in tsconfig.json and importing it via

import { EmailSignInForm } from "redux-auth/bootstrap-theme"

resulted in Cannot find module. Then we read that using the CommonJS notation could help, but it didn't since TS didn't know about the members of the imported module (Property 'EmailSignInForm' does not exist on type '{}'). Using the relative path doesn't do anything useful as well.

Also I've read in this article about TS 1.8 that it should now support plain JS files, but doesn't explain exactly how. allowJs is enabled.

How do I import that module? Thanks!

This is our webpack.config.js:

var webpack = require('webpack');
var fail = require('webpack-fail-plugin');

module.exports = {
  entry: './static/files/app/main.tsx',

  output: {
    path: './static/files/',
    filename: 'bundle.js',
    sourceMapFilename: '[file].map'
  },

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ]
  },

  devtool: 'source-map',

  plugins: [
    fail,
    new webpack.ProvidePlugin({
      //Promise: 'exports?global.Promise!es6-shim',
      fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ]
};

And our tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "allowJs": true,
    "noEmitOnError": true
  },
  "files": [
    "typings/browser.d.ts"
  ],
  "exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
  ]
}

(The "module": "commonjs" was temporary to test the CommonJS notation)

UPDATE:

Ok, so if I declare var require: any and use the relative path in require() I can import it, although I doubt that this is the intended way. Funnily now I get this message from Webpack:

WARNING in ./~/encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
 @ ./~/encoding/lib/iconv-loader.js 9:12-34

ERROR in ./~/iconv-lite/encodings/tables/gb18030-ranges.json
Module parse failed: ./node_modules/iconv-lite/encodings/tables/gb18030-ranges.json Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.

Answer 1

# declarations.d.ts
declare module '*';

# someFile.ts
import * as $ from 'jquery';
import * as _ from 'lodash';

If you have types for one module code completion should work and the compiler will assume you know what you are doing. I think ts loader should respect that as well. Please test and let me know.