How to build Typescript code in JS using a function?

Question

Trying to build typescript code in JS so i can display on UI for user to play with the code , is there a way to create this code as a typescript instead of text so it compile as well ? Any help here will be highly appreciated couldn't find any source related to this issue.

data contains interfaces

main.js

function buildTypescript(data) {
    var _ref = window.activeOperation;
    var modelData = getModelData(data);
    var text = '';
        text += "import {Api as IngenSDK} from '@SSDK'" + ';\n\n';
        text += modelData;
        text += 'app.Api.setConfig({\n    "env": "SIT3"\n});\n\n';
        text += _ref + '(' + JSON.stringify(SDKresult[_ref].request, null, 4) + ', function(result) {\n //Your code goes here \n debugger; \n console.log(result); \n});';
        $('#request_method_TS').text(text); 
}

    function getModelData(data){
        var activePath = window.activePath.toLowerCase();
        var _interface;

        $.each(data.children, function(id, item){
            // item.name would be string like "@SDK/core/interface/member/Details";
            var path = item.name.replace(/\"/g, "");
            if (path.toLowerCase().includes(activePath)) {
                console.log('OBJ', item);
                _interface = createInterfaces(path,item.children);     
            }
        });

        return _interface;
    }

    function createInterfaces(path, data) {
       const imports  = data.map(d => d.name).join(', ');
        return `import { ${imports} } from '${path}';\n\n`;

    }

html

<pre id="request_method_TS" style="margin: 5px;"></pre>

First disable angular security things, by this you can add elements with events in dynamic fashion. Second use eval with newly written JavaScript. — mukund patel, Sep 19 '19 at 15:23
https://stackoverflow.com/questions/48913344/angular-5-adding-html-content-dynamically — mukund patel, Sep 19 '19 at 15:52
@mukundpatel I'd take a read through [this](https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea). There's almost no reason to use `eval`, especially over `new Function(...)`. I think Krillgar was solely pointing out the humor in *"Disable security and use `eval`"*, as that would likely make any JS developer shudder :) — Tyler Roper, Sep 19 '19 at 18:21

score 0 · Answer 1 · answered Sep 19 '19 at 18:16

You can create the Typescript as executable by doing something like -

 const executableTypescript = new Function(typescriptDataAsText);

The typescript code in the string will already be compiled at this point.

To execute it, you just call the newly created function like -

 executableTypescript();

Check by running the below snippet that the Typescript code of logging the message in the variable is executed.
Note: For your case, if the modelData and more such Typescript data is included, it should be a part of a new module since it has import statements and they are required to be on top of a module.

var path = "/filepath"
var data = [
  {
        name: "IParam"
    },
    {
        name: "IError"
    }
]

function createInterfaces(path, data){
 const imports  = data.map(d => d.name).join(', ');
 return `import { ${imports} } from '${path}';\n\n`;
}

function buildTypescript(data) {
    // To include this data as part of your text, make sure that it's a part of a new module
    const modelData = createInterfaces(path,data);
    const text = `
        let message = "Typecript executed";\n\n
        console.log(message)`;
    return text;
}

const typescriptDataAsText = buildTypescript(data);

const executableTypescript = new Function(typescriptDataAsText);

executableTypescript()

How to build Typescript code in JS using a function?

1 Answers1

Linked