Is it recommended to consolidate all interface and type declarations within a single file for a module?

I have a habit of declaring my types and interfaces alongside the logic in each file, but I often run into situations where I need to reuse them in other files. This leads to scattered types and interfaces throughout my project, making it difficult to keep track of where to import them.

Would it make more sense to create a dedicated type/interface file for each feature? For example, having all login page types and interfaces saved in a file called loginTypes.ts. This approach would provide a clear structure for importing the necessary types when needed.

Answer №1

Typically, I would recommend organizing interfaces and types based on the context they are used in. For example, your login.ts file, which contains all the login logic, should also export any related types (such as LoginApiResponse). If you have multiple files with nested concerns structures (like login.ts, accessTokenLogin.ts, twoFactorAuth...), where login.ts is the main module bringing everything together, it's a good idea to re-export all interfaces declared in sub-modules there as well. This way, you would have:


login.ts

export interface GeneralLoginInterface {
  prop: string
}

export { Response } from "./twoFactorAuth.ts"

And only import from login.ts (note: this can be extended to actual code like classes and functions as well).

If members of your sub-modules have conflicting names (for example, if both twoFactorAuth.ts and accessTokenLogin.ts have a type named Response), consider exporting them under different namespaces as explained here.


Keep in mind that this is just a suggestion; you have the flexibility to import types wherever needed and not worry about circular dependencies since types are stripped away at runtime.

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

When the React Native Expo app is running, the TextInput form is covered by the keyboard

When I launch the app using expo and implement my DateFormInput component, the issue of Keyboard covering TextInput arises. Despite trying packages like "@pietile-native-kit/keyboard-aware-scrollview", "@types/react-native-keyboard-spacer", "react-native-k ...

Transferring JSON information from a dialog component to another component

In my application, I have 2 components named list and details, which are nested inside a parent component called customer. When the user clicks the delete button within the details component, a dialog window pops up like this: https://i.sstatic.net/hd4t3. ...

Issue: Error thrown due to attempting to access the 'push' property of an undefined element in an Angular child component

I have an array in my child component's element @Input() listAnswer: any; changestyle(event) { let activeSpan = event.target; this.listAnswer.push(activeSpan.innerText.trim()); } I am passing this variable from the parent component < ...

Unfortunately, I am unable to utilize my Async Validator as it is wrapped within the "__zone_symbol" object

I have created an asynchronous validator for passwords. export class PasswordsValidators{ static oldPasswordMatch(control: AbstractControl) : Promise<ValidationErrors> | null { return new Promise((resolve) => { if(control. ...

How can I utilize Luxon to calculate the total number of days that are equal to or greater than 30?

Looking at my current array structure const arr = [ { id: '1', name: 'thing1', createdAt: '2022-09-21T16:26:02Z', }, { id: '2', name: 'thing1', createdAt: '2022-11-21T16:20:20Z', } ...

When I append a .client extension to my .jsx or .tsx file, it disrupts the import functionality within Remix

I've been exploring the use of remix-utils to render a client-side-only component. I was under the impression that using a .client.tsx or .client.jsx file would achieve this (even though I couldn't find it in the documentation). Here is the code ...

Response type tailored to specific input type

I am working on defining types for a simple function called fun. Below are the interfaces for the input and response: interface Input { test1?: true test2?: true test3?: true } interface Res { test1?: string test2?: string test3?: string } N ...

Can a single data type be utilized in a function that has multiple parameters?

Suppose I have the following functions: add(x : number, y : number) subtract(x : number, y : number) Is there a way to simplify it like this? type common = x : number, y : number add<common>() This would prevent me from having to repeatedly define ...

How to retrieve a random element from an array within a for loop using Angular 2

I'm in the process of developing a soundboard that will play a random sound each time a button is clicked. To achieve this, I have created an array within a for loop to extract the links to mp3 files (filename), and when a user clicks the button, the ...

Error in Angular caused by ChartJS: TypeError, inability to access property '_model' because it is null

I am currently working on a project that involves showcasing real-time data in a ChartJS graph. The data is retrieved from an external web server, and I have managed to store the data in 6 arrays (which are constantly changing) with each array containing 1 ...

Comparing TypeScript's `return;` with `return undefined;`: which is better?

I encountered a strange behavior that is puzzling to me, and I'm not sure if there's a logical explanation for it. In TypeScript, the following code works perfectly: type UndefinedFunction = () => undefined; let uf: UndefinedFunction = funct ...

The front end is displaying an empty object, although it is showing up when logged in the console using ngFor

I'm currently enrolled in a tutorial course and I've hit a roadblock at this stage. I want to display the properties of the Product on both the console.log and the web page. Strangely, the console.log is showing the product correctly, but the fro ...

Converting an array of objects into a TypeScript dictionary with IDs as the key mapping

Is there a way to provide type hints for better autocompletion when accessing keys like dictionary.Germany from the following data and types? type Entry = { tld: string; name: string; population: number; }; const data: Entry[] = [ {tld: 'de&a ...

Retain Form data even when the user refreshes or reloads the page

My Form includes validation as shown below: <form [formGroup]="LoginForm"> First name:<br> <input type="text" formControlName="firstname" > <br> Last name:<br> <input type="text" formControlName="lastname"> ...

When tests/** are not included in the tsconfig, the TS language features in Vscode become inaccessible

I am looking to configure my TypeScript tests in such a way that they receive linting, code completion, and VSCode intellisense (TypeScript language features) when the test folder is placed next to the src folder. However, I want to ensure that my tests do ...

Excluding the decimal point from version 1.0 in an API response with Angular 5

When working with Angular 5, I encountered an issue where the API response was returned as 1.0, but when displayed in the HTML field it only showed as 1. Upon inspecting the response in Chrome dev-tools, under the Network tab -> Response, it correctly ...

What is the best way to implement a subquery using EXISTS in Knex?

I'm currently facing challenges while constructing a query using knex, specifically when it comes to incorporating the 'WHERE' clause with the condition EXISTS (SELECT * FROM caregiver_patient WHERE patient_id IN (0,1)). Below is the origin ...

What is the way to access data from a form array in Angular?

I have a form array that takes input from the user. I need to read each element of the form array individually and insert it into a database using a web service. However, I am struggling to create a method to handle this. Here is my code for the form array ...

The specified resource cannot be found in the CDK Stack Export

I'm facing an issue while trying to import values generated and exported from a cdk stack that deploys into eu-west-1 into a different stack that needs to be deployed into af-south-1. The error message states that the export name does not exist: EU n ...

What's preventing me from utilizing $event to fetch an array of strings?

When attempting to transfer information from a child to a parent using event emitters and output, an error is encountered: Argument of type 'Event' is not assignable to parameter of type 'string[]'. Type 'Event' is missing t ...