Build Something Awesome.

Meet the Developer Learning Tracker

You’ve reached the last lesson in the TypeScript pathway. Instead of learning one more isolated feature, you’re going to combine the tools you’ve already practiced.

We’ll build a Developer Learning Tracker that stores a developer’s name, tracks skills, updates completion status, and displays a progress report.

Along the way, you’ll use interfaces, arrays, classes, functions, generics, and type guards in one connected program.

Define a Skill with an Interface

Before writing application logic, decide what information each skill needs. For our tracker, every skill has a name and a completion status.

interface Skill {
  name: string;
  completed: boolean;
}

const firstSkill: Skill = {
  name: "HTML",
  completed: true
};

console.log(firstSkill.name);

The interface ensures that every skill has the expected properties and that those properties use the correct types.

Store Multiple Skills in an Array

Our tracker needs more than one skill. An array lets us keep related skill objects together.

interface Skill {
  name: string;
  completed: boolean;
}

const skills: Skill[] = [
  { name: "HTML", completed: true },
  { name: "CSS", completed: true },
  { name: "TypeScript", completed: false }
];

console.log("Total skills: " + skills.length);

By declaring Skill[], we tell TypeScript that every array item must follow the Skill interface.

Use a Class to Manage Learning

Now we’ll introduce a class that keeps a developer’s name and skills together.

interface Skill {
  name: string;
  completed: boolean;
}

class Developer {
  constructor(
    public name: string,
    public skills: Skill[]
  ) {}

  showName(): void {
    console.log("Developer: " + this.name);
  }
}

const moe = new Developer("Moe", [
  { name: "HTML", completed: true }
]);

moe.showName();

The constructor initializes each developer object. The showName() method provides a simple way to display information about that developer.

Build a Method That Updates the Tracker

A useful application needs to change over time. Let’s give our class a method for adding skills.

interface Skill {
  name: string;
  completed: boolean;
}

class Developer {
  skills: Skill[] = [];

  addSkill(name: string): void {
    this.skills.push({
      name: name,
      completed: false
    });
  }
}

const developer = new Developer();
developer.addSkill("TypeScript");

console.log(developer.skills[0].name);

Using a method gives us a clear, reusable way to update the developer’s learning list.

Change a Skill’s Completion Status

When someone finishes a skill, the tracker should update its status. We can search through the array and change the matching item.

interface Skill {
  name: string;
  completed: boolean;
}

const skills: Skill[] = [
  { name: "HTML", completed: false }
];

function completeSkill(name: string): void {
  for (const skill of skills) {
    if (skill.name === name) {
      skill.completed = true;
    }
  }
}

completeSkill("HTML");

console.log(skills[0].completed);

This combines a function, an array loop, a condition, and a property update.

Make a Reusable Function

Our project can also benefit from a generic helper that returns the first item in an array, regardless of its element type.

function firstItem<T>(
  items: T[]
): T | undefined {
  return items[0];
}

const firstSkill = firstItem(["HTML", "CSS"]);
const firstLevel = firstItem([1, 2, 3]);

console.log(firstSkill);
console.log(firstLevel);

TypeScript preserves the relationship between the array’s element type and the function’s return type.

Use a Union Type and Type Guard

Some developers may use numeric IDs, while others use usernames. A union type lets our tracker accept either format.

type DeveloperId = string | number;

function displayId(id: DeveloperId): void {
  if (typeof id === "number") {
    console.log("Numeric ID: " + id);
  } else {
    console.log("Username: " + id.toUpperCase());
  }
}

displayId(108);
displayId("moe");

The typeof check allows TypeScript to narrow the union safely.

Count Completed Skills

A tracker becomes more useful when it summarizes progress. We can loop through the skills and count how many have been completed.

interface Skill {
  name: string;
  completed: boolean;
}

const skills: Skill[] = [
  { name: "HTML", completed: true },
  { name: "CSS", completed: true },
  { name: "TypeScript", completed: false }
];

let completed = 0;

for (const skill of skills) {
  if (skill.completed) {
    completed++;
  }
}

console.log("Progress: " +
  completed + " / " + skills.length);

This calculation works even as skills are added or completed.

Your Complete Developer Learning Tracker

We now have the pieces needed for a working application. Our finished program will:

• Define the structure of a skill using an interface.
• Store and manage skills through a class.
• Use an array to maintain the learning list.
• Add new skills and mark existing ones complete.
• Use a generic helper to retrieve a skill.
• Accept a string or numeric developer ID.
• Calculate and display learning progress.

The interactive sandbox below contains a starter version. Build the project yourself, then use Load Solution to compare your work with a complete implementation.