#Simple import/export question, particularly about globing (*)

7 messages · Page 1 of 1 (latest)

wary bear
#

I have a “models” folder in my app, that sits as a sibling alongside “components”, “services”, etc, and whenever I have a large and unique enough component or service I create a new file in “models” for it, and then create any/all custom typings I might need or of already used, so that in the application I can do FULL custom typing and not have to worry about using any primitives

Some of these files have up to at least a couple dozen exports, as I’ve been pretty thurough

Take a fully defined model for a bank account for example, an object with at least 10 distinct properties

Rather than just do this though…

export interface Account {
  client: string,
  number: number,
  balance?: number,
  social: number
  …
}

I do it more like this…

though…

export type Name = string;
export type AccountNumber = number;
export type Currency = number;
export type USD = Currency;
export type Amount = USD;
export type Last4ofSSN = number;

export interface Account {
  client: Name,
  number: AccountNumber,
  balance?: Amount,
  social: Last4ofSSN
  …
}

and so on…

So some of these files have quite a number of exports, like account.ts here in particular, and sometimes I need access in my code not just to the Account interface here, but to it’s individual property types as well

As a result, in one or two of my files, I’ve got an EXTREMELY length import call at the top, that’s just pulling in basic type declarations for me, it is long it wraps…

I’ve seen this working in the app with other particular tools, libraries, or whatever

import * from ‘…’;

or in some cases

import * as from ‘…’;

but these patterns aren’t working for me in my code, specifically with these “model” files

Instead, I have to be extremely specific, and double, triple down, etc in my import statement every time I write anything that handles an additional custom type, such as

import { Account, Name, AccountNumber, USD, Amount } from ‘@models/account’;

and so on…

I’ve seen the index.ts files used to prevent you from having to write out an entire path at the end of your import, but even then each individual item is still declared independently

Is it possible for me to just make

import * from ‘@models/account’;

and if so, how do I do that?

austere gust
#

If you have to manually add all the types, you might want to check if your IDE is set up correctly. You should be able to just use the type and your IDE will suggest the import.

wary bear
#

The IDE will auto suggest, and even auto import, but it makes a mess out of the top of the documents, and I’m drying to keep the code light, easy to read, and self documenting as much as possible, so I often find myself having to clean up after the auto importer

austere gust
#

For easy to read and self documenting, i'd argue that you want the explicit imports. On my phone right now, but I believe I auto sort my imports with ESLint (set it up ages ago and never worry about it lol)

wary bear
#

That’s a good idea, that TBH I’d almost forgotten about

The place I work before I came on wasn’t very front end savvy, and they had ESLint setup to automatically apply changes in a pre-commit hook, but I removed it in this project because the way it was configured it was doing more harm than good…

But this is a great reminder… probably about time I re-installed it, only this time around I’ll configure it myself 😆