TypeScript无法正确编译

Question

I downloaded the Typescript + AngularJS example from here: http://todomvc.com/examples/typescript-angular/#/

The problem is that everytime I build with Visual Studio it seems that the references don't compile. But if I run the compiler in cmd with tsc --out parameter everything is fine. I don't unterstand what I'm doing wrong here. The Example uses a _all.ts reference file. Is there something wrong with that? I already tried to move this file to the root folder or to rename it but that didn't work either.

Code for ApplicationJs is:

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

code for _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' /> 

compiles with visual studio to:

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

but with tsc --out to:

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

Answer 1

You need to open the project properties in visual studio and check the option "use references" and point it to _all

FWIW I don't recommend --out : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md