Upgrade Angular 1.X JavaScript files to TypeScript #1162

8 Answer(s)

• 

  0

  JeffMH created 8 years ago

  We are using Typescript in our project but we did not convert anything from the framework. We had to declare a few variables from abp and AspZero(just declared them as any), but overall the experience has not been too bad. I don't want to convert the framework because the more we touch the framework, the harder it is to merge changes that are released.

  Here is the first part of our custom typings file for the project:

  declare var App: any;
  declare var app: any;
  declare var abp: any;
  declare var appModule: angular.IModule;
  declare var _: any;
  

  Those few declares have got us through several screens. You can see we were able to add a type to appModule. If there are things we can add types to as we go we usually add them in. I think the "_" var is from underscore.js, but we have not checked to see if we can download a typing for that yet.

  Here is a look at one of our controller constructors and how we inject the common items:

  //- Injects dependencies into the constructor.  Used by Angular.
          static $inject = ["$scope", "$uibModal", "$stateParams", "uiGridConstants", "abp.services.app.pbcSection", "framework.services.kendo.datasourceservice"];
          
          constructor(
              private $scope: angular.IScope,
              private $uibModal: angular.ui.bootstrap.IModalService,
              private $stateParams: Framework.Interfaces.IFilterTextStateParamsService,
              private uiGridConstants: any,
              private pbcSectionService: any,
              private kendoDataSourceService: Framework.Services.Kendo.IDataSourceService) {
  

  It would be nice if we had typed Services and DTO's. It would make the development experience a little nicer. I am strongly debating writing a T4 template that creates typings for our DTO / ApplicationServices. I think this would go a long ways to making the experience better.

  Anyway, just wanted to pass along our strategy. We are only about a month into development so we are still learning.

  Save Cancel
• 

  0

  sampath created 8 years ago

  Hi, Thanks for the feedback. Actually I don't need to change any existing ABP's js files into TS.I just need to change my app's custom js files only.B'cos ABP owners will upgrade it later when they'll release the Angular 2 compatible version.So is that kind of thing possible ? That means without changing any framework related js files where I just need to convert my app's custom js files only.I don't even like to touch the app.js file .Can I do that kind of convert ? Thanks.

  Save Cancel
• 

  0

  JeffMH created 8 years ago

  Yes. That is exactly what we are doing. We are not touching any ABP or Zero files. We are just implementing our own controllers / modules / directives in TS.

  What I did to do an example typescript controller, I copied there User list page into another folder and made a User list using TS. Once you dig in, it's not bad at all. If you just take the example walk-through they did and try and do that in Typescript, it will not be that bad. You will just find you need to declare some of the global variables they use. My post has a few in it. My post is a little vague, but if you just sit down and try and write a typescript controller in your own implementation, you will figure it out pretty quickly.

  Save Cancel
• 

  0

  sampath created 8 years ago

  Hi, Thanks for the feedback.I have an one question though.Can you tell me where we have to put below mentioned declarations ? Is that within our *.ts file or somewhere else globally ?

  declare var appModule: angular.IModule;
  declare var abp: any;
  declare var app: any;
  

  Save Cancel
• 

  0

  gunpal5 created 8 years ago

  1. Create a folder "typescript" in your web project.
  2. add a file mytypings.d.ts (or whatever you like but with extension *.d.ts)
  3. add declarations in mytypings.d.ts
  4. add a file "_references.ts" on your project root, and add this line:

  /// <reference path="typescript/mytypings.d.ts" />
  

  Save Cancel
• 

  0

  sampath created 8 years ago

  Hi, Actually I'm not adding new .ts files to my app.I need to convert existing .js file to .ts file.When we do so, I need to declare above mentioned global variables.I don't know which place, I should put those declarations.

  Save Cancel
• 

  0

  gunpal5 created 8 years ago

  I think, you need to clear your concepts of typescript first.

  You need to add all declaration in a separate file with extension *.d.ts, and add the path of decleration file into _references.ts

  here's my declaration code for abp module, I named it abp.d.ts and added to "typings/abp.d.ts"

  declare module abp
  {
      var appPath: string;
      var pageLoadTime: Date;
      function toAbsAppPath(path: string);    
  }
  

  Save Cancel
• 

  0

  paddyfink created 8 years ago

  hey guys, happy to see that i'm not the only one to embrace the movement.

  I've started also to migrate my application to typescript. Actually I am completly changing the architecture by restructuring it into set of components (like here : <a class="postlink" href="http://blog.rangle.io/angular2-components/">http://blog.rangle.io/angular2-components/</a>) and removing the use of $scope, directives and controllers

  I'm using this method to create my components in typescript : <a class="postlink" href="http://almerosteyn.com/2016/02/angular15-component-typescript">http://almerosteyn.com/2016/02/angular1 ... typescript</a>.

  I use also typelite to automatically generate typescript interface from my Application Dtos : <a class="postlink" href="http://type.litesolutions.net/">http://type.litesolutions.net/</a>. The next step will be to use that to generate also appliations services in typescript, so that the application backend will always match the front end.

  @Halil, I know you are working on porting abp to angular 2, but i think it will a good idea to change first the architecture of the current version by using components and typescript to make it angular 2 ready and facilitate the migration.

  Save Cancel