How to share code between TypeScript projects?

Since Typescript 3.0 this can be done with Project References.

Typescript docs: https://www.typescriptlang.org/docs/handbook/project-references.html

I believe you would have to move lib.ts into a small ts project called something like 'lib'

The lib project should have a tsconfig containing:

// lib/tsconfig.json
    {
          "compilerOptions": {
            /* Truncated compiler options to list only relevant options */
            "declaration": true, 
            "declarationMap": true,
            "rootDir": ".",   
            "composite": true,     
          },
          "references": []  // * Any project that is referenced must itself have a `references` array (which may be empty).
        }

Then in both project-a and project-b add the reference to this lib project into your tsconfig

// project-a/ts-config.json
// project-b/ts-config.json
{
        "compilerOptions": {
            "target": "es5", 
            "module": "es2015",
            "moduleResolution": "node"
            // ...
        },
        "references": [
            { 
                "path": "../lib",
                // add 'prepend' if you want to include the referenced project in your output file
                "prepend": true, 
            }
        ]
    }

In the lib project. Create a file index.ts which should export all your code you want to share with other projects.

// lib/index.ts    
export * from 'lib.ts';

Now, let's say lib/lib.ts looks like this:

// lib/lib.ts
export const log = (message: string) => console.log(message);

You can now import the log function from lib/lib.ts in both project-a and project-b

// project-a/app.ts 
// project-b/app.ts
import { log } from '../lib';
log("This is a message");

Before your intelissense will work, you now need to build both your project-a and project-b using:

tsc -b 

Which will first build your project references (lib in this case) and then build the current project (project-a or project-b).

The typescript compiler will not look at the actual typescript files from lib. Instead it will only use the typescript declaration files (*.d.ts) generated when building the lib project.

That's why your lib/tsconfig.json file must contain:

"declaration": true,

However, if you navigate to the definition of the log function in project-a/app.ts using F12 key in Visual Studio code, you'll be shown the correct typescript file. At least, if you have correctly setup your lib/tsconfig.json with:

"declarationMap": true,

I've create a small github repo demonstrating this example of project references with typescript:

https://github.com/thdk/TS3-projects-references-example

This can be achieved with use of 'paths' property of 'CompilerOptions' in tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@otherProject/*": [
        "../otherProject/src/*"
      ]
    }
  },
}

Below is a screenshot of folder structure.

Below is content of tsconfig.json which references other ts-project

{
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./tsc-out",
    "sourceMap": false,
    "declaration": false,
    "moduleResolution": "node",
    "module": "es6",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@src/*": [ "src/*" ],
      "@qc/*": [
        "../Pti.Web/ClientApp/src/app/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist",
    "tsc-out"
  ]
}

Below is import statement to reference exports from other project.

import { IntegrationMessageState } from '@qc/shared/states/integration-message.state';

I think that @qqilihq is on the right track with their response - Although there are the noted potential problems with manually maintaining the contents of a node_modules directory.

I've had some luck managing this by using lerna (although there are a number of other similar tools out there, for example yarn workspaces seem to be somewhat similar, although I've not used them myself).

I'll just say upfront that this might be a little heavyweight for what you're talking about, but it does give your project a lot of flexibility to grow in the future.

With this pattern, your code would end up looking something like:

/my-projects/
    /common-code/
        lib.ts
        tsconfig.json
        package.json
    /project-a/
        app.ts (Can import common-code)
        tsconfig.json
        package.json (with a dependency on common-code)
    /project-b/
        app.ts (Can import common-code)
        tsconfig.json
        package.json (with a dependency on common-code)

The general theory here is that the tool creates symlinks between your internal libraries and the node_modules directories of their dependant packages.

The main pitfalls I've encountered doing this are

• common-code has to have both a main and types property set in its package.json file
• common-code has to be compiled before any of its dependencies can rely on it
• common-code has to have declaration set to true in its tsconfig.json

My general experience with this has been pretty positive, as once you've got the basic idea understood, there's very little 'magic' in it, its simply a set of standard node packages that happen to share a directory.

To build on @ThdK’s excellent suggestion of using Project References, I also recommend incorporating npm workspaces.
Shameless plug, I wrote a post about it.

npm workspaces is a feature set in the npm CLI for managing multiple packages within a single, top-level root package. This setup automatically links packages defined in the root package.json when running npm install. In practice, workspaces place the node_modules folder at the root, creating symlinks to all workspace packages.

It avoids import paths issues like ../../../../../libs/dist/data-access/loader/common.js which expose the project's internal folder structure without having the same runtime problem as using paths aliasing.

The resulting folder tree has node_modules at the root, with symlinks to the workspace packages:

.
├── node_modules
│   ├── libs -> ../libs  (symlink)
│   ├── project-a -> ../project-a  (symlink)
│   └── project-b -> ../project-b  (symlink)
├── package.json
├── libs
│   ├── lib.ts
│   ├── package.json
│   └── tsconfig.json
├── project-a
│   ├── app.ts
│   ├── package.json
│   └── tsconfig.json
├── project-b
│   ├── app.ts
│   ├── package.json
│   └── tsconfig.json

For completeness, here are the package.json, tsconfig.json, and app.ts files:

// libs package.json
{
  "name": "libs",
  "version": "1.0.0",
  "exports": {
    "./*": "./*" // package export controls
  }
}

// libs tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "composite": true // the important part
  }
}

// project-a package.json (same for project-b)
{
  "name": "project-a",
  "version": "1.0.0",
  "dependencies": {
    "libs": "1.0.0" // dependency on the common library
  }
}

// project-a tsconfig.json (same for project-b)
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16"
  },
  "references": [
    {
      "path": "../libs" // reference for tsc on the common library
    }
  ]
}

// root workspace package.json
{
  "private": true, // must be private
  "name": "root-workspace",
  "workspaces": ["libs", "project-a", "project-b"] // the packages to combine in the workspace
}

// project-a/app.ts 
// project-b/app.ts
import { log } from 'libs/lib.js'; // clean import, no project structure
log("This is a message");

Since I'm the only dev working on 2 projects which require some shared code folder I've setup a 2-way real time sync between the common code shared folders.

project A
 - shared/ -> 2-way sync with project B
 - abc/

project B
 - shared/ -> 2-way sync with project A
 - xyz/

It's a one-time quick setup but gives benefits like:

• no hassle of configuring and managing mono-repo/multiple tsconfig
• no build step to get latest code, works instantly
• works with cloud build tools as shared code is inside repo instead of symlink
• easier to debug locally as all files are within the project
• I can further put checks on shared folder with commit hooks/husky and throw warnings etc.

And in-case if I want to collaborate with other team members, I can mention to use this sync tool as part of project setup.

In many cases using symlink for dependencies is the easiest way, sometimes it also make sense to symlink tsconfig.json.

It won't work for all cases, but it works for many, especially if used with bun or deno.

A bit different approach, but you can use a git submodule as well. https://git-scm.com/book/en/v2/Git-Tools-Submodules