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: stackoverflow.com/questions/37656592/… — prograhammer
– prograhammer, Commented Nov 4, 2016 at 6:54

qballer · Accepted Answer · 2016-08-22 18:28:14Z

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, 2016 at 18:28

qballer

2,1112 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scotty Waggoner Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

How to import plain JS into TypeScript (without Typings)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related