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

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

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

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

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

---

我怎样才能改变它，使它使用typescript，这样即使在我缩小javascript后它也能工作？

控制器和服务可以成为类

我喜欢使用

$inject

，因此缩小尺寸是安全的，但该行是可选的

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

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

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

包含

$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>

---

有效的JavaScript是有效的TypeScript-祝贺你，你做到了。@Marty True，这是一个很好的观点。但是，让它使用本机TypeScript类功能（以及诸如此类的功能）来清理它并使它在规模上更易于维护还有一些其他优势。我这样说是为了以防万一，这是你“不清楚”的职业训练局——知道如何从打字脚本中获益是件好事，不管你什么时候都要使用它。即使你不必这么做。@MatthewHaugen当然-我有点厚颜无耻。@Marty好吧，只是确定一下。：）

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

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);