CODEWITHSUNDEEP
intellij-ideatypescript
thed0ctor
thed0ctor

Reputation: 1396

How do you import jquery's definition file in Typescript 1.0?

I've searched online but couldn't find anything that worked, most articles were outdated.

All I'm trying to do is include jQuery's definition file in another typescript file.

I'm working in Intellij IDEA Ultimate 13.1. Here is the code:

Foo.ts

import jquery = require("./jquery");

I have the jquery.d.ts in the same directory as Foo.ts

The output I get when compiling is:

/opt/local/bin/tsc --sourcemap --module amd Foo.ts
/.../Foo.ts(1,1): error TS2071: Unable to resolve external module '"./jquery"'.
/.../Foo.ts(1,1): error TS2072: Module cannot be aliased to a non-module type.

It has something to do with it being a definition file. Importing normal ts files works fine. I tried using the suggestions found here, but the syntax has changed since then.

Any help is appreciated.

Upvotes: 2

Views: 5963

Answers (2)

thed0ctor
thed0ctor

Reputation: 1396

Ok after hours and hours I finally figured out what I wanted to do.

This is how I "elegantly" imported both normal .ts and .d.ts files

I'd like to say that these pages helped extensively in my search:

http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/ http://www.codeproject.com/Articles/528295/ModularizationplusinplusTypeScript

I am using Intellij IDEA Ultimate 13.1.4 and TypeScript 1.0.0

My file watcher arguments in Intellij is --sourcemap --module amd $FileName$

What I've learned (hope this helps others just starting out):

Okay so you need both the javascript and ts files to make the libraries like jQuery work (i.e. the .d.ts files).

The ts files I post below are verbatim. For example in Pony.ts there are no reference tags at the top, that is intentional.

My directory layout is:

..\
   Website\
          \js
             jquery.js
             jquery-ui.min.js
             require.js
          \ts
             \lib
                 Animal.ts
                 Pony.ts
                 collections.ts <--- from: https://github.com/basarat/typescript-collections
                 jquery.d.ts     <-----
                 jqueryui.d.ts   <---- |--- from DefinatelyTyped: https://github.com/borisyankov/DefinitelyTyped
                 require.d.ts    <-----
              Main.ts
              Config.ts
           \css
                ...
           ...
           Index.html

And of course the generated js files are there in their respected directories as well. index.html

<!DOCTYPE html>
<html>
<head lang = "en">
   <meta charset = "UTF-8">
   <title></title>
   <script data-main="ts/Config" src="js/require.js"></script>

   <link rel="stylesheet" href="css/style.css">
...

Config.ts

///<reference path="./MainApp.ts" />
///<reference path="./lib/require.d.ts" />

require.config({
    baseUrl: './',
    paths: {
        'jquery': 'js/jquery',
        'jqueryui': 'js/jquery-ui.min',
        'collections': 'ts/lib/collections',
        'Main':'ts/Main',
        'Animal':'ts/lib/Animal',
        'Pony':'ts/lib/Animal'
    }
});

require(['Main'], (Main) => {
    var startApp = new Main();
    startApp.main("");
});

Main.ts

///<reference path="./lib/jquery.d.ts" />
import Pony = require("ts/lib/Pony");
import $ = require("jquery");
class Main {

    public main(args:string[]):void {
        $(document).ready(function() {
            console.log("helloo!");
            var pony:Pony = new Pony("bobb");
            var pony2:Pony = new Pony("Anthony");
            pony.bite();
            pony2.bite();
        });
    }

}

export = Main;

note: For whatever reason the compiler accepted both import Pony = require("**ts/**lib/Pony") and import Pony = require("lib/Pony"). So basically the require in the main script for this class needed a more "full" path relative to the Index.html page. No clue why, comments are encouraged. Also why the import $ = require("jquery"); worked without a "fuller" path perplexed me as well but whatever. Continuing on:

Pony.ts

import Animal = require("Animal");

class Pony extends Animal {
    bite() {
        alert("II, " + this.name + " have bitten you!");
    }
}

export = Pony;

Animal.ts

class Animal {
    name:string;
    constructor(name:string) {
        this.name = name;
        console.log("animal");
    }
}

export = Animal;

As mentioned on the first link provided, you need to have export = ClassName at the bottom of the file. I tried doing export class ClassName ... but that didn't work.

Upvotes: 1

user1233508
user1233508

Reputation:

Declaration files need to be referenced differently.

First, include a reference to the declaration file. The compiler will parse it and know that a module called jquery¹ exists, but it will be made available at runtime by some other means.

///<reference path="./jquery.d.ts" />

Then, change your require call to load that jquery module by its name, not its filename:

import jQuery = require('jquery');

When the compiler parses this line, it will try to generate the code needed to load that module. It will consult its known modules list, find jquery in it, and load the module's details from the declaration file for type-checking.

The loading code generated will be the same as it would be for a normal module, and it will be the responsibility of require.js to turn that module name into the right filename. If the module name does not match its filename (or the file is in another directory), you have to tell require.js which file this module corresponds to:

require.config({
  ...
  paths: {
      "jquery": "dir/lib/jquery"
  }

});

¹ Here I am assuming that your declaration file is the one from DefinitelyTyped, where the exported module is called jquery. If it's a different file, the exported module name might be different.

Sidenote: I have written Typescript code in both IntelliJ and Visual Studio Express, and in my opinion the latter wins hands down, IntelliJ has some odd behaviors with TS. If you were on Windows, I'd recommend trying VS, but it seems that's not an option.

Upvotes: 1

Related Questions