How enable Project References for TypeScript

This topic contains 9 replies, has 4 voices, and was last updated by Profile photo of support-swapna support-swapna 2 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #505908
    Profile photo of gorand
    gorand
    Participant

    Hellow!

    How to establish a connection between TypeScript project in Eclipse to a second project could inherit classes from the first protject?
    See attached pictures.
    I have created two projects, created in the first module pkgTest1 and class Test1
    in the second and created a module pkgTest2 class Test2 extends pkgTest1.Test1 and enable Reference to first project – but get the error: Can not find name ‘pkgTest1’.
    Why not find WebClipse Test1 class and pkgTest1 module?
    How to make reference to another Eclipse project?

    Attachments:
    You must be logged in to view attached files.
    #505917 Reply
    Profile photo of support-piotr
    support-piotr
    Moderator

    Gorand,

    Unfortunately it’s not as simple with TypeScript project as it is with Java projects. The main thing to keep in mind, when doing such stuff is that your TypeScript code should compile from the command line tools – be it tsc, grunt, gulp, webpack or Maven. And those tools do not understand Eclipse projects structure. That’s why we have not provided similar support as is done by Palantir’s TypeScript plugin. It just doesn’t work with command line tools. Our goal is to achieve 100% compatibility with tsconfig.json and do multi-project support the TypeScript way.

    Nowadays, most of the TypeScript applications are structured using import/export declarations instead of module/namespace nomenclature you are using and I would advise switching to it. In this case the example would look as follows:

    Test1/src/test1.ts

    Test2/src/test2.ts

    Now, there are multiple ways to connect those two projects.

    One is to use TS 2.0 paths compiler option along with baseUrl. It allows to map reference to a module to it’s source location and use it during compilation time.

    Test2/tsconfig.json

    Unfortunately it doesn’t work properly with our tooling at the moment and we will fix it ASAP, most likely for the upcoming release.

    The other option would be to have a 2 stage compilation. Test1 output directory would be Test2/node_modules/Test1. That way, the Test1 module will be compiled on its own according to it’s own separated rules from tsconfig.json (in the previous options rules from Test2 tsconfig.json would be applied to Test1 source code).

    Test1/tsconfig.json

    Note the presence of "declaration": true – it will emit *.d.ts file next to transpiled *.js file to provide type information, which can be consumed in Test2 project. Again, this solution works only partially with current version of support as due to a bug, d.ts file is not generate. We hope to fix it ASAP, most likely for the next release.

    Please let us know, what do you think about proposed solution assuming that they will work with our tooling within a week. Note that they both work correctly when running tsc from the command line on the projects.

    Best regards,
    Piotr Tomiak

    #505990 Reply
    Profile photo of gorand
    gorand
    Participant

    Hello.
    I look forward to when it is run, at least one of the following methods you. At the moment I checked, both – and both do not work.

    I’m sorry, I’m using google translator.
    You asked my opinion about these methods, that’s my opinion (I do not scold you, I just express my opinion it would be better)

    I think you suggested ways of working. So you can work, but it is not very convenient. I do not find it convenient to register a bunch of classes in the json file or in code through the import and all this in the manual mode. When you move a class to a new location, or change its name, you will need to run through all the files and make changes hands.

    Your project is called Webclipse – that is very similar to Eclipse, so a person buying your product can be expected to use all the infrastructure Eclipse development environment. However, you use the command line to call the others already ready-made projects and because of this you can not make full use of the development environment for that and created their own product.
    I think this is not quite true!
    I understand that by using the ready-made solutions you greatly accelerates the development of its product – but it is so well leads to limited opportunities for your product.
    I thought the first thing that your product will use the Project References to link the two projects in Eclipse. I thought that your product will know which projects he had compiled, and he will have the necessary data in the memory, not to compile the same thing several times.
    It seems to me not the best first saved to disk (this is a slow operation) image ad of all classes, functions and variables, and then the file to read (also not a fast operation, even with file system caching) and parse it again (which is not very fast ).
    I myself wrote TypeScript compiler and found out how much work is necessary to perform a parser to parse the text.

    Let’s say I have created 20 projects that connect my generic project of 500 classes, and that’s all it first resets to disk, and then for each of the 20 projects is parsed. I think it will be slow work, but in Java I created more classes – and it works great in Eclipse, even with a bunch of projects and cross-references.

    At this point I need Eclipse opportunities for quick syntax checking and type checking for typescript.
    I plan to create multiple projects inherit my generic project (framework engine).

    #505992 Reply
    Profile photo of support-piotr
    support-piotr
    Moderator

    Hi Gorand!

    Thank you very much for your elaborated feedback! I agree that the Eclipse way of doing project connections is much more convenient, however the problem is with distribution of the compiled code. How do you want to package and distribute your solution? In which JavaScript environment will it run? Content assist and validation will be of no use if you can’t run your solution.

    As far as performance is concerned, the first solution with using paths does not have any performance problems. All files are parsed only once. This is a TypeScript way of specifying other projects as source folders for your project on your build path. It doesn’t maintain good separation between projects as all sources are compiled in context of one project. This is how guys doing Angular 2 development have structured their source code – https://github.com/angular/angular/tree/master/modules . You can see that each module (@angular/*) is in separate directory and uses module imports (e.g. “@angular/core”) to include other modules. tsconfig.json is common for all of them. Each module can be published separately.

    As far as second solution is concerned, it is more similar to Java-like project dependency on the build path. JDT builds each project to the output directory (bin) and that is used as a classpath source to other projects. I guess JDT could optimize here and use cached version of class file without need to reread it from drive. Anyway, the performance in this case is not gonna be that slow, as files are rebuilt incrementally. So in normal flow you wouldn’t see much of a slow down.

    Please let me know how do you plan to compile, package, distribute and run your code! This will help us to find the best solution for you.

    Best regards,
    Piotr Tomiak

    #505997 Reply
    Profile photo of gorand
    gorand
    Participant

    Hellow!

    I create browser-based games for mobile devices. Therefore, it is important to minimize the amount of code and not use latest javascript facilities for older phones.

    When programming I create multiple files for each task its own file, which is the logic of this file. Sometimes I even agree with the methods of a class in several different files.
    Then my system on the fly collect (by the rules) these files into a single file, which will be pumped to the client. My system is preparing several versions of this file, for the simple player (standart), administrator (unique admin pages, methods and events), for the tester (total enumerate all JavaScript lines for send name class, name method, number line and full text error to the server) and the main thing for different models of mobile devices, removing for each version of a piece of code that should not be there.
    Total boot 2 I load a JavaScript file, the first is a generic file, which specifies the methods and properties common standard for all games, and the second file will contain the expanding methods and events for a particular game.

    Previously, I wrote directly to the JavaScript – but when the amount of code has grown to enormous proportions – often started to get a typing error (I forget in which the object that is), so I decided to translate my project on the typescript. Then I saw the typescript universally compiles into JavaScript which gets too much unnecessary code that I do not need, and then I wrote my own typescript compiler that compiles my fly the necessary files into a single JavaScript file on certain rules for each game.

    I use the redirection of its standard methods of its generic project, new methods for each game. For example:

    —project generic:—
    module pkgGeneric {
    export class Game {
    type=null;
    run(){}
    addEvent(e){…}

    }
    }
    var mGame=new pkgGeneric.Game();
    –compiled javascript–
    function Game(){}
    Game.prototype={
    type: null
    ,run: function(){}
    ,addEvent: function(e){…}

    }
    var mGame=new Game();

    —project game:—
    module pkgGame1 {
    export class Game extends pkgGeneric.Game {
    type=”game1″;
    run(){var t=this; console.log(“runned”+t.type); t.addEvent(…); }

    }
    }
    declare var mGame:pkgGame1.Game(); // for typing typescript
    –compiled javascript–
    Eu.copyTo({
    type: “game1”
    ,run: function(){var t=this; console.log(“runned”+t.type); t.addEvent(…); }

    }, Game.prototype);
    // removed declare for javascript

    That’s what makes my compiler, because I do not need versatility. Eu class and its methods, I created directly in JavaScript. All I need to TypeScript would show me the error directly in Eclipse during coding and prompted in any object, what methods are. All of this should take away from me as little manual work, and as much as possible automatic. I would like to understand your product machine Project References itself would create the necessary files .d.ts that would automatically be included on the command line when checking spelling code.
    Your product is already 4 I’m trying to use it.

    In one project, your product works very well (when you finish all that is promised), but here as a number of projects, you do, and I will try to get both.

    #506223 Reply
    Profile photo of support-piotr
    support-piotr
    Moderator

    Gorand,

    Thank you for the information! We’re looking into allowing you to use content assist and validation with your unusual setup. I’ll keep you posted.

    Best regards,
    Piotr Tomiak

    #511864 Reply
    Profile photo of alexandre
    alexandre
    Participant

    Hello!

    what’s new about this problème?
    I have also two typescript projects A and B at the same level in arborescence.
    Project A wants to see (compile and concent assist) sub parts of project B.
    Compile is ok with my tsconfig.json which references “baseUrl” and “paths”.
    But content assist does not work…

    Thank you for your answers!

    Alexandre

    #511971 Reply
    Profile photo of support-swapna
    support-swapna
    Moderator

    Alexandre,

    Sorry that you are seeing this issue.

    You mentioned that the compile works.Can you please clarify how the projects are compiled? Are you running tsc from command line on the projects? Do you see any compilation errors for the projects in Webclipse?

    Apologies for inconvenience caused.

    –Swapna
    MyEclipse Support

    #511978 Reply
    Profile photo of alexandre
    alexandre
    Participant

    Hello,

    thanks for answer.
    In fact i compile from gulp process which returns no error (in webclipse or in an external console)
    But typescript editor in webclipse show always errors like : “Cannot find module XXX”, “Cannot find name JQuery”… etc

    JQuery and others modules are in project B (folder B) and my project A (folder A) needs them…
    – Workspace :
    – A : project to edit
    – B : external modules like JQuery…

    Cordially
    Alexandre

    #512294 Reply
    Profile photo of support-swapna
    support-swapna
    Moderator

    Alexandre,

    Thank you for the details. The dev team is looking into a solution for your setup.
    We will keep you posted as soon as we have more information.

    Apologies for inconvenience caused.

    –Swapna
    MyEclipse Support

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.