Applying TypeScript concepts

 - No implicit any, ensure everything is typed
 - Using private access modifier
 - Property getter / setters

examples/angular2/app/app.html

@@ -4,7 +4,7 @@
 		<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
 	</header>
 	<section class="main" *ngIf="todoStore.todos.length > 0">
-		<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
+		<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">
 		<ul class="todo-list">
 			<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
 				<div class="view">
@@ -12,7 +12,7 @@
 					<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
 					<button class="destroy" (click)="remove(todo)"></button>
 				</div>
-				<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
+				<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" (keyup.escape)="cancelEditingTodo(todo)">
 			</li>
 		</ul>
 	</section>

examples/angular2/app/app.js

@@ -9,26 +9,25 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var core_1 = require('angular2/core');
 var store_1 = require('./services/store');
-var ESC_KEY = 27;
 var ENTER_KEY = 13;
 var TodoApp = (function () {
     function TodoApp() {
         this.todoStore = new store_1.TodoStore();
     }
     TodoApp.prototype.stopEditing = function (todo, editedTitle) {
-        todo.setTitle(editedTitle.value);
+        todo.title = editedTitle;
         todo.editing = false;
     };
     TodoApp.prototype.cancelEditingTodo = function (todo) {
         todo.editing = false;
     };
-    TodoApp.prototype.updateEditingTodo = function (editedTitle, todo) {
-        editedTitle = editedTitle.value.trim();
+    TodoApp.prototype.updateEditingTodo = function (todo, editedTitle) {
+        editedTitle = editedTitle.trim();
         todo.editing = false;
         if (editedTitle.length === 0) {
             return this.todoStore.remove(todo);
         }
-        todo.setTitle(editedTitle);
+        todo.title = editedTitle;
     };
     TodoApp.prototype.editTodo = function (todo) {
         todo.editing = true;

examples/angular2/app/app.ts

 import {Component} from 'angular2/core';
 import {TodoStore, Todo} from './services/store';
 
-const ESC_KEY = 27;
 const ENTER_KEY = 13;
 
 @Component({
@@ -15,8 +14,8 @@ export default class TodoApp {
 		this.todoStore = new TodoStore();
 	}
 
-	stopEditing(todo: Todo, editedTitle) {
-		todo.setTitle(editedTitle.value);
+	stopEditing(todo: Todo, editedTitle: string) {
+		todo.title = editedTitle;
 		todo.editing = false;
 	}
 
@@ -24,15 +23,15 @@ export default class TodoApp {
 		todo.editing = false;
 	}
 
-	updateEditingTodo(editedTitle, todo: Todo) {
-		editedTitle = editedTitle.value.trim();
+	updateEditingTodo(todo: Todo, editedTitle: string) {
+		editedTitle = editedTitle.trim();
 		todo.editing = false;
 
 		if (editedTitle.length === 0) {
 			return this.todoStore.remove(todo);
 		}
 
-		todo.setTitle(editedTitle);
+		todo.title = editedTitle;
 	}
 
 	editTodo(todo: Todo) {
@@ -51,7 +50,7 @@ export default class TodoApp {
 		this.todoStore.remove(todo);
 	}
 
-	addTodo($event, newtodo) {
+	addTodo($event: KeyboardEvent, newtodo: HTMLInputElement) {
 		if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
 			this.todoStore.add(newtodo.value);
 			newtodo.value = '';

examples/angular2/app/services/store.js

@@ -4,9 +4,16 @@ var Todo = (function () {
         this.editing = false;
         this.title = title.trim();
     }
-    Todo.prototype.setTitle = function (title) {
-        this.title = title.trim();
-    };
+    Object.defineProperty(Todo.prototype, "title", {
+        get: function () {
+            return this._title;
+        },
+        set: function (value) {
+            this._title = value.trim();
+        },
+        enumerable: true,
+        configurable: true
+    });
     return Todo;
 })();
 exports.Todo = Todo;
@@ -15,44 +22,44 @@ var TodoStore = (function () {
         var persistedTodos = JSON.parse(localStorage.getItem('angular2-todos') || '[]');
         // Normalize back into classes
         this.todos = persistedTodos.map(function (todo) {
-            var ret = new Todo(todo.title);
+            var ret = new Todo(todo._title);
             ret.completed = todo.completed;
             return ret;
         });
     }
-    TodoStore.prototype._updateStore = function () {
+    TodoStore.prototype.updateStore = function () {
         localStorage.setItem('angular2-todos', JSON.stringify(this.todos));
     };
-    TodoStore.prototype.get = function (state) {
-        return this.todos.filter(function (todo) { return todo.completed === state.completed; });
+    TodoStore.prototype.getWithCompleted = function (completed) {
+        return this.todos.filter(function (todo) { return todo.completed === completed; });
     };
     TodoStore.prototype.allCompleted = function () {
         return this.todos.length === this.getCompleted().length;
     };
-    TodoStore.prototype.setAllTo = function (toggler) {
-        this.todos.forEach(function (t) { return t.completed = toggler.checked; });
-        this._updateStore();
+    TodoStore.prototype.setAllTo = function (completed) {
+        this.todos.forEach(function (t) { return t.completed = completed; });
+        this.updateStore();
     };
     TodoStore.prototype.removeCompleted = function () {
-        this.todos = this.get({ completed: false });
+        this.todos = this.getWithCompleted(false);
     };
     TodoStore.prototype.getRemaining = function () {
-        return this.get({ completed: false });
+        return this.getWithCompleted(false);
     };
     TodoStore.prototype.getCompleted = function () {
-        return this.get({ completed: true });
+        return this.getWithCompleted(true);
     };
     TodoStore.prototype.toggleCompletion = function (todo) {
         todo.completed = !todo.completed;
-        this._updateStore();
+        this.updateStore();
     };
     TodoStore.prototype.remove = function (todo) {
         this.todos.splice(this.todos.indexOf(todo), 1);
-        this._updateStore();
+        this.updateStore();
     };
     TodoStore.prototype.add = function (title) {
         this.todos.push(new Todo(title));
-        this._updateStore();
+        this.updateStore();
     };
     return TodoStore;
 })();

examples/angular2/app/services/store.ts

 export class Todo {
 	completed: Boolean;
 	editing: Boolean;
-	title: String;
 
-	setTitle(title: String) {
-		this.title = title.trim();
+	private _title: String;
+	get title() {
+		return this._title;
+	}
+	set title(value: String) {
+		this._title = value.trim();
 	}
 
 	constructor(title: String) {
@@ -20,54 +23,54 @@ export class TodoStore {
 	constructor() {
 		let persistedTodos = JSON.parse(localStorage.getItem('angular2-todos') || '[]');
 		// Normalize back into classes
-		this.todos = persistedTodos.map( (todo: {title: String, completed: Boolean}) => {
-			let ret = new Todo(todo.title);
+		this.todos = persistedTodos.map( (todo: {_title: String, completed: Boolean}) => {
+			let ret = new Todo(todo._title);
 			ret.completed = todo.completed;
 			return ret;
 		});
 	}
 
-	_updateStore() {
+	private updateStore() {
 		localStorage.setItem('angular2-todos', JSON.stringify(this.todos));
 	}
 
-	get(state: {completed: Boolean}) {
-		return this.todos.filter((todo: Todo) => todo.completed === state.completed);
+	private getWithCompleted(completed: Boolean) {
+		return this.todos.filter((todo: Todo) => todo.completed === completed);
 	}
 
 	allCompleted() {
 		return this.todos.length === this.getCompleted().length;
 	}
 
-	setAllTo(toggler) {
-		this.todos.forEach((t: Todo) => t.completed = toggler.checked);
-		this._updateStore();
+	setAllTo(completed: Boolean) {
+		this.todos.forEach((t: Todo) => t.completed = completed);
+		this.updateStore();
 	}
 
 	removeCompleted() {
-		this.todos = this.get({completed: false});
+		this.todos = this.getWithCompleted(false);
 	}
 
 	getRemaining() {
-		return this.get({completed: false});
+		return this.getWithCompleted(false);
 	}
 
 	getCompleted() {
-		return this.get({completed: true});
+		return this.getWithCompleted(true);
 	}
 
 	toggleCompletion(todo: Todo) {
 		todo.completed = !todo.completed;
-		this._updateStore();
+		this.updateStore();
 	}
 
 	remove(todo: Todo) {
 		this.todos.splice(this.todos.indexOf(todo), 1);
-		this._updateStore();
+		this.updateStore();
 	}
 
 	add(title: String) {
 		this.todos.push(new Todo(title));
-		this._updateStore();
+		this.updateStore();
 	}
 }

examples/angular2/tsconfig.json

@@ -7,7 +7,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
-    "noImplicitAny": false
+    "noImplicitAny": true
   },
   "files": [
     "app/bootstrap.ts"