NodeJS + TypeScript: fuzzy syntax with type script compiled code

Question

I am trying to work with Typescript in my node project, but have some problems with this.

This is my index.ts file:

import express from 'express'; const app = express(); 

I run:

 tsc --module commonsjs -d index.ts 

My conclusion: index.js:

 var express_1 = require('express'); var app = express_1["default"](); 

Where did this ["default"] come from? This makes my code work incorrectly:

 var app = express_1["default"](); ^ TypeError: express_1.default is not a function 

As far as I understand, I should have gotten the code without the “standard” brackets, and it would have worked fine - I tried to remove the brackets and it worked.

What am I missing here?

Answer 1

The safest solution would be:

 import express = require('express'); 

This translates to:

 var express = require('express'); 

Official import documentation is required here .

I believe typescript expects an export named "default" to function as your code above, judging by the last paragraph here .

---

A side note that looks like typescript the newest version (typescript @ 1.8.0-dev.20151229 at the time of writing) will trigger a warning about a compilation attempt that will try to use the missing default:

 index.ts(1,8): error TS1192: Module '"express"' has no default export. 

---

In Note 2, a Microsoft example using the syntax import * as express from 'express'; can be found here here . When targeting the commonjs module (as they are in this example ), this will also move to var express = require('express'); .

Answer 2

If you are trying to use the default export of a module other than ES6, such as Express, you need to use the old import syntax import express = require('express') . ES6 modules do not export default values, for example, module.exports from Node.js modules or return AMD modules; The default export of the ES6 module is just the default key. That's why when you use ES6's default import , as you try to do, TypeScript generates JavaScript with access to the default property.

You can learn more about this in the New es6 syntax for importing commonjs / amd ie` import foo = require ('foo') `modules .

Answer 3

if you still want to use the import keyword use it like

 import express from "express"; // if above is not supported by your project environment then follow as below import * as express from "express"; 

in tsconfig.json

 { "compilerOptions": { ... "module": "commonjs" ... } } 

Thanks @ Josh Dando

Answer 4

I solved this by adding the following to tsconfig.json :

 { "compilerOptions": { ... "module": "commonjs", "esModuleInterop": true, ... } } 

The esModuleInterop flag is described as follows: " Emit helpers __importStar and __importDefault for compatibility with babel at run time and including --allowSyntheticDefaultImports for type system compatibility."

https://www.typescriptlang.org/docs/handbook/compiler-options.html