Typescript code not showing anything in the browser after transpiling

Question

I am trying to write some very simple examples of Typescript code In Atom editor. The example consists of one main.ts and a very small module with only one small class (myclasses.ts) . I import the module normally
The transpiling process goes without any errors and .js files Are being created normally in the output folder. I trans-pile using the CLI

tsc *.ts --target 'es6'

And I do it also from within Atom, in both cases it finishes without Any errors nor warnings. When I run the main.js file from the CLI using:

node main.js

It works just fine and I get the results and the output of every function But when I Open the html file that calls the main.js nothhing Happens! No errors no warnings nothing in the console, no output ...

this is the contents of tsconfig.json:

{
  "compilerOptions": {

    "target": "ES2015",
    "module": "umd",
    "outDir": "built",
    "strict": true

  },

  "exclude": [
      "node_modules"
  ]
}

and this the main.js (after transpiling):

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "./myclasses"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const myclasses_1 = require("./myclasses");
    var colors;
    (function (colors) {
        colors[colors["Red"] = 0] = "Red";
        colors[colors["Green"] = 1] = "Green";
        colors[colors["Blue"] = 2] = "Blue";
    })(colors || (colors = {}));
    ;
    let msg = 'Ameme tmena';
    let result = msg.toUpperCase();
    console.log(result);
    let aa = msg.endsWith('a');
    console.log(aa);
    function tryLoop(l) {
        for (let i = 0; i < l; i++) {
            let PowrOf2 = () => Math.pow(i, 2);
            console.log(i, PowrOf2());
        }
    }
    ;
    tryLoop(7);
    let test1;
    test1 = 'Amama Terr';
    let ThEnd = test1.endsWith('r');
    console.log(ThEnd);
    let p1 = new myclasses_1.Point(78, 89);
    p1.calcXY();
    p1.x = 8;
    p1.y = 90;
    p1.calcXY();
    p1.x = -8;
    p1.y = 0;
    p1.calcXY();
    console.log('Hiiiiiii');
    let testing;
    testing = 19;
    testing += (testing > 20) ? -2 : +2;
    console.log(testing);
});

You are creating an umd module, you would need a module loader for the browser like require.js. You could also use webpack or browserify to bundle it. — , Dec 06 '17 at 22:43
Thanks for your response but could you please give me some more details? How to use require.js in my case? what to add or what to do.. sorry for the inconvenience ...thanks again — AboJo TheGreat, Dec 06 '17 at 23:11
Thanks for the help I did it and it was really easy , just a simple edit — AboJo TheGreat, Dec 06 '17 at 23:18

score 0 · Answer 1 · answered Dec 07 '17 at 07:48

You can just change the tsconfig not to create module:

{
  "compilerOptions": {

    "target": "ES2015",
    "module": "none",
    "outDir": "built",
    "strict": true

  },

  "exclude": [
      "node_modules"
  ]
}

This should output clean JS code.

Typescript code not showing anything in the browser after transpiling

1 Answers1