How to use javascript in typescript

Issue

I have a javascript file called ui.js.

Inside ui.js is UI setup code.

if (!("ontouchstart" in document.documentElement)) {
    document.documentElement.className += " no-touch";
    var jScrollOptions = {
        autoReinitialise: true,
        autoReinitialiseDelay: 100
    };

    $('.box-typical-body').jScrollPane(jScrollOptions);
    $('.side-menu').jScrollPane(jScrollOptions);
    $('.scrollable-block').jScrollPane(jScrollOptions);
}

I would like to be able to call this from typescript.

I don't want to convert the code to typescript as there are hundreds of lines and it's not really necessary. It just needs to be one once after the UI is ready.

It seems to me that I should be able to wrap it in a function, and then call that function from typescript.

But I have not been able to figure out how to do that.

Note: Not a duplicate of earlier question, as that was how to convert js, not use it directly with as little modification as possible.

Solution

You have two main options.

Option 1: Add JS to your TS compilation context

Simply set allowJs to true in your tsconfig.json compilerOptions and then make sure the .js file is included using files/include/exclude etc.

Option 2: Declare your JS for use in your TS

e.g. if you are going to call a js function anExampleFunction you can simply create a declaration (in a .d.ts file):

declare const anExampleFunction: Function;

And now you will be able to call the function from TypeScript.

More

• Some tips on migrating from JS to TS: https://basarat.gitbook.io/typescript/type-system/migrating
• More on declaration files: https://basarat.gitbook.io/typescript/type-system/intro

Answered By - basarat