CODEWITHSUNDEEP
angularjstypescript
Adavo
Adavo

Reputation: 925

Simplify typescript coding workflow

In our project we are using AngularJs (v1) with typescript and I found our workflow a bit too complex and slow. That's why I would like to ask the stackoverflow community about how I can simplify this.

1) Manually update _references.ts Right now we maintain by hand the file _references.ts. Everytime that we need to add/remove a file, we need to update this file with the right order. I would like to know if there isn't a solution to auto generate this file. In the properties of my typescript project, I have in Output section an option "Generate declaration files" but it seems that is not the right option...

2) Role of intensive use of interface I saw on many typescript tutorial wth angularJs that we need in every file to have the following 3 elements:

   interface ISplashScreenController {}
   interface ISplashScreenControllerScope extends ng.IScope {}
   class SplashScreenController implements ISplashScreenController {}

I can easily understand for the scope (to set vm as the type of SplashScreenController in this sample), but the global interface is it really useful ? What's the reason to use interface here instead just declaring SplashscreenController ?

3) Global injection

I would like to be able to inject some global services. For example : $translate, $q, $timeout, moment, my own CommonServices... Indeed, many controller/services in my app use this, and is a bit weird to inject it everytime that I need it. I would like to be able to use this everywhere.

This is especially true that for example I would like to have a "DateFormatTools" and be able to use it directly in my html without needed to inject it in my controller and then call vm.DateFormatTools.format(...)

4) One of the biggest issue is to maintain both app.ts and $inject and the injection in the constructor. Here is a sample :

in app.ts:

smartLingoApp.controller("SplashScreenController", ["$scope", "$q", "$timeout", "$translate", "DialogServices", "InitializationServices", "LocalStorageServices", "UserServices", "StateStackServices", SplashScreenController]);

in splashScreenController.ts: 

static $inject = ["$scope", "$q", "$timeout", "$translate", "DialogServices", "InitializationServices", "LocalStorageServices", "UserServices", "StateStackServices"];
constructor($scope: ISplashScreenControllerScope,
    private $q: angular.IQService,
    private $timeout: angular.ITimeoutService,
    private $translate: angular.translate.ITranslateService,
    private dialogServices: IDialogServices,
    private initializationServices: IInitializationServices,
    private localStorageServices: ILocalStorageServices,
    private userServices: IUserServices,
    private stateStackServices: IStateStackServices) {}

and of course everytime I add/remove a dependency I need to update both $inject and both app.ts which can create mistake. Ideally, it will be nice to set the dependency only in the splashScreenController.ts

Thanks for you help.

Upvotes: 1

Views: 99

Answers (1)

basarat
basarat

Reputation: 276191

Manually update _references.ts Right now we maintain by hand the file _references.ts. Everytime that we need to add/remove a file, we need to update this file with the right order. I would like to know if there isn't a solution to auto generate this fil

Long ago... I wrote this for grunt : https://github.com/TypeStrong/grunt-ts/#reference

Which maintains reference.ts for you.

More

Video: https://youtu.be/0-6vT7xgE4Y

Upvotes: 1

Related Questions