Angular 2同时使用打字稿和JavaScript

Question

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.

Answer 1

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()" >

`

2. 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.