Migrating JavaScript to TypeScript - Mini Project: Build & Apply

Migrating JavaScript to TypeScript

📖 Scenario: You have a simple JavaScript program that manages a list of books. You want to improve the code by migrating it to TypeScript to catch errors early and add type safety.

🎯 Goal: Convert a JavaScript program managing books into TypeScript by adding type annotations and interfaces step-by-step.

📋 What You'll Learn

Create an array of book objects with title and author properties

Add a TypeScript interface for the book objects

Use the interface to type the array of books

Print the list of books with their titles and authors

💡 Why This Matters

🌍 Real World

Migrating JavaScript codebases to TypeScript is common in real projects to improve maintainability and reduce bugs.

💼 Career

Many companies use TypeScript for frontend and backend development, so knowing how to migrate and add types is a valuable skill.

1

Create the initial JavaScript data

Create a variable called books and assign it an array with these exact objects: { title: "The Hobbit", author: "J.R.R. Tolkien" } and { title: "1984", author: "George Orwell" }.

Typescript

// Create a variable called books with two book objects
// Your code here

Need a hint?

Use const books = [ ... ] with two objects inside the array.

2

Add a TypeScript interface for books

Create an interface called Book with two string properties: title and author.

Typescript

const books = [
  { title: "The Hobbit", author: "J.R.R. Tolkien" },
  { title: "1984", author: "George Orwell" }
];

// Create interface Book with title and author as strings
// Your code here

Need a hint?

Use interface Book { title: string; author: string; }.

3

Type the books array using the interface

Change the declaration of books to be an array of Book by adding the type annotation : Book[].

Typescript

interface Book {
  title: string;
  author: string;
}

// Add type annotation to books array
const books: Book[] = [
  { title: "The Hobbit", author: "J.R.R. Tolkien" },
  { title: "1984", author: "George Orwell" }
];
// Your code here

Need a hint?

Write const books: Book[] = [...] to specify the array type.

4

Print the list of books

Use a for loop with variables book to iterate over books and print each book's title and author using console.log with the format: Title: [title], Author: [author].

Typescript

interface Book {
  title: string;
  author: string;
}

const books: Book[] = [
  { title: "The Hobbit", author: "J.R.R. Tolkien" },
  { title: "1984", author: "George Orwell" }
];

// Print each book's title and author
// Your code here

Need a hint?

Use for (const book of books) and console.log(`Title: ${book.title}, Author: ${book.author}`).