up vote 0 down vote favorite

I have angular 2 application written on javascript. I want to migrate it to typescript.

JS code is:

(function (app) {
    app.SomeService = ng.core
        .Class({
            constructor: [app.AnotherService, function SomeService(s) {
                this._anotherService = s;
            }],  
            someFunction: function(){
                ...
            }
            .....    
        });
})
(window.app || (window.app = {}));

I want to inject this service into my typescript component. How can I do that?

I tried to use it like this: 

@Component({...})
export class SomeComponent {
    constructor(public someService: window.app.SomeService) {
    }
}

But it does not work.

share|improve this question
5  
js code is always a valid ts code – svarog Jul 12 '16 at 11:16
1  
TypeScript compiles to JavaScript, so if you are writing your app with valid JavaScript, you don't need to write TS. Do not inject nothing, build it with JS or TS, only. – Juanjo Salvador Jul 12 '16 at 11:23
    
what would be written in providers array? i would prefer writing in ts i.e re-writting in ts instead of using existing js code. Otherwise it would be a mess when the code increases. – Pratik Kelwalkar Jul 12 '16 at 11:27
    
@JuanjoSalvador , I want to migrate this app step by step, so I have to use js and ts code together. – Ilya Kirillov Jul 12 '16 at 11:29
up vote 1 down vote

The way I've managed to mix JS and TS is to have a file with the JS, in your case let's say it's src/app.js , with the code you posted above.

At this point you can do one of two things:

  1. You create a component that is going to use said JS code, something like:

    import {Component} from "angular2/core";

@Component({

 selector: 'app',

 template: ` <a> <onclick='app()'>When the function is clicked, use app() code</a>
   ,
     directives: []

      })
export class App {

  constructor(){

 }

}

The template is going to depend on what your code is supposed to do. I often use onClick, but here you have an example of what it might look like: 

  template: `<input value="Select Date" type="text" class="datepicker" onclick ="myCalendar()" >

`

  1. Another option is to call the JS code from the constructor

    import {Component} from 'angular2/core';
@Component({
  selector: 'app',
 template: `
<div>
</div>
`,
 directives: []
})
export class MyApp {
  name:string;
  constructor() {
   this.name='Angular 2';
   app();
  }    
}

So it depends on what you want to do, and when, as far as I can tell. There are people with more experience but I tried to not say anything wrong, and provide code similar to what I have working right now.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.