CODEWITHSUNDEEP
angularjstypescriptwebpackbabeljs
Bruno Brito
Bruno Brito

Reputation: 409

AngularJS bindings with Typescript and ng.IComponentController

I'm using webpack with Babel and Typescript

I have this controller:

// HelloWorldController.ts

class HelloWorldController implements ng.IComponentController {

constructor(private $scope: ng.IScope) {
}

public over(): void {
    this.$scope.color = this.change();
}
}

and his component options

export class HelloWorldComponent implements ng.IComponentOptions {

public bindings: {[binding: string]: string};
public controller: Function;
public templateUrl: string;

public constructor() {
    this.bindings = {
        color: '=',
        change: "&"
    };
    this.controller = HelloWorldController;
    this.templateUrl = "HelloWorld.html";
    }
}
app.component('helloWorld', new HelloWorldComponent());

When I transpile this code I got this error: 

error TS2339: Property 'change' does not exist on type 'HelloWorldController'

How I can access the bindings reference inside a controller with Typescript?

Upvotes: 0

Views: 3245

Answers (1)

Mobiletainment
Mobiletainment

Reputation: 23311

You need to declare the bound variables on your Controller:

// HelloWorldController.ts
class HelloWorldController implements ng.IComponentController {

    change: () => any;
    color: any;

    public over(): void {
        this.color = this.change();
    }
}

This way, you tell TypeScript about the existence of these properties on your controller.

Note that during initialization of your component controller, Angular will apply the bindings you've set in your component options (color: '=', change: "&") and set your controller's variables to their bound values. This means that you don't have to access these bindings through $scope anymore (as done in the over method), which completely elliminates the need to inject $scope into your controller and vastly increases reusability of your code.

Upvotes: 2

Related Questions