1

我从这里下载了 Typescript + AngularJS 示例:http: //todomvc.com/examples/typescript-angular/#/

问题是每次我使用 Visual Studio 构建时,引用似乎都无法编译。但是,如果我在带有参数的 cmd 中运行编译器,tsc --out一切都很好。我不明白我在这里做错了什么。该示例使用_all.ts参考文件。这有什么问题吗?我已经尝试将此文件移动到根文件夹或重命名它,但这也不起作用。

ApplicationJs 的代码是:

/// <reference path="_all.ts" />

/**
 * The main TodoMVC app module.
 *
 * @type {angular.Module}
 */
module todos {
    'use strict';

    var todomvc = angular.module('todomvc', [])
            .controller('todoCtrl', TodoCtrl)
            .directive('todoBlur', todoBlur)
            .directive('todoFocus', todoFocus)
            .service('todoStorage', TodoStorage);
}

_all.ts 的代码

/// <reference path='js/libs/jquery/jquery.d.ts' />
/// <reference path='js/libs/angular/angular.d.ts' />
/// <reference path='js/models/TodoItem.ts' />
/// <reference path='js/interfaces/ITodoScope.ts' />
/// <reference path='js/interfaces/ITodoStorage.ts' />
/// <reference path='js/directives/TodoFocus.ts' />
/// <reference path='js/directives/TodoBlur.ts' />
/// <reference path='js/services/TodoStorage.ts' />
/// <reference path='js/controllers/TodoCtrl.ts' />
/// <reference path='Application.ts' />

使用 Visual Studio 编译为:

/// <reference path="_all.ts" />
/**
 * The main TodoMVC app module.
 *
 * @type {angular.Module}
 */
var todos;
(function (todos) {
    'use strict';
    var todomvc = angular.module('todomvc', [])
        .controller('todoCtrl', todos.TodoCtrl)
        .directive('todoBlur', todos.todoBlur)
        .directive('todoFocus', todos.todoFocus)
        .service('todoStorage', todos.TodoStorage);
})(todos || (todos = {}));
//# sourceMappingURL=Application.js.map

但是使用 tsc --out 来:

/// <reference path='../../_all.ts' />
var todos;
(function (todos) {
    'use strict';

    var TodoItem = (function () {
        function TodoItem(title, completed) {
            this.title = title;
            this.completed = completed;
        }
        return TodoItem;
    })();
    todos.TodoItem = TodoItem;
})(todos || (todos = {}));
/// <reference path='../../_all.ts' />
/// <reference path='../../_all.ts' />
/// <reference path='../../_all.ts' />
var todos;
(function (todos) {
    'use strict';

    /**
    * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
    */
    function todoFocus($timeout) {
        return {
            link: function ($scope, element, attributes) {
                $scope.$watch(attributes.todoFocus, function (newval) {
                    if (newval) {
                        $timeout(function () {
                            return element[0].focus();
                        }, 0, false);
                    }
                });
            }
        };
    }
    todos.todoFocus = todoFocus;

    todoFocus.$inject = ['$timeout'];
})(todos || (todos = {}));
/// <reference path="../../_all.ts" />
var todos;
(function (todos) {
    'use strict';

    /**
    * Directive that executes an expression when the element it is applied to loses focus.
    */
    function todoBlur() {
        return {
            link: function ($scope, element, attributes) {
                element.bind('blur', function () {
                    $scope.$apply(attributes.todoBlur);
                });
                $scope.$on('$destroy', function () {
                    element.unbind('blur');
                });
            }
        };
    }
    todos.todoBlur = todoBlur;
})(todos || (todos = {}));
/// <reference path='../../_all.ts' />
var todos;
(function (_todos) {
    'use strict';

    /**
    * Services that persists and retrieves TODOs from localStorage.
    */
    var TodoStorage = (function () {
        function TodoStorage() {
            this.STORAGE_ID = 'todos-angularjs-typescript';
        }
        TodoStorage.prototype.get = function () {
            return JSON.parse(localStorage.getItem(this.STORAGE_ID) || '[]');
        };

        TodoStorage.prototype.put = function (todos) {
            localStorage.setItem(this.STORAGE_ID, JSON.stringify(todos));
        };
        return TodoStorage;
    })();
    _todos.TodoStorage = TodoStorage;
})(todos || (todos = {}));
/// <reference path='../../_all.ts' />
var todos;
(function (todos) {
    'use strict';

    /**
    * The main controller for the app. The controller:
    * - retrieves and persists the model via the todoStorage service
    * - exposes the model to the template and provides event handlers
    */
    var TodoCtrl = (function () {
        // dependencies are injected via AngularJS $injector
        // controller's name is registered in Application.ts and specified from ng-controller attribute in index.html
        function TodoCtrl($scope, $location, todoStorage, filterFilter) {
            var _this = this;
            this.$scope = $scope;
            this.$location = $location;
            this.todoStorage = todoStorage;
            this.filterFilter = filterFilter;
            this.todos = $scope.todos = todoStorage.get();

            $scope.newTodo = '';
            $scope.editedTodo = null;

            // 'vm' stands for 'view model'. We're adding a reference to the controller to the scope
            // for its methods to be accessible from view / HTML
            $scope.vm = this;

            // watching for events/changes in scope, which are caused by view/user input
            // if you subscribe to scope or event with lifetime longer than this controller, make sure you unsubscribe.
            $scope.$watch('todos', function () {
                return _this.onTodos();
            }, true);
            $scope.$watch('location.path()', function (path) {
                return _this.onPath(path);
            });

            if ($location.path() === '')
                $location.path('/');
            $scope.location = $location;
        }
        TodoCtrl.prototype.onPath = function (path) {
            this.$scope.statusFilter = (path === '/active') ? { completed: false } : (path === '/completed') ? { completed: true } : null;
        };

        TodoCtrl.prototype.onTodos = function () {
            this.$scope.remainingCount = this.filterFilter(this.todos, { completed: false }).length;
            this.$scope.doneCount = this.todos.length - this.$scope.remainingCount;
            this.$scope.allChecked = !this.$scope.remainingCount;
            this.todoStorage.put(this.todos);
        };

        TodoCtrl.prototype.addTodo = function () {
            var newTodo = this.$scope.newTodo.trim();
            if (!newTodo.length) {
                return;
            }

            this.todos.push(new todos.TodoItem(newTodo, false));
            this.$scope.newTodo = '';
        };

        TodoCtrl.prototype.editTodo = function (todoItem) {
            this.$scope.editedTodo = todoItem;
        };

        TodoCtrl.prototype.doneEditing = function (todoItem) {
            this.$scope.editedTodo = null;
            todoItem.title = todoItem.title.trim();
            if (!todoItem.title) {
                this.removeTodo(todoItem);
            }
        };

        TodoCtrl.prototype.removeTodo = function (todoItem) {
            this.todos.splice(this.todos.indexOf(todoItem), 1);
        };

        TodoCtrl.prototype.clearDoneTodos = function () {
            this.$scope.todos = this.todos = this.todos.filter(function (todoItem) {
                return !todoItem.completed;
            });
        };

        TodoCtrl.prototype.markAll = function (completed) {
            this.todos.forEach(function (todoItem) {
                todoItem.completed = completed;
            });
        };
        TodoCtrl.$inject = [
            '$scope',
            '$location',
            'todoStorage',
            'filterFilter'
        ];
        return TodoCtrl;
    })();
    todos.TodoCtrl = TodoCtrl;
})(todos || (todos = {}));
/// <reference path='js/libs/jquery/jquery.d.ts' />
/// <reference path='js/libs/angular/angular.d.ts' />
/// <reference path='js/models/TodoItem.ts' />
/// <reference path='js/interfaces/ITodoScope.ts' />
/// <reference path='js/interfaces/ITodoStorage.ts' />
/// <reference path='js/directives/TodoFocus.ts' />
/// <reference path='js/directives/TodoBlur.ts' />
/// <reference path='js/services/TodoStorage.ts' />
/// <reference path='js/controllers/TodoCtrl.ts' />
/// <reference path='Application.ts' />
/// <reference path="_all.ts" />
/**
* The main TodoMVC app module.
*
* @type {angular.Module}
*/
var todos;
(function (todos) {
    'use strict';

    var todomvc = angular.module('todomvc', []).controller('todoCtrl', todos.TodoCtrl).directive('todoBlur', todos.todoBlur).directive('todoFocus', todos.todoFocus).service('todoStorage', todos.TodoStorage);
})(todos || (todos = {}));
//test

4

1 回答 1

0

您需要在 Visual Studio 中打开项目属性并选中“使用引用”选项并将其指向_all

FWIW 我不推荐--outhttps ://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

于 2015-05-15T07:55:17.050 回答