How to write Helper class in typescript?

Question

I have a problem when use typeScript with angular2.
I want create one helper.ts file exports many classed/functions common to re-use.
But Helper class need import others service in constructor, so that when another class import Helper class, It have to set param is those service. I don't want this.

How I can write Helper class, that I can use anywhere when import {Helper} from ..

This is my sample: Helper.ts

import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import {Inject, Component} from 'angular2/core';


@Component({
    providers: [TranslateService]
})

export class Helpper {
    public trans;
    public lang;
    public properties;

    constructor(trans: TranslateService) {
        this.trans = trans;
        //This is variable for translate function 
        this.lang = this.trans.currentLang;
        this.properties = this.trans.translations[this.lang];             
    }

    translate(key) {
        return this.properties[key];      
    }      
}

RenderTab.ts

import {Component, Inject, Injectable} from 'angular2/core';
import {Helper} from './helpper'

@Component({
    providers: [Helper]
})

export class RenderTab {
    public helper;

    constructor(helper: Helper) { 
        this.helper = helper;
    }

    render() {
        var test = this.helper.translate('string');
    }
}

HomePage.ts

import {Component, Inject, Injectable} from 'angular2/core';
import {RenderTab} from './RenderTab'

@Component({
    selector: 'div',
    templateUrl: './HomePage.html',
    providers: [RenderTab]
})

export class ColorPicker {
    public renderTab;

    constructor(renderTab: RenderTab) { 
        this.renderTab = renderTab;

        var test = this.renderTab.render();
    }
}

Please help me, thanks.

score 71 · Answer 1 · edited Jun 03 '20 at 21:20

71

Helper classes should only contain static functions or variable, if not they are not different from services. Please Correct me if I'm mistaken.

One of ways to create Helper class without Injectable or adding it to providers is posted here Thanks to k7sleeper

Copying the code from the mentioned post for quick reference.

utils.ts :

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

Usage:

import Utils from './utils'
export class MyClass {
    constructor()
    {
        Utils.doSomething("test");
    }
}

But reading more about this, it makes sense to inject them through Injectable and providers, but I would still have all the methods as static and the class without constructor

edited Jun 03 '20 at 21:20

BuZZ-dEE

6,075
12
66
96

answered Nov 11 '16 at 12:16

Abhijeet

8,561
5
70
76

Neat ! Exactly what I needed. – Alex Beugnet May 02 '18 at 14:15
1

How would you inject the class and keep the methods as static? If you inject it, you cannot use any static member, as you are getting an instance (named let's say `utils`), and you would still have to use `Utils.doSomething`. – Andrew Jan 17 '19 at 21:34
4

why use `class` when you can export the functions directly? – Sumi Straessle Apr 04 '20 at 13:25
why we need to use Injectable? – Konstantin Vahrushev Apr 06 '20 at 14:24

Gaurav Mukherjee · Accepted Answer · 2018-09-18T13:39:54.713

57

First of all class Helper should be a service class HelperClass, which should be injectable.

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {TranslateService} from "ng2-translate";

@Injectable()
export class HelperService {
   constructor(private http: Http, private translateService: TranslateService) {

   }

}

Now you can simply inject this helper and use it in any component you like.

import {HelperService} from "./helper.service.ts";
@Component({
   ...
})
export class MyComponent{
   constructor(public helperService: HelperService) {}
}

Update: You need to add the service in providers array of the root module for it to work, or for angular6+, the service can be provided as follows

@Injectable({
  providedIn: 'root'
})
export class HelperService {
   ...
}

edited Sep 18 '18 at 13:39

answered Feb 27 '16 at 07:09

Gaurav Mukherjee

6,205
2
23
33

5

is it possible to make the helper class static so we dont need to add helper as a property and can instead do something like Helper.whatever()? – Dan Hastings Apr 18 '17 at 09:52
2

@DanHastings You can use function for this, or create an object with values and functions. e.g. `const Helper = { whatever: (a) => { a + 1} }` – Gaurav Mukherjee Apr 18 '17 at 14:58
1

Good answer.. Just to point that according to the naming convention it should be service name: `HelperService` and file name: `helper.service.ts` – Yosvel Quintero Sep 11 '18 at 04:59
1

@YosvelQuintero updated the the answer, thanks – Gaurav Mukherjee Sep 18 '18 at 13:40

score 7 · Answer 3 · edited Jun 03 '20 at 21:21

Your Helper class corresponds to a service and since you want to inject another service in you need add the @Injectable decorator (not the @Component one):

Import {Injectable} from 'angular2/core';

@Injectable()
export class Helper {
  (...)
}

Since it's part of dependency injection, all parameters of its constructor will be provided by Angular2 itself. You don't need to provide them by your own and instantiate yourself this class to be able it. Simply inject it where you want to use it...

You need then to the corresponding provider at when bootstrapping your application:

bootstrap(AppComponent, [ Helper ]);

Or at a component level but can only be used within processing triggered by the component.

@Component({
  (...)
  providers: [ Helper ]
})
export class SomeComponent {
  (...)
}

For more details about dependency injection and hierarchical injectors, you could have a look at this question:

No provider for ObservableDataService

How to write Helper class in typescript?

3 Answers3

Linked