从JavaScript代码调用Typescript函数

Question

Due to limitations of IE10 and below, I have to recreate the Import/Upload functionality that I created since FileReader is not supported. I decided to use iFrame to meet the requirement to be able to upload using old browser.

My form:

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.php">
    <input name="file" id="file" size="27" type="file" /><br />
    <input type="submit" id="import" value="Import" /><br />
</form>

My javascript. I didn't finish the javascript code snippet because I realized that I had to do bigger rework if I call the action directly.

$('#import').click(function () {
    $('#imageForm').submit();

    $('#iFrameImage').load(function () {
        $('#file').val('');
        $.get('ImportExportController/Put');
    });
});

See code below that the action in my controller is being called by typescript. Previously, I can just use ng-click then call this method.

 public Import(xml, parentNode): restangular.IPromise<any> {
        var vr = {
            IsOk: false,
            Data: [xml, somethinghere],
            Errors: []
        };
        return this.restangular.one('Import', '0').customPUT(vr);
    }

I need this typescript function (which is my viewmodel as angular) to be called using javascript and unfortunately I have no idea how.

The concept is to be able to upload a file via iFrame then on Upload is to call the Typescript function.

Answer 1

Typescript is compiled into javascript so this can be done as you would call a javascript function. Having said that, the structure can change a little from what you would expect, the best way I learnt how this worked was to compare the Typescript file to the javascript file that was compiled from it. If you have modules/classes in typescript they will become part of the path to call the function. Example:

class Foo{
    constructor(){}

    public Bar = () : string =>{
        return "This is a string";
    }
}

module FooModule {
    export var FooInstance = new Foo();
}

To call this in typescript or javascript you would do (provided you have imported the page correctly).

FooModule.FooInstance.Bar();