Why is my typescript file not getting generated correctly into js using gulp typescript?

Question

I am trying to convert a typescript file into js, using gulp-typescript.

It doesn't seem to translate.

gulp file:

var ts = require('gulp-typescript');
gulp.task('tsToJs', function () {
    return gulp.src('./config.ts')
      .pipe(ts({
          moduleResolution: 'node',
          target:'es5',
          allowJs:true
          //out: 'config.js'
      }))
      .pipe(gulp.dest('./'));
});

config.ts:

class Config{
    env:{
        readonly live: '.co.uk',
        readonly dev: '.dev.co.uk',
        readonly qa:  'qa.co.uk'
    };
};
export = new Config;

Seems to get converted to this: (It's missing the data inside the class?) conf.js:

"use strict";
var Config = (function () {
    function Config() {
    }
    return Config;
}());
;
module.exports = new Config;

Does the same thing in the TypeScript playground.

T.J. Crowder
– T.J. Crowder

2017-02-03 09:51:14 +00:00
Commented Feb 3, 2017 at 9:51 — T.J. Crowder
– T.J. Crowder, Commented Feb 3, 2017 at 9:51
ok, so how can I get the data to appear in the output?

Inspiraller
– Inspiraller

2017-02-03 09:55:12 +00:00
Commented Feb 3, 2017 at 9:55 — Inspiraller
– Inspiraller, Commented Feb 3, 2017 at 9:55

T.J. Crowder · Accepted Answer · 2017-02-03 17:14:24Z

1

You're declaring your env property to be of an anonymous type, rather than initializing it with an object with properties. Change : to =:

class Config{
    env = {
//      ^-------------------------------------- here
        readonly live: '.co.uk',
        readonly dev: '.dev.co.uk',
        readonly qa:  'qa.co.uk'
    };
}

Note, though, that the playground says that you can't use readonly there. I can't find any example in the TypeScript handbook using readonly on simple object properties. (Though conceptually it would be reasonable.) You may need to be a bit more old-fashioned:

class Config{
    env = Object.create(Object.prototype, {
        live: {value: '.co.uk', enumerable: true, configurable: true},
        dev:  {value: '.dev.co.uk', enumerable: true, configurable: true},
        qa:   {value: 'qa.co.uk', enumerable: true, configurable: true}
    });
}

(Of course, if you don't want the properties to be enumerable or configurable, just leave those off. They won't be writable, because the default is false for all of those flags.)

Side note: Since that's a declaration, not an expression, there's no ; after it. ; is a statement terminator; declarations are self-terminating.

edited Feb 3, 2017 at 17:14

answered Feb 3, 2017 at 9:57

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

Inspiraller Over a year ago

ok but readonly cannot be used here? That's the error message I get in vscode

T.J. Crowder Over a year ago

@SteveTomlin: I was wondering about that, I couldn't find any example of it being used in that way in the TypeScript handbook. Just noticed in the playground that it says the same thing. I've updated the above.

T.J. Crowder Over a year ago

@JamesMonger: Thank you! My TypeScript-fu is weak. That explains why the block containing labelled statements with commas between them wasn't a problem. It's not a block, and it doesn't contain labelled statements with commas between them. :-)

Inspiraller · Accepted Answer · 2017-02-03 13:52:08Z

0

I really wanted to keep the readonly, because it helps vscode display the value of the variables where they are used. There doesn't seem to be any other way of displaying javascript variables without compiling. This feature is the reason I am wanting to use typescript for this situation.

This is the closest to achieving what I want, which does work:

const env = new (class Env{
    readonly live = '.co.uk';
    readonly dev = '.dev.co.uk';
    readonly qa = '.qa.co.uk';
})();

const brand = new (class Brand{
    readonly cm = 'mysite';
})();

export {brand, env};

answered Feb 3, 2017 at 13:52

Inspiraller

3,8026 gold badges42 silver badges85 bronze badges

Collectives™ on Stack Overflow

Why is my typescript file not getting generated correctly into js using gulp typescript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related