Where to place standalone functions in Angular

Question

I have these functions and they’re being consumed by 3 components.

Where is the appropriate place to put them?

I was thinking of like in Ruby on Rails. They have lib, but I'm not sure these methods are ok in the lib folder.

Currently in src/helpers/upload-file-helpers.ts

export function fileSizeConverter(size: number, fromUnit: string, toUnit: string ): number | string {
  const units: string[] = ['B', 'KB', 'MB', 'GB', 'TB'];
  const from = units.indexOf(fromUnit.toUpperCase());
  const to = units.indexOf(toUnit.toUpperCase());
  const BASE_SIZE = 1024;
  let result: number | string = 0;

  if (from < 0 || to < 0 ) { return result = 'Error: Incorrect units'; }

  result = from < to ? size / (BASE_SIZE ** to) : size * (BASE_SIZE ** from);

  return result.toFixed(2);
}

export function isFileMoreThanLimit(fileSize: number, fromUnit: string, toUnit: string , limit: number) {
  return fileSizeConverter(fileSize, fromUnit, toUnit) > limit;
}

export function fileExtensionChecker(file: string): boolean {
  const fileExtensions = {
    'png' : true,
    'jpg' : true,
    'jpeg': true,
    'stl' : true,
    'obj' : true,
    'zip' : true,
    'dcm' : true,
    '3oxz': true
  };
  // this is weird, instead of showing undefined if file argument is not present in the hash it will throw error.
  return fileExtensions[file] ? true : false;
}

export function fileTypeParser(fileType: string): string {
  return fileType.split('/')[1];
}

Also, I deliberately do not want to put these in a class together. This is just being called individually.

Why not create 'utils' folder with utils functions like those? — Kamil Naja, Nov 27 '19 at 18:56
ohhh. never thought that. but whats the difference of helpers though? — aRtoo, Nov 27 '19 at 18:58
Just different naming. Other idea - you can also shared functions into the service. — Kamil Naja, Nov 27 '19 at 19:00
ohh. I guess I'm good with the helpers then. I was thinking of that services too so I can inject them to the consumers but I don't have to do it since some consumers will just use 1 function. thank you. — aRtoo, Nov 27 '19 at 19:02
I typically put shared functions like this into shared `services`. A `helper` or `utility` is not necessarily "wrong", but I prefer them as services. It's a matter of personal preference and what makes the most sense for the project. — Matt U, Nov 27 '19 at 19:03
@MattU I thought services are like classes. like injectables no? — aRtoo, Nov 27 '19 at 19:04
What is the problem of defining these functions as class methods? — ConnorsFan, Nov 27 '19 at 19:08
@aRtoo yes, but it doesn't hurt anything. A lot of how I organize code in Angular comes from my years of development in C#. In an ASP.NET project, I'd create an interface and implementation for a service such as `FileSizeConverterService` or similar. Then I'd inject that where needed. — Matt U, Nov 27 '19 at 19:08
@ConnorsFan nothing but i think it will complicate things since I have to inject it and its easier for me to test this individually. do you recommend it? and why? — aRtoo, Nov 27 '19 at 19:10
@MattU I'm thinking of making this as an injectable but I think it will complicate my code. do you think its better? — aRtoo, Nov 27 '19 at 19:12
Many different options here, both class and non-class: https://stackoverflow.com/questions/32790311/how-to-structure-utility-class — ulmas, Nov 27 '19 at 19:50
Does this answer your question? [How to structure utility class](https://stackoverflow.com/questions/32790311/how-to-structure-utility-class) — ulmas, Nov 27 '19 at 19:50

hbamithkumara · Accepted Answer · 2019-11-27T19:33:04.397

There are two main ways to write utility functions in TypeScript:

A) Normal functions (grouped in a file)

util.ts

export function sum(a: number, b: number): number {
    return a + b;
}

or

export const sum = (a: number, b: number): number=> {
    return a + b;
};

Usage

import { sum } from './util';
...
let value = sum(4, 11);

B) Static methods of a class

export class Math {
    static sum(a: number, b: number): number {
        return a + b;
    }
}

Reference

Utilities in TypeScript

Utility class

Where to place standalone functions in Angular

1 Answers1