Looking for a working example where Electron.js and Typescript project references are used together

For larger projects my preferred strategy would be a monorepo. This structure allows you to separate the specific bits of your app while still being able to share one repository and/or common infrastructure.

If you are using yarn and you don't plan on e.g. publishing your sibling projects to NPM separately you can easily setup monorepo in your project using yarn workspaces, otherwise I would suggest using lerna.

These tools will set those links for you automatically so your projects can depend on each other, I am not sure about yarn but lerna was very good with creating a dependency graph of your projects and building them based on that so you didn't need to care about the order in which you build your projects.

It seems you are looking for npm link.

You need to arrange the main property of the three package.json files in order to refer to the relative build directoris; adding the dependencies between the three packages; last npm link each other the packages.

Let's say the three packages names are pkgA, pkgB and pkgC, with following commands you should achieve the desired result.

/pkgA $ npm link
/pkgB $ npm link
/pkgC $ npm link
/pkgA $ npm link pkgB
/pkgA $ npm link pkgC
/pkgB $ npm link pkgA
/pkgB $ npm link pkgC
/pkgC $ npm link pkgA
/pkgC $ npm link pkgB
/pkgA $ npm install
/pkgB $ npm install
/pkgC $ npm install

Hope this helps.

To answer your question for an example, I put together this simple project using Electron/TypeScript that holds multiple projects using TypeScript project references: https://github.com/SploxFox/MartinCowieExample

To execute, navigate to the Main directory and then:

npx electron .

Basically, what we're doing is just exposing modules, and then we include those components in a different Main project that is the one that is actually executed. First, we compile the individual components, and then we can compile the Main project and then run the Main project.

However, I don't recommend that you do this. Instead, you might want to use npm link -- which only creates the linkages on your computer, which is difficult to show an example of.

First, compile each project, and make sure you have type declarations on. We reference the compiled JS, not the raw source code when using different projects. Make sure that you have set the package name to what you want it to be in the package.json, then just navigate to each directory that you want to link to (so not your main directory) and do npm link. This doesn't change the package at all; rather it just creates a symlink in the user's npm AppData folder. In the directories in which you will reference another package, do npm link package-name to link to the other package.

Now you'll be able to use that package as if it were any other npm package, though the vscode autocompletion for linked packages isn't the best in my experience so you may need to manually type out the import statements.

EDIT: For the project, I added compAFunc as a dependency to compBFunc on the GitHub project. To build, navigate to the Main directory and do tsc --build. More info on project references: https://www.typescriptlang.org/docs/handbook/project-references.html