Nickon Nickon - 1 month ago 18
TypeScript Question

Cross-project references between two projects

Is it possible to make a reference between two TypeScript projects? Assume we have the following project structure:

Structure

Module1.ts
contains:

module TestModule {
export interface Interface1 {
}
}


Module2.ts
contains:

module TestModule {
export interface Interface2 extends Interface1 {
}
}


Test1
is referenced in
Test2
. I get an error
Could not find symbol 'Interface1'
in
Module2.ts
. It works within one project, but I don't know how to make it visible from the other project... Maybe it's not possible for now.

[Edit 1.]

When I try to use
TestModule.Interface1
pattern, I get the same error (said in different way). But the IntelliSense sees my
Interface1
:

IntelliSense

[Edit 2.]

I have noticed I can't use files from the other project. Even if I have a correct reference (
/// <reference ...
) added and linked all the files in my 1st project.

Answer

There's lots of ways you can do this.

Option 1 - Build script

Use something like gulp-ts, grunt-ts, or just a batch script to copy the files over into a folder in the main project.

Alternatively, run a build event in Visual Studio that will copy the files over to the main project.

Option 2 - npm package

If you use npm, you could create a package for your other project. Then you can use your package in your main project. Specifying a local dependency is a good way to do this or by using something like sinopia, which is a private repository server. I've never used it, but it looks like it would work well.

Option 3 - NuGet package

You could look into creating a nuget package and then installing it locally.

Option 4 - --declaration --outDir compiler option

You can set the --outDir compiler option or the outDir property in tsconfig.json with the directory to your other project then also compile it with --declaration so that it generates the declaration files (.d.ts) too. For example: --declaration --outDir ../Test1/External.

Original Answer (Using --out)

You can do something similar in Visual Studio if you right click on your library project and click properties. In the TypeScript Build tab, check off the option to Combine JavaScript output into file and specify the location in your main project you want it to go (Ex. $(SolutionDir)/TypedApp/External/TypedLibrary.js). Then also check off Generate declaration files in order to generate a .d.ts file.

Setting up project for automated builds

Once this is done, build your library project and then include the .js, and .d.ts in your main project. Include the .js file in your html and reference the .d.ts in your typescript files.

Include files in main project

Each time you rebuild the library project, it will automatically update the main project with the changes.

Comments