TypeScript compiler produces wrong output

Question

The TypeScript compiler seems to produce wrong output as demonstrated below:

export default class TitleParser {}

Produces:

class TitleParser {
}
exports.TitleParser = TitleParser;

So the problem here is that I get an error when trying to use the class by importing it. The error: titleparser_1.default is not a function is shown when trying to instantiate it after importing the library:

import TitleParser from './TitleParser';
const parser = new TitleParser(); // the error occurs here

The fix for this is to export the class below, like this:

class TitleParser {}
export default TitleParser;

The above will produce the correct JavaScript code, i.e.

class TitleParser {}
exports.default = TitleParser;

Afterwards usage of the class doesn't throw an error anymore.

My compiler configuration is the following:

    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "outDir": "../api",
    "rootDir": "src",
    "sourceMap": true,
    "experimentalDecorators": true

And compiler version: 1.7.5

Is this a bug in the compiler or am I doing something wrong? The compiler never complains though.

If you will set target to es5. It will be fine. So taking into account what the creator of the language says here: github.com/Microsoft/TypeScript/issues/…. I think this is a bug in compiler. — Amid
– Amid, Commented Jan 23, 2016 at 20:12

Fenton · Accepted Answer · 2016-01-25 11:18:46Z

1

You shouldn't be able to target ES6 when using commonjs (the compiler normally warns you about this... see the next paragraph for potential reason why it hansn't).

If you copied your config straight out of your file, you also have a missing comma at the end of line:

"sourceMap": true

If you target ES5 and fix the config (Visual Studio Code is great at pointing out issues), the output would be:

var TitleParser = (function () {
    function TitleParser() {
    }
    return TitleParser;
})();
exports.default = TitleParser;
//# sourceMappingURL=titleparser.js.map

Which you can use exactly as you intend:

import TitleParser from './titleparser'

var x = new TitleParser();

All tested with v1.7.5

ES6

If you want to use ES6, adjust your code like this:

export class TitleParser {

}

And:

import {TitleParser} from './titleparser'

var x = new TitleParser();

edited Jan 25, 2016 at 11:18

answered Jan 24, 2016 at 20:43

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

2 Comments

eAbi Over a year ago

It was a typo when copied the tsconfig file. I added the experimentalDecorators option manually by editing the question and forgot about the comma. The problem is that I need to target es6 because I use async/await features and it doesn't work by targeting es5. Also, I use VSCode and it never complained about targeting es6 and using commonjs.

Fenton Over a year ago

I have added a recommended change if you want to use ES6 (it uses ES6 style imports with a simple export (i.e. not default).

Collectives™ on Stack Overflow

TypeScript compiler produces wrong output

1 Answer 1

ES6

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ES6

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related