TypeScript - External Reference Files

Often, you need to reference classes in other files (see Ambient Declarations). To do this, use the reference snippet:

Look at the example below. VendingMachine Class is declared in a vending-machine.ts. Bootstrapper.ts is trying to instantiate the VendingMachine class but has not idea what that Type is. It needs a reference to that other file (much like a using statement in .NET) so it can have access to those libraries.

http://definitelytyped.org/

Tip: type the word ref and hit enter.

A lot of times, you will need to use Definition files - files that declare and define all the external types (from other libraries) such as jQuery, Knockout, and so on.

You can recognize the Definition Files due to the “d” in their file names.

/// <reference path="definition-files/knockout-3.4.d.ts" />
/// <reference path=”jquery.d.ts” />
    

Observations

FYI - I noticed that VS Code automatically picks up and uses the Definition Files without needed to make eternal references to them. Other IDEs may or may not do this.

Through trial & error, I was able to install the jQuery definition file through npm.

Doing this seemed to installed the jQuery file globally and then tsc was happy. I was able to remove my reference to the definition file AND not use an ambient declaration. Still worked.

namespace TypeScriptDemos.DefinitionFiles
{
    var message: string = "Hello World";

    window.onload = function ()
    {
        $("#hello-world-label").html(message);
    };
}

Also...here is a good link on a more modern way to do this. See answer #2.

https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript