Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the correct way to use requireJS with typescript?

The examples I have found here and here say to use module(). However, when I compile I get "warning TS7021: 'module(...)' is deprecated. Use 'require(...)' instead."

So a couple of basic questions:

  1. When using typescript and requireJS, how do I access a class in one .ts file from another .ts file where requireJS will load the second file and give me the class in the first file?
  2. Is there a way to do the standard requireJS approach with two .ts files where the define() at the top loads the second ts file and returns back the object it builds at the end?
  3. Sort-of the same as question #2. From a java script file, can I use the define() construct on a type script file to get the instantiated object? If so, how?

Update: The following gives me a tsc compile error:

///<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 { 
like image 229
David Thielen Avatar asked Nov 19 '13 18:11

David Thielen


People also ask

How do I run RequireJS?

RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. To include the Require. js file, you need to add the script tag in the html file.

What is the use of RequireJS?

RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.

How do I use TypeScript modules?

A module can be created using the keyword export and a module can be used in another module using the keyword import . In TypeScript, files containing a top-level export or import are considered modules. For example, we can make the above files as modules as below. console.

Should I use RequireJS?

Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order.


2 Answers

I would have commented on David's reply to basarat's answer (regarding modules and classes), but I don't have the reputation. I know this question is stale, but I didn't find an answer elsewhere.

I succeeded by using basarat's videos, combined with some other resources, to figure it out for classes like David Thielen needed. Note that I no longer have entries for my ts source files, but I do have amd-dependency and import statements. In Eclipse with palantir's TS plugin, my code completion and ability to jump from usage to definition is working with just the amd-dependency and import statements. The header files still need statements since they have nothing to do with deployment and are only used by the TS compiler. Note also that the .ts file extensions are used for reference statements but not the amd and import statements.

In Utils.ts I have:

///<reference path="headers/require.d.ts" />  export function getTime(){     var now = new Date();     return now.getHours()+":"+now.getMinutes()+':'+now.getSeconds(); } 

In OntologyRenderScaler I have:

///<reference path="headers/require.d.ts" />  ///<reference path="headers/d3.d.ts" /> ///<reference path="headers/jquery.d.ts" />  ///<amd-dependency path="Utils" />  import Utils = require('./Utils');  export class OntologyRenderScaler { ... Utils.getTime(); ... } 

In OntologyMappingOverview.ts I have:

///<reference path="headers/require.d.ts" />  ///<reference path="headers/d3.d.ts" /> ///<reference path="headers/jquery.d.ts" />  ///<amd-dependency path="Utils" /> ///<amd-dependency path="OntologyGraph" /> ///<amd-dependency path="OntologyFilterSliders" /> ///<amd-dependency path="FetchFromApi" /> ///<amd-dependency path="OntologyRenderScaler" /> ///<amd-dependency path="GraphView" />  ///<amd-dependency path="JQueryExtension" />  import Utils = require('./Utils'); import OntologyGraph = require('./OntologyGraph'); import OntologyRenderScaler = require('./OntologyRenderScaler'); import OntologyFilterSliders = require('./OntologyFilterSliders'); import GraphView = require('./GraphView');  export class OntologyMappingOverview extends GraphView.BaseGraphView implements GraphView.GraphView {     ontologyGraph: OntologyGraph.OntologyGraph;     renderScaler: OntologyRenderScaler.OntologyRenderScaler;     filterSliders: OntologyFilterSliders.MappingRangeSliders; ... this.renderScaler = new OntologyRenderScaler.OntologyRenderScaler(this.vis); ... } 

I didn't manage (yet!) to get things working like codeBelt suggested above, but an exchange we had on his blog revealed that if I get his approach working (with export MyClass at the bottom of the file), then I would not need to double up the imported identifer with the class name. I suppose it would export the class of interest rather than the namespace it is defined in (the implicit external module, i.e. the TypeScript file name).

like image 84
Eric Avatar answered Nov 12 '22 16:11

Eric


For :

When using typescript and requireJS, how do I access a class in one .ts file from another .ts file where requireJS will load the second file and give me the class in the first file? Is there a way to do the standard requireJS approach with two .ts files where the define() at the top loads the second ts file and returns back the object it builds at the end?

simply :

// from file a.ts export class Foo{  }  // from file b.ts // import  import aFile = require('a') // use:  var bar = new aFile.Foo(); 

and compile both files with --module amd flag.

For :

Sort-of the same as question #2. From a java script file, can I use the define() construct on a type script file to get the instantiated object? If so, how?

To use a.ts from b.js simply :

// import as a dependency: define(["require", "exports", 'a'], function(require, exports, aFile) {      // use:     var bar = new aFile.Foo(); }); 

This is similar to what you would get if you compile b.ts

like image 42
basarat Avatar answered Nov 12 '22 14:11

basarat