Using Typescript to resolve a package from a location other than the default node_modules directory

Question

Using Typescript to resolve a package from a location other than the default node_modules directory

I am currently delving into typescript and eager to start dabbling in creating packages.

Here is the current layout of my project:

myProject/
├── node_modules/
├── src/
│   ├── app
│       ├── index.ts
│   ├── packages
│       ├── database
│           ├── index.ts
├── package.json
├── tsconfig.json

As you can see, my src directory has an app folder for my application implementation and a package folder which is meant to be more abstract, potentially becoming a package in the future.

What I want is to be able to access my package modules by simply writing this in my app folder:

import Database from 'packages/database';

instead of

import Database from '../packages/database/index';

I have tried adjusting the paths configuration in the tsconfig.json file but haven't been successful:

{
  "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
      "packages": ["src/packages"]
    }
  }
}

Of course, I still want to maintain access to the node_modules folder as well...

Is there a way I can make this work?

Thank you for your advice!

typescript

Answer 1

Answer №1

One effective strategy to enhance your workflow is by breaking down your tasks into separate packages:

Consider creating a package specifically for handling database operations, which simplifies the database-related tasks.

To implement this approach, you'll need to restructure your project slightly:

myProject/
├── node_modules/
├── src/
│   ├── app
│       ├── index.ts
│   ├── packages
│       ├── database
│           ├── SomeClass.ts
│           ├── index.ts
├── package.json
├── tsconfig.json

Next, ensure to export all components in your database/index.ts file:

import SomeClass from './SomeClass'
import SomeOtherClass from './SomeOtherClass'

export {SomeClass, SomeOtherClass}

You can then access these components from your app folder simply by typing:

import {SomeClass} from 'package-database';

Remember to update your tsconfig.json as well, as it plays a crucial role in this setup:

{
    "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
        "package-database": ["src/packages/database"]
        }
    } 
}

Answer 2

One effective strategy to enhance your workflow is by breaking down your tasks into separate packages:

Consider creating a package specifically for handling database operations, which simplifies the database-related tasks.

To implement this approach, you'll need to restructure your project slightly:

myProject/
├── node_modules/
├── src/
│   ├── app
│       ├── index.ts
│   ├── packages
│       ├── database
│           ├── SomeClass.ts
│           ├── index.ts
├── package.json
├── tsconfig.json

Next, ensure to export all components in your database/index.ts file:

import SomeClass from './SomeClass'
import SomeOtherClass from './SomeOtherClass'

export {SomeClass, SomeOtherClass}

You can then access these components from your app folder simply by typing:

import {SomeClass} from 'package-database';

Remember to update your tsconfig.json as well, as it plays a crucial role in this setup:

{
    "compilerOptions": {

    ...

    "baseUrl": ".",
    "paths": {
        "package-database": ["src/packages/database"]
        }
    } 
}

Using Typescript to resolve a package from a location other than the default node_modules directory

Answer №1

Similar questions

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

Do Angular lifecycle hooks get triggered for each individual component within a nested component hierarchy?

Utilizing generic type and union types effectively in TypeScript

Ways to implement the flow of change occurrences in the mat-select component

ts-node: The colon symbol was not expected in this context

Creating instance methods in a TypeScript object can be accomplished by defining the methods within the object's class definition. When the object is

Having trouble resolving all parameters for the SiteNotificationComponent: (?)

Implement the usage of plainToClass within the constructor function

Unable to fake a fetch request using the 'fetch-mock-jest 1.5.1' library

My Nextjs project is encountering deployment issues with both Netlify and Heroku

Not all generic types specified with an extends clause are appropriately narrowed down as expected

How to minimize scaffolding with Redux, React, and Typescript?

Issue encountered with TypeORM and MySQL: Unable to delete or update a parent row due to a foreign key constraint failure

Accessing observable property in Angular 2 with TypeScript: A comprehensive guide

What are the recommended TypeScript tsconfig configurations for running Node.js 10?

Creating Angular UI states with parameters in TypeScript

You cannot use Angular 5 to send a post request with a token that has been retrieved

Access data inside nested objects with specified data type

Issue encountered with express-jwt and express-graphql: TypeScript error TS2339 - The 'user' property is not found on the 'Request' type

Can :[Interface] be considered a correct array declaration in Typescript?