CODEWITHSUNDEEP
javascriptrequirejstypescript
David Thielen
David Thielen

Reputation: 32926

In javascript, using requireJS, how do I "require" a typescript object?

In my javascript file I have:

require(["menu/main-menu"], function (mainMenu) {

where main-menu is built from main-menu.ts. javascript/requireJS wants me to build up a define I return in main-menu. But typescript doesn't do that AFAIK.

How can I accomplish this?

Update: For example, the following tells me the export keyword is incorrect:

///<reference path='../../libs/ExtJS-4.2.0.d.ts' />
///<reference path='../../libs/require.d.ts' />

import fdm = require("./file-definitions");
require(["../../scripts/ribbon"], function () {

export module Menu {

    export class MainMenu {
    }
}

Upvotes: 0

Views: 799

Answers (2)

thomaux
thomaux

Reputation: 19718

If I understand your question correctly you want to access MainMenu in JavaScript using RequireJS? Then your JavaScript should look like:

require(["path/to/MainMenu"],function(mainMenu){
    mainMenu.doSomething();
});

Now, assuming you are using TypeScript 0.9.1 or later, you can assign a value to the exported value of your module. So you could write your MainMenu.ts file like this:

class MainMenu {
    doSomething(): void {
    }
}
export = MainMenu;

Edit: You are using the export statement inside of a function which is not allowed. If your code relies on the ribbon script being included, I suggest you require it with an import statement as well. So:

import ribbon = require("../../scripts/ribbon");

Now, if this is an external script and you haven't written it in TypeScript yourself, you need to tell the compiler this module exists. In your declaration file add the following:

declare module "../../scripts/ribbon" {};

A declaration file is a TypeScript file with the extension *.d.ts. It contains only declarations, not implementations. You could compare it to a C header file. For example, you can download a declaration file for jQuery. This will give you the TypeScript compiler support for jQuery without actually needing a TypeScript version of jQuery.

The same principle can be used here, for the ribbon file. If you don't already have a declaration file, simply add one to your project, for example: declarations.d.ts. If you are using Visual Studio as your editor, normally the TypeScript plugin should automatically pick up this declaration file. You can check if the file is correctly picked up in case the import statement for ribbon above does not throw an error. In case this does not work, simply add a reference statement in MainMenu.ts:

///<reference path='../../libs/declarations.d.ts' />

Provided you have created the declarations.d.ts file under the same lib as the other declaration files you were already referencing.

Upvotes: 1

basarat
basarat

Reputation: 275847

To do a manual require (e.g. for a lazy load) with a callback you can use the RequireJS definitions for TypeScript from DefinitelyTyped : https://github.com/borisyankov/DefinitelyTyped/tree/master/requirejs

Upvotes: 0

Related Questions