CODEWITHSUNDEEP
javascripttypescriptgulp
Inspiraller
Inspiraller

Reputation: 3806

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

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;

Upvotes: 0

Views: 66

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1075587

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.

Upvotes: 1

Inspiraller
Inspiraller

Reputation: 3806

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};

Upvotes: 0

Related Questions