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.

My answer here might help: http://stackoverflow.com/questions/37656592/define-global-variable-with-webpack/40416826#40416826 — prograhammer, Nov 04 '16 at 06:54

score 6 · Answer 1 · answered Aug 22 '16 at 18:28

6

# 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.

answered Aug 22 '16 at 18:28

qballer

2,033
2
22
40

I missed the fact that the `declare` statement had to be in a separate file initially. Adding a `declarations.d.ts` file containing `declare module 'libToInclude';` worked for me. – Scotty Waggoner Jan 19 '17 at 22:20
Idk what you mean. I didn't ask the question. I was just commenting to hopefully prevent others from spending a while trying to figure this out. I think I read through this answer too quickly as I was going through Google search results... – Scotty Waggoner Jan 20 '17 at 19:56

How to import plain JS into TypeScript (without Typings)

1 Answers1

Linked