Transpile typescript into plain Javascript

Question

Something is a bit cloudy in my mind which is the following. I have a module written in typescript which will be imported later in some html pages.

sdk.ts

export class PM {

  header: any;
  headerLink: string;
  headerDiv: any;

  /**
   * @todo remove constructor.
   */
  constructor(mode: string) {
    if (mode == null || mode == undefined) {
      this.buildGUI();
    }
  }

  /**
   * Build GUI.
   * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
   */
  buildGUI(): void {
    this.initAndCreateComponents();
    this.insertScript(this.headerLink);
  }

  /**
   * Insert script.
   * It inserts the script's import tag in the head of the document.
   * @param {string} scriptLink - script's link to be loaded.
   */
  insertScript(scriptLink: string): void {
    const script = document.createElement('script');
    script.src = scriptLink;
    document.body.appendChild(script);
  };

  /**
   * Init and Create Components.
   * It initialises the variables values and it creates the components.
   */
  initAndCreateComponents(): void {
    this.headerLink = '/header/pm-header.js';

    this.header = document.createElement("pm-header");
    this.headerDiv = document.createElement("div");
    this.headerDiv.classList.add('pm-header-wrapper');
    this.headerDiv.appendChild(this.header);

    document.body.insertBefore(this.headerDiv, document.body.firstChild);
  }    
}

new PM(null);

and this is my tsconfig.json

{
  "compileOnSave": false,
  "include": [
    "src",
    "test"
  ],
  "exclude": [
    "dist",
    "node_modules"
  ],
  "compilerOptions": {
    "sourceMap": false,
    "outDir": "./dist",
    "declaration": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "@types/jasmine",
      "@types/node"
    ],
    "lib": [
      "es2017",
      "dom",
      "es2015.generator",
      "es2015.iterable",
      "es2015.promise",
      "es2015.symbol",
      "es2015.symbol.wellknown",
      "esnext.asynciterable"
    ]
  }
}

now when I run tsc I get and sdk.js that looks like this:

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var PM = /** @class */ (function () {
        /**
         * @todo remove constructor.
         */
        function PM(mode) {
            if (mode == null || mode == undefined) {
                this.buildGUI();
            }
        }
        /**
         * Build GUI.
         * It builds the GUI by wrapping the body in a container, adding the header and sidebar.
         */
        PM.prototype.buildGUI = function () {
            this.initAndCreateComponents();
            this.insertScript(this.headerLink);
        };
...

Now this generated file is supposed to be imported in several html pages, and when I did my research I found that it could only be loaded using require like this:

<script data-main="/sdk/sdk.js" src="/sdk/require.js"></script>

What I want is a way to load my script without the use of any library, to be loaded like any regular plain javascript file.

Titian Cernicova-Dragomir · Accepted Answer · 2018-11-26 11:22:08Z

3

If you don't want to use a module system (although I highly recommend you look into using one) you should remove export from your class (and from any other symbol in your file) , this will make your module be treated as a simple script file.

You should also add "module": "none" to your tsconfig.json to let the compiler know you will not be using a module system. This should trigger errors anywhere your code depends on modules (either because you export something or you use an import)

Note Since you will not be using a module system any class/variable/function you declare in your script file will be in the global scope (as they would be for any js file). You may want to consider using namespaces to organize your code and get out of the global scope.

answered Nov 26, 2018 at 11:22

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

1 Comment

malek yahyaoui Over a year ago

This is exactly what I was looking for, but, I'm gonna have to take a thorough look into module system to decide whether I should change that or not. Many thanks :)

Collectives™ on Stack Overflow

Transpile typescript into plain Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related