angularjs - Ép kiểu biến scope của angular sang kiểu mạnh

Tôi muốn ép biến scope của Angular sang một kiểu:

Nó có thể trông giống như sau:

app.controller( 'PageLayoutController', function ( $scope )
{
    // Scope properties
    (PageMap)$scope.PageMap;

hoặc

app.controller( 'PageLayoutController', function ( $scope )
{
    // Scope properties
    $scope.PageMap: PageMap;

Liệu có thể hay tôi phải khai báo một biến riêng?

var pageMap: PageMap;
$scope.PageMap = pageMap;

Điều này là vì lợi ích của việc gợi ý nhập liệu.

Câu trả lời #1

Bạn có thể làm theo cách này, tạo một kiểu kế thừa từ IScope và thêm các thuộc tính của bạn vào đó. Ví dụ:

 interface PageLayoutVM extends ng.IScope{
     PageMap : PageMap;
 }

và sử dụng nó

app.controller( 'PageLayoutController', function ( $scope:PageLayoutVM)

Bạn sẽ nhận được ng.IScope chỉ nếu bạn đã sử dụng các kiểu định nghĩa angular.d.ts trong ứng dụng của mình.

Ngoài ra, với việc sử dụng TypeScript, việc sử dụng nó với cú pháp controllerAs và định nghĩa các thuộc tính trên chính controller sẽ dễ dàng hơn nhiều so với việc sử dụng scope để thiết lập các thuộc tính của view model.

Một thứ gì đó như:

 export interface PageLayoutVM {
     PageMap : PageMap;
     someChangehandler:(val:string)=>void;
 }

 class PageLayoutController implements PageLayoutVM {

    PageMap : PageMap; //public is implicit

    static $inject = ['$scope', 'myService']; //Just for demo if you are using scope specific methods like watch
    constructor(private $scope:ng.IScope,
                private myService:IMyService){

    }

    someChangehandler(val:string){ //Another public method
        this.myService.doSomething(val);
    }

    private doSomePrivateStuff(){
        //Do stuff...
    }

 }

Với điều này, khi bạn viết các bài kiểm tra đơn vị cho controller của mình, bạn có thể viết bài kiểm tra ngay trong TS với các định nghĩa kiểu, điều này sẽ giúp dễ dàng tra cứu các thuộc tính của controller khi viết bài kiểm tra.

Câu trả lời số 2

Lý tưởng nhất là bạn nên định nghĩa một giao diện và khai báo $scope với nó:

interface IPageLayoutScope extends ng.IScope {
    PageMap: PageMap;
}

app.controller( 'PageLayoutController', function ( $scope: IPageLayoutScope)

Bằng cách đó $scope.PageMap sẽ được định nghĩa sẵn.