javascript - 将我的 Angular 代码转换为 TypeScript

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我已经编写 Angular 大约一年了，并且取得了很大的进步。现在，每个人都在喊 TypeScript。关于这个主题有很多教程和博客，但似乎没有任何一致性。这个 app.js 文件在 TypeScript 中应该是什么样子？

angular.module('angular10App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ngStorage',
'cfp.loadingBar',
'ngAnimate'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider
        .otherwise('/');

    $locationProvider.html5Mode(true);
});

这个 Controller 应该是什么样子？我更愿意将范围排除在外，因此假设我在路由配置中有“Controller as vm”。

angular.module('angular10App')
.controller('ResultsCtrl', function ($scope, $stateParams, results) {

    $scope.flightType = $stateParams.flightType;
    $scope.selectedAirportDep = $stateParams.from;
    $scope.selectedAirportRet = $stateParams.to;
    $scope.depDate = $stateParams.depDate;
    $scope.arrDate = $stateParams.arrDate;
    $scope.class = $stateParams.class;
    $scope.adults = $stateParams.adults;
    $scope.children = $stateParams.children;

    $scope.results = results;
});

Answer 1

模块的注册基本相同

angular.module('angular10App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ngStorage',
'cfp.loadingBar',
'ngAnimate'
])
.config($stateProvider: ng.ui.IStateProvider,
            $urlRouterProvider: ng.ui.IUrlRouterProvider,
            $locationProvider: ng.ILocationProvider) {
     $urlRouterProvider.otherwise('/');
     $locationProvider.html5Mode(true);
}

对于 Controller ，应该定义为一个类

module controllers {
    export interface IYourScope extends ng.IScope {
        someField: boolean;
        someOtherField: string;
    }

    export class yourController {
        constructor(private $scope: IYourScope) {
           $scope.someField = true;
           $scope.someOtherField = "something"; 
        }
    }
}

尽管我更喜欢使用controllerAs并访问 Controller 类的属性(我想这会导致以后更容易迁移到Angular 2.0)，例如:

module controllers {    
    export class yourController {

        public someField: boolean;
        public someOtherField: string;

        constructor(private $scope: ng.IScope)
           this.someField = true;
           this.someOtherField = "something"; 
        }
    }
}

然后你就可以像往常一样注册这个 Controller

angular.module('yourModule').controller('ctrl',controllers.yourController);