如何将AngularJS Javascript控制器转换为Typescript？

Question

我有一个非常简单的控制器:

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $userService) {

        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    })

如何更改它以便它使用打字稿,所以即使我缩小了我的javascript后它也能正常工作？

Answer 1

控制器和服务可以成为类.

我喜欢这样使用$inject它可以安全地缩小,但该行是可选的.

class ModalInstanceController {
    static $inject = ["$scope", "$modalInstance", "$userService"];
    constructor($scope, $modalInstance, $userService) {

        $scope.ok = () => {
            $modalInstance.close();
        };

        $scope.cancel = () => {
            $modalInstance.dismiss('cancel');
        };
    }
}

.controller('ModalInstanceCtrl', ModalInstanceController);

包含$inject相当于在vanilla JavaScript中使用数组语法:

.controller('ModalInstanceCtrl', ["$scope", "$modalInstance", "$userService", function ($scope, $modalInstance, $userService) { ... }]);

在现实世界的应用程序中,我喜欢避免使用$scope除了实际需要它的东西(比如$watch),在这种情况下我也会将方法拉出来.但是,这需要更改HTML.

class ModalInstanceController {
    private $modalInstance : any;

    static $inject = ["$modalInstance", "$userService"];
    constructor($modalInstance, $userService) {
        this.$modalInstance = $modalInstance;
    }

    ok() {
        this.$modalInstance.close();
    }
    cancel() {
        this.$modalInstance.dismiss('cancel');
    };
}

然后在你的HTML中,

<button type="button" ng-click="ModalInstanceCtrl.ok()">OK</button>

请注意使用完全限定条件ModalInstanceCtrl.ok(),因为它不再只是在范围内浮动.

就在你无聊的时候抓住了我,这是使用TypeScript的一个很好的优势,因为我看到你有$userService.

class UserService {
    // A parameterized constructor is, of course, allowed here too.
    // Optionally supply $inject, per above

    parse(arg : string) {
        return parseInt(arg);
    }
}

class ModalInstanceController {
    private $modalInstance : any;
    private $userService : UserService; // Note the typing here

    static $inject = ["$modalInstance", "$userService"];
    // Explicit typing here is optional, since "any" will cast automatically
    // but I like to be clear anyway.
    constructor($modalInstance, $userService : UserService) {
        this.$modalInstance = $modalInstance;
        this.$userService = $userService;
    }

    ok() {
        // you'll get Intellisense here, whilst still benefiting from DI from Angular
        var arg = this.$userService.parse("12");

        this.$modalInstance.close();
    }
    cancel() {
        this.$modalInstance.dismiss('cancel');
    };
}

app.service("$userService", UserService);
app.controller("ModalInstanceCtrl", ModalInstanceController);