Managing types in a monorepo using Typescript and dealing with circular dependency problems during type imports

Question

Managing types in a monorepo using Typescript and dealing with circular dependency problems during type imports

As detailed in this answer, Typescript 3.8 brought about:

import type

to safely import definitions (source):

import type only imports declarations for type annotations and declarations. It's completely erased, leaving no trace at runtime. Equally, export type offers an export for type contexts and is also removed from TypeScript's output.

Nevertheless, you still need to have the package as a dependency.

This can result in circular dependencies, as illustrated in my scenario. A simplified breakdown of my monorepo involves:

client-web: a web client using vite (client)
client-store: a redux store package (model)
image-gallery: an image gallery package (presentation)

All of them require awareness of the following type:

type IImage = {
     id: string;
     title: string;
     url: string;
     urlThumb: string;
}

However, the location where this type should "live" isn't clearly defined. There are a few potential options:

place it in the presentation => image-gallery and import it into the other packages
put it in the model => client-store and import it into the other packages
establish a shared common-types package (manually)
generate an automatically shared common-types package (composition)

No matter which route you take, there may be challenges like complicating your dependency graph and transitioning from parallel to sequential build processes. Additionally, not all types are the same - sometimes you want types near a component, while other times you prefer grouping types by semantic context.

I'm curious if there's a solution that hasn't crossed my mind?

typescript circular-dependency monorepo

Answer 1

Answer №1

It is widely known that circular dependencies in JavaScript and TypeScript occur when two modules import each other. What needs clarification is that these modules may not be directly reliant on one another. For instance:

// Module A requires B from BC
A -> BC
// Module B requires A from module A
BC -> A

It should be noted that the actual dependencies are not circular. The circular dependency arises due to the structure of the files/modules. There are two potential solutions in such cases:

Separate the common dependency into its own file.
Consolidate the dependencies in a single file.

In the earlier example, this can be represented as follows:

// 1.
A -> C
B -> A // No circular dependency

// 2.
ABC // No external dependencies at all!

The IImage entity seems to be an independent component that could be extracted into its own file/module. Depending on the monorepo management tool being used, it could be moved to a separate file within one of the projects. Remember, circular dependencies occur between files, not projects, so this solution is deemed safe.

If the monorepo tool prohibits dependencies between non-library modules, the only option may be to create a distinct subproject.

In either scenario with the monorepo tool, opting for the latter approach is recommended as it ensures future scalability by consolidating common code in a dedicated subproject to prevent any potential circular dependencies down the line.

Answer 2

It is widely known that circular dependencies in JavaScript and TypeScript occur when two modules import each other. What needs clarification is that these modules may not be directly reliant on one another. For instance:

// Module A requires B from BC
A -> BC
// Module B requires A from module A
BC -> A

It should be noted that the actual dependencies are not circular. The circular dependency arises due to the structure of the files/modules. There are two potential solutions in such cases:

Separate the common dependency into its own file.
Consolidate the dependencies in a single file.

In the earlier example, this can be represented as follows:

// 1.
A -> C
B -> A // No circular dependency

// 2.
ABC // No external dependencies at all!

The IImage entity seems to be an independent component that could be extracted into its own file/module. Depending on the monorepo management tool being used, it could be moved to a separate file within one of the projects. Remember, circular dependencies occur between files, not projects, so this solution is deemed safe.

If the monorepo tool prohibits dependencies between non-library modules, the only option may be to create a distinct subproject.

In either scenario with the monorepo tool, opting for the latter approach is recommended as it ensures future scalability by consolidating common code in a dedicated subproject to prevent any potential circular dependencies down the line.

Managing types in a monorepo using Typescript and dealing with circular dependency problems during type imports

Answer №1

Similar questions

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

When the value is empty, MUI Autocomplete will highlight all items

Implementing TypeScript for augmented styling properties in a component - a guide

tips for accessing dynamic key pair value data in Angular

The variable 'string' has been declared, but it is never utilized or accessed

Having trouble building the React Native app after adding react-native-vector icons?

When attempting to save my submission object data to the database, TypeORM unexpectedly alters the information

Using Angular i18n to create dynamic forms from an array of objects

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

The inRequestScope feature seems to be malfunctioning and is not functioning as intended

TypeScript raises an issue with a Vue component property that has been defined using vue-property-decorator

Changing the order of a list in TypeScript according to a property called 'rank'

What is the best way to send multiple values from the view to a method without using two-way binding?

Creating optional method parameters in Typescript based on their data type

Encountering a situation where the data retrieved from Firestore in Angular TypeScript is returning as

Organize library files into a build directory using yarn workspaces and typescript

Ensuring TypeORM constraint validations work seamlessly with MySQL and MariaDB

Can a single global variable be shared between a JavaScript file and a TypeScript file within an Angular project?

What is the correct method for exporting a file from the temporary folder of a node server using res.sendFile(...) or res.download(...) over HTTP?

Preventing Multiple Login Attempts in Angular.js Using Typescript