Lesson Weekend

Let's continue adding to our To Do list. In this lesson, we'll create more Task objects and learn about TypeScript's special looping syntax. Then we'll walk through creating a class method to mark Tasks complete.

So far, our application is creating one instance of Task and printing it to the console in the browser. It should look like this:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}
}

var tasks: Task[] = [];
tasks.push(new Task('Do the dishes.', 'Medium'));
console.log(tasks);

Let's create a few more instances of Task to print to the console:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}
}

var tasks: Task[] = [];
tasks.push(new Task('Do the dishes.', 'Medium'));
tasks.push(new Task('Buy chocolate.', 'Low'));
tasks.push(new Task('Do laundry.', 'High'));
console.log(tasks);

Because we've made changes to our .ts file, we have to re-compile to see them reflected in the browser:

$ tsc app/to-do.ts

We should now see multiple Tasks in the console:

multiple-tasks-in-console

What if we want to view each individually, instead of printing the entire array and collapsing/uncollapsing it in the console?

TypeScript Looping

We could use a loop to do this! However, a TypeScript loop looks different than one in JavaScript. Let's take a moment to review these differences.

A basic TypeScript for loop looks like this:

for(var individualThing of listOfMultipleThings) {
  console.log(individualThing);
};

This loops through all items in an array called listOfMultipleThings. As it cycles through the array, each individual entry is temporarily assigned to the variable individualThing.

Looping in To Do

Let's try this out in our To Do list:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}
}

var tasks: Task[] = [];
tasks.push(new Task('Do the dishes.', 'Medium'));
tasks.push(new Task('Buy chocolate.', 'Low'));
tasks.push(new Task('Do laundry.', 'High'));

for(var task of tasks){
  console.log(task);
}

Compile our changes:

$ tsc app/to-do.ts

And Tasks should now appear on their own line in the console:

tasks-printed-in-loop

Declaring Class Methods

Now that we're able to list out each Task individually, let's add functionality to mark a Task complete.

Similar to adding methods to classes in other languages, we'll simply define a method within the class, like this:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}

  markDone(){
    this.done = true;
  }

}

...

Here we've created a method called markDone(). When called upon a Task object, it will change its done property from false to true.

Let's test it out. Our code currently prints three Tasks to the console. Let's call markDone() on one first:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}

  markDone(){
    this.done = true;
  }

}

var tasks: Task[] = [];
tasks.push(new Task('Do the dishes.', 'Medium'));
tasks.push(new Task('Buy chocolate.', 'Low'));
tasks.push(new Task('Do laundry.', 'High'));

tasks[0].markDone();

for(var task of tasks){
  console.log(task);
}

We'll re-compile:

$ tsc app/to-do.ts

The first Task printed is now marked complete.

first-task-marked-done

As you can see, TypeScript isn't that different from the JavaScript we've already been writing. Hopefully you're beginning to get the hang of it!

Examples


A basic TypeScript for loop looks like this:

for(var individualThing of listOfMultipleThings) {
  console.log(individualThing);
};

TypeScript methods look very similar to those we've previously created in JavaScript, too. Here's an example markDone() method:

typescript-to-do/app/to-do.ts
class Task {
  done: boolean = false;

  constructor(public description: string, public priority: string){}

  markDone(){
    this.done = true;
  }

}

...