Preventing specific directories from being imported in a Typescript project

I am intrigued by the idea of restricting files within a specific scope from importing files from another scope. Let's consider this example:

Imagine we have the following project structure:

project/
├── node_modules/
├── test/
├── src/
│   ├── domain/
│   │   ├── SomeModelClass.ts
│   ├── application/
│   │   ├── SomeApplicationConcern.ts
│   ├── database/
│   │   ├── SomeRepository.ts
├── tsconfig.json
└── tslint.json

Here are some rules I would like to impose:

  • SomeApplicationConcern can import code from anywhere.
  • SomeRepository cannot import code from application.
  • SomeModelClass cannot import code from application or domain.

Is there a way to achieve this using nested tsconfig.json files? Or perhaps with customized tslint rules?

I am unsure if implementing such restrictions is even possible, but ideally, I would like to receive a compilation error (or a tslint error, given that it is set to error severity in my project) if an unauthorized dependency is found.

typescriptarchitecturedependencies

Answer №1

After conducting some quick online research, here are a few suggestions:

  1. good-fences is a specialized tool designed to limit imports in TypeScript projects. Integrate it into your build process as an additional step.
  2. Compile your TypeScript code using the module set to es6 (considering a separate output directory if you require a different module setting for the actual code execution) and then utilize ESLint with the no-restricted-imports rule on the outcome.
  3. Configure both your runtime environment and tsconfig.json to enable only non-relative imports, followed by implementing the no-relative-imports rule from tslint-microsoft-contrib. Note: there have been discussions about phasing out no-relative-imports.
  4. Create your own TSLint-based rendition of ESLint's no-restricted-imports and contribute it to tslint-eslint-rules.

Answer №2

If you're in search of a tool that allows you to define custom rules and automatically detect dependency violations during your build process, look no further than Dependency Cruiser. This versatile tool supports various languages such as typescript, javascript, commonjs, es6 modules, and more.

After spending some time searching for a solution to this specific problem, I finally came across Dependency Cruiser. It has been incredibly helpful to me, and I believe it can benefit others as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing span elements to display error messages

Currently, I am using a directive on a field to prevent users from entering HTML tags and JavaScript events. However, I am encountering a few challenges: a) My goal is to display an error message immediately when a user tries to input HTML tags or JavaScr ...

angulartypescriptprimeng

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Hey there, I'm working on my nodejs api where I need to fetch data inside a loop and then perform another loop to save data in a different table. Can anyone guide me on how to achieve this? Below is a snippet of what I have attempted so far without su ...

javascriptnode.jstypescriptloopsasync-await

The border of the Material UI Toggle Button is not appearing

There seems to be an issue with the left border not appearing in the toggle bar below that I created using MuiToggleButton. Any idea what could be causing this? Thank you in advance. view image here view image here Just a note: it works correctly in the ...

javascripttypescriptmaterial-uitogglebutton

Is there a way to set the initial value of an input's ngmodel variable using only HTML?

Is there a way to assign an initial value of "1" to the variable named "some" using ngModel during initialization? *Update: I am specifically interested in how to achieve this using HTML only component.html : <input type="text" value="1" name="some" ...

angulartypescript

Include a fresh attribute in the Interface

How can I include a boolean property isPhotoSelected: boolean = false; in an API interface that I cannot modify? The current interface looks like this: export interface LibraryItem { id: string; photoURL: string; thumbnailURL: string; fi ...

javascriptangulartypescriptionic3

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

javascriptarraystypescriptobjectforeach

Is there a way to convert a typescript alias path to the Jest 'moduleNameMapper' when the alias is for a specific file?

I am currently working on setting up Jest in a TypeScript project. In our tsconfig.json file, we are using path aliases like so: "baseUrl": ".", "paths": { "@eddystone-shared/*": [ "../shared/*" ], "@eddystone-firebase-helpers/*": [ "src/helpers/fire ...

typescriptjestjs

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

htmlangulartypescriptcomponentsrouteparams

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

I am working with an array of objects where each object contains information like this: const myArr=[{name:"john",id:1}{name:"john",id:2}{name:"mary",id:3}] In the first 2 elements, the "name" property has duplicates with the value "john". How can I updat ...

javascriptarraysreactjstypescriptecmascript-6

What is the process for generating a new type that includes the optional keys of another type but makes them mandatory?

Imagine having a type like this: type Properties = { name: string age?: number city?: string } If you only want to create a type with age and city as required fields, you can do it like this: type RequiredFields = RequiredOptional<Propertie ...

typescript

When the Angular Reactive form control does not show any errors, it is designated as ng-invalid

Currently, I am working on an (Angular 10) reactive form that includes multiple dynamically-created input components within an ngFor loop. Here is an example of one of these input components: <div [id]="this.getDivElementId()" class="text ...

angulartypescriptvalidationangular-reactive-formsangular10

How can I prevent the enter key from working with Twitter Typeahead?

Is there a way to prevent the enter key from being pressed on an element within Twitter Typeahead's dropdown feature while using Angular with Typescript? I attempted to utilize preventDefault() when event.keycode === 13 on the ng-keydown event for th ...

angularjsangulartypescriptangularjs-directivetwitter-typeahead

Customize buttons in Material UI using the styled component API provided by MUI

I am intrigued by the Material UI Styled Component API, not to be confused with the styled-component library. However, I am facing difficulty in converting my simple button component into a linked button. Can anyone advise me on how to incorporate a react ...

reactjstypescriptmaterial-ui

In Next.js, the Typescript compiler does not halt when an error occurs

I am looking to incorporate Next.js with TypeScript into my project. I followed the official method of adding TypeScript to Next.js using npx create-next-app --typescript. Everything seemed fine, but when a TypeScript error occurs (e.g. const st: string = ...

javascriptreactjstypescriptnext.jstsconfig

Encountering issues when attempting to set up graphqlExpress due to type

This is my first experience using GraphQL with Express. I have created a schema: import { makeExecutableSchema } from "graphql-tools"; import { interfaces } from "inversify"; const schema = ` type Feature { id: Int! name: String ...

node.jsexpresstypescriptgraphqlapollo-server

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?

Currently, I am developing a nodejs typescript API where I am retrieving an array of objects using a map loop. The data for "communes", "category", and "location" is fetched from another API function based on the issuerId. However, I am facing issues with ...

javascriptnode.jsarraysjsontypescript

Utilizing various settings using `.env` files in NodeJs

As I work on building a backend in nodejs, one of the key considerations is how to incorporate an environment configuration into the project. I am envisioning a structure where there is a /config folder housing my envparser.ts (still brainstorming a catchi ...

node.jstypescriptecmascript-6dotenv

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

I am working with an AngularJS component written in TypeScript called news.component.ts. This component makes a call to a service named google.service.ts in order to fetch news RSS using a service that converts XML to JSON. Within the NewsComponent, I hav ...

angularjstypescript

The function purported by WEBPACK_MODULE_13___default(...) does not exist

Scenario : I've been working on a small library (let's call it myLibrary) using TypeScript and Webpack. Everything seemed to be running smoothly until I imported the library into a React application, which resulted in a crash. On the Library Sid ...

javascripttypescriptwebpack