[gorand]

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.

[support-piotr]

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

export class Test1 {
  public fnTest1() {}
}

Test2/src/test2.ts

import { Test1 } from "Test1/src/test1"

new Test1().fnTest1()

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

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "moduleResolution": "node",
    "paths": {
      "Test1": ["../Test1"],
      "Test1/*": ["../Test1/*"]
    },
    "baseUrl" : "."
  },
  "compileOnSave": false
}

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

{
  "compilerOptions": {
    "target": "ES3",
    "module": "CommonJS",
    "moduleResolution": "classic",
    "outDir": "../Test2/node_modules/Test1",
    "declaration": true
  },
  "compileOnSave": true
}

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

• This reply was modified 7 years, 11 months ago by Genuitec Administrator.
• This reply was modified 7 years, 11 months ago by Genuitec Administrator.

[support-piotr]

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

[support-piotr]

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

[alexandre]

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

[support-swapna]

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

[alexandre]

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

–

[support-swapna]

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

[Author]

Posts