How to structure utility class

Question

I have several utility functions. What is the best way to package these up, and then import them?

This is what I am trying to do:

import * as util from './util'

export class myClass{
     constructor()
     {
           util.doSomething("test");
     }
}

Then in the class:

export class Util{
    doSomething(val: string){ return val;}

    doSomethingElse(val: string){ return val;}
}

The error message I get from VS is:

Property doSomething does not exist on type util.

Answer 1

If you create a file utils.ts which contains

export default class Utils {
    static doSomething(val: string) { return val; }
    static doSomethingElse(val: string) { return val; }
}

then you can simplify your client code like this:

import Utils from './utils'

export class MyClass {
     constructor()
     {
         Utils.doSomething("test");
     }
}

Answer 2

There's a couple problems here:

1. You're not instantiating anything, and doSomething is an instance method
2. When you do import * as util, util represents the module, not an object in it.

If you want Util, you should just import that:

import { Util } from './util'

Next, you should instantiate Util, before finally calling the method on it:

var u = new Util();
u.doSomething("test");

Here's your code patched up:

import { Util } from './util'

export class MyClass{
     constructor()
     {
         var u = new Util();
         u.doSomething("test");
     }
}

---

All that said, there seems to be something odd about the way you're using your utils. This is totally personal opinion, but I wouldn't invoke methods that "do something", i.e. cause side effects, in a constructor.

Also, the methods in Util don't really look like they need to be in that class, since the class holds no state that they depend on. You can always export regular functions from a module. If you wrote your utils module like this:

export function doSomething(val: string) { return val; }

export function doSomethingElse(val: string) { return val; }

you'd be exporting your functions directly and would sidestep the instantiation hassle, and in fact your original code would work correctly as is.

Answer 3

Alternative way:

1. Export constants in your utils.ts file:

   export const doSomething = (val: string): any => {
     return val;
   };
   
   export const doSomethingElse = (val: string): any => {
     return val;
   };
   

2. Import and use this methods in main *.ts file:

   import { doSomething, doSomethingElse } from './util';
   ...
   let value1 = doSomething('abc');
   let value2 = doSomethingElse ('efg');
   

Answer 4

Or you could export is as an object literal:

export const Util = {
    doSomething(val: string){ return val;},
    doSomethingElse(val: string{ return val;}
}

Answer 5

You can also create a util.ts class which has a function to export

export const formatDateOfBirth = 
(dob: string) : string => `${dob.substring(0, 4)}-${dob.substring(4, 6)}-${dob.substring(6, 8)}`;

Now you can import the method as below, shared folder structure is src > app > shared, I am calling this import inside src > app > shelf > shelf.component.ts file

import { formatDateOfBirth } from '../shared/utils/util';
public getFormattedDate(dob: string):string{
  return formatDateOfBirth(dob);
}

Answer 6

I think I figured out the best way to do it, that is flexible and suits all cases.

First of all, utility functions should be exported independently, no need to wrap them in a class. This allows tree-shaking to work with the file's exports.

utils.ts

export function helper() { 
  console.log('help is provided') 
}

Than you can import and use the functions directly, if you want tree-shakability and don't care about mocking utils functions (which you don't in most cases, if they are written correctly).

But, if for some components you want to mock them, you can still do it. For Angular, you should do the following:

tokens.ts

import * as utils from 'utils.ts';
export const utilsToken = new InjectionToken<typeof utils>('UtilsToken')

app.module.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';
@NgModule({
    providers: [{ provide: utilsToken, useValue: utils }]
})  

Having this set up, you can inject your utils in any component instead of using them directly:

component.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';

@Component({
})
export class Component {
constructor(@Inject(utilsToken) private _utils: typeof utils) {
  this._utils.helper();
}

component.spec.ts

import * as utils from 'utils.ts';
import { utilsToken } from 'tokens.ts';

...
await TestBed.configureTestingModule({
     providers: [{ provide: utilsToken, useValue: mockUtils }],
}).compileComponents(),

Then you can use your utils directly in some components and inject them in others (that require mocked utils version for testing)