How to integrate typescript project with html

Question

I want to call a typescript function from the HTML body. However, I am unable to call my function(D2O_main()) from HTML as I don't fully understand the generated js code. Any help is greatly appreciated.

I generated the js using the following command: tsc --module umd main.ts

Here's the html file.

<head>
    <script type="text/javascript" src="main.js"></script>
</head>
<body onload="D2O_main();">
    <canvas id="canvas-001"></canvas>
</body>
</html>

Here's the main.ts file:

import {Init} from "./Core/IO/Init"
let init:Init;
function D2O_main() {
    init = new Init("canvas-001");
}

Here's the generated main.js file:

(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", "./Core/IO/Init"], factory);
    }
})(function (require, exports) {
    "use strict";
    exports.__esModule = true;
    var Init_1 = require("./Core/IO/Init");
    var init;
    function D2O_main() {
        init = new Init_1.Init("canvas-001");
    }
});

I'm getting the following error at the browser console:

Uncaught ReferenceError: D2O_main is not defined at onload

Once again, any help is greatly appreciated.

Jack Bashford · Accepted Answer · 2019-02-19 01:00:52Z

1

It's because nested functions are function-scoped - you'd need to move function D20_main outside of the IIFE it is contained in, effectively making it a globally accessible function:

(function (factory) {...})(function (require, exports) {...}); 
function D20_main() {...}

answered Feb 19, 2019 at 1:00

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

1 Comment

Sayantan Datta Over a year ago

I do not want to change the js file manually since it is autogenerated. Please suggest a modification to the .ts file or .html file.

Collectives™ on Stack Overflow

How to integrate typescript project with html

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