How to include untyped node modules with Typescript 1.8?

Question

Typescript 1.8 now supports untyped JS files. To enable this feature, just add the compiler flag --allowJs or add "allowJs": true to compilerOptions in tsconfig.json

via https://blogs.msdn.microsoft.com/typescript/2016/01/28/announcing-typescript-1-8-beta/

I'm trying to import react-tap-event-plugin which does not have a typings file.

import * as injectTapEventPlugin from 'injectTapEventPlugin'; 

says module not found. So i tried:

import * as injectTapEventPlugin from '../node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js';

This says Module resolves to a non-module entity and cannot be imported using this construct. And then I tried:

import injectTapEventPlugin = require('../node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js');

It's crashing with ERROR in ./scripts/index.tsx Module build failed: TypeError: Cannot read property 'kind' of undefined at node_modules/typescript/lib/typescript.js:39567

My tsconfig:

{
  "compilerOptions": {
  "target": "ES5",
  "removeComments": true,
  "jsx": "react",
  "module": "commonjs",
  "sourceMap": true,
  "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

I'm using webpack with ts-loader:

 {
   test: /\.tsx?$/,
   exclude: ['node_modules', 'tests'],
   loader: 'ts-loader'
 }

Bunny

I added pull request for react-tap-event-plugin and it's already merged. github.com/DefinitelyTyped/DefinitelyTyped/pull/8260 – Moreland

Answer 1

The new --allowJs feature doesn't mean that typings will be generated for you, so you can't do

import {SomeModule} from 'something';

where 'something' is a plain JS file - you have to import it using plain JS syntax, e.g.

var someModule = require('something');

If you don't have a .d.ts file for the import, you won't be able to use any type annotations, e.g.

let x: someModule

will be invalid. If you want type annotations, intellisense, and any other TypeScript features for the import, you'll have to come up with a .d.ts file for it, or create your own interfaces for the bits you need.

Reading the documentation, it appears this feature is mainly for people converting from .js to .ts so that they can incrementally rewrite their .js files. As well, it's used to bundle your externals with your own code, and saves you having to bundle/concatenate files using a tool like webpack or browserify.

Bunting

One of the MSFT responses on their 1.8 beta blog post seems to indicate that you should be able to get the 'shape' of a module without type definitions, so while it won't include type information, it would seem to indicate that what OP originally tried should have worked AFAICT? comment text: @Erki, Yes. One thing to note, JavaScript files do not carry type information, so importing a js module would get you the "shape" of the module but no type information, so lots of any's – Nosography

@Bunting The article clearly says "Typescript 1.8 now supports untyped JS files" – Bunny

In my opinion import {SomeModule} from 'something'; is plain JS syntax since ES2015 ... So if I am using that import statement in a ES2015 project and then would like to migrate to TS, then I would have to change all import statements to require statements (for libraries that don't have typings, and for my code that is not yet migrated)? ... This would be quite a pain... If this is the case, then I would claim that TS is not a superset of JavaScript! – Kathrinekathryn