How to use code between TypeScript projects?

Let's say I have two projects with the following file structure

/my-projects/

  /project-a/
    lib.ts
    app.ts
    tsconfig.json

  /project-b/
    app.ts         // import '../project-a/lib.ts'
    tsconfig.json

I want to consume lib.ts, located in project-aas well project-b. How to do it?

  • Release it as an NPM module - absolutely do not want that , it is redundant for such simple use. I just want to share one file between two projects.

  • Use import '../project-a/lib.ts'- not working, TypeScript complains

'lib.ts' is not under 'rootDir'. 'rootDir' is expected to contain all source files.

  • Put it tsconfig.jsonone level up so that it covers both project-a, and project-b- cannot do this, the TypeScript configuration is slightly different for these projects. It’s also not very convenient, I don’t want to do it.

Any other ways?

+24
5

Typescript 3.0 .

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

, lib.ts ts, - 'lib'

lib tsconfig, :

// 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).
        }

project-a, project-b lib tsconfig

// project-a/ts-config.json
// project-b/ts-config.json
{
        "compilerOptions": {
            "target": "es5", 
            "module": "es2015",
            "moduleResolution": "node"
            // ...
        },
        "references": [
            { "path": "../lib" }
        ]
    }

lib. index.ts, , .

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

, , lib/lib.ts :

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

log lib/lib.ts project-a, project-b.

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

intelissense , project-a project-b, :

tsc -b 

( lib), (project-a project-b).

lib. (*.d.ts), lib.

lib/tsconfig.json :

"declaration": true,

, project-a/app.ts F12 Visual Studio, . , lib/tsconfig.json :

"declarationMap": true,

github, :

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

+12

'paths' CompilerOptions tsconfig.json

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

.

enter image description here

tsconfig.json, ts-

{
  "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"
  ]
}

.

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

, @qqilihq - node_modules.

lerna ( , , - , ).

, , , , .

:

/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)

, node_modules .

, :

  • common-code main types package.json
  • common-code ,
  • common-code declaration tsconfig.json

, , , "", , , , .

0

. , TypeScript.

0

, NPM, ( ):

/my-projects/

  /node_modules/
    /my-lib/
      lib.ts
      tsconfig.json
      package.json

  /project-a/
    app.ts
    tsconfig.json

  /project-b/
    app.ts         
    tsconfig.json

, node_modules ( NPM, , ).

, project-a project-b lib import { Whatever } from 'my-lib'.

:

  • my-lib (.. .d.ts lib). , my-lib, my-lib/package.json :

    {
      "name": "my-types",
      "version": "0.0.0",
      "private": true,
      "types": "lib/index"
    }
    
  • , my-lib , , , my-lib, .js "main" package.json, .js.

  • The most important thing: Despite its name, it /my-projects/node_modules only contains user code, not dependent installed (they are actually in separate projects project-a/node_modulesand project-b/node_modules). This means that there is an explicit git ignore option that un- means the directory /node_modules.

Is this a clean solution? Probably not. Did my problem solve? Yes. Am I glad to hear about suggestions for improvement? Absolutely!

-1
source

Source: https://habr.com/ru/post/1690483/


All Articles