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

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

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

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

Hint

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

Practice

1. What is the main benefit of migrating JavaScript code to TypeScript?

easy

A. It adds type safety to catch errors early

B. It makes the code run faster in browsers

C. It removes all JavaScript features

D. It automatically converts code to Python

Solution

1. Step 1: Understand TypeScript's purpose

   TypeScript adds static types to JavaScript, helping find errors before running code.

2. Step 2: Compare options

   Only It adds type safety to catch errors early correctly states the benefit of type safety. Other options are incorrect or unrelated.

3. Final Answer:

   It adds type safety to catch errors early -> Option A

4. Quick Check:

   Type safety = D [OK]

Hint: TypeScript adds types to catch errors early [OK]

Common Mistakes:

• Thinking TypeScript makes code run faster
• Believing TypeScript removes JavaScript features
• Confusing TypeScript with other languages

2. Which of the following is the correct way to declare a typed variable in TypeScript?

easy

A. let age = number 30;

B. let age: number = 30;

C. let age = 30: number;

D. let age number = 30;

Solution

1. Step 1: Recall TypeScript variable syntax

   TypeScript uses let variableName: type = value; to declare typed variables.

2. Step 2: Check each option

   Only let age: number = 30; follows the correct syntax. Others have misplaced type or incorrect order.

3. Final Answer:

   let age: number = 30; -> Option B

4. Quick Check:

   Correct typed variable syntax = B [OK]

Hint: Use colon after variable name for type [OK]

Common Mistakes:

• Placing type after value
• Omitting colon between name and type
• Using wrong order of type and value

3. What will be the output of this TypeScript code after migration?

function greet(name: string) {
  return `Hello, ${name.toUpperCase()}!`;
}
console.log(greet("world"));

medium

A. TypeError at runtime

B. "Hello, world!"

C. "Hello, WORLD!"

D. SyntaxError during compilation

Solution

1. Step 1: Analyze the function behavior

   The function takes a string and returns a greeting with the name in uppercase.

2. Step 2: Evaluate the output of greet("world")

   Calling greet("world") returns "Hello, WORLD!" because toUpperCase() converts to uppercase.

3. Final Answer:

   "Hello, WORLD!" -> Option C

4. Quick Check:

   String uppercase greeting = C [OK]

Hint: Check string methods and template literals output [OK]

Common Mistakes:

• Ignoring toUpperCase effect
• Expecting original case output
• Confusing runtime and compile errors

4. Identify the error in this TypeScript migration:

function add(a, b: number): number {
  return a + b;
}

medium

A. Parameter 'a' is missing a type annotation

B. Return type 'number' is invalid

C. Function name 'add' is not allowed

D. Parameters must not have types in TypeScript

Solution

1. Step 1: Check parameter types

   In TypeScript, all parameters should have type annotations for clarity and safety.

2. Step 2: Identify missing type

   Parameter 'a' lacks a type, causing a compile error. Other parts are correct.

3. Final Answer:

   Parameter 'a' is missing a type annotation -> Option A

4. Quick Check:

   All parameters need types = A [OK]

Hint: All function parameters need types in TypeScript [OK]

Common Mistakes:

• Leaving some parameters untyped
• Misunderstanding return type syntax
• Thinking function names have restrictions

5. You have this JavaScript object:

const user = { id: 1, name: "Alice", active: true };

How would you migrate it to TypeScript with a proper type annotation?

hard

A. const user: any = { id: 1, name: "Alice", active: true };

B. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true };

C. const user: object = { id: 1, name: "Alice", active: true };

D. const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true };

Solution

1. Step 1: Define precise object type

   Use an inline type annotation with exact property types for clarity and safety.

2. Step 2: Compare options

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; correctly annotates the object with property types. const user = { id: number, name: string, active: boolean } = { id: 1, name: "Alice", active: true }; is invalid syntax. const user: object = { id: 1, name: "Alice", active: true }; is too generic. const user: any = { id: 1, name: "Alice", active: true }; disables type checking.

3. Final Answer:

   const user: { id: number; name: string; active: boolean } = { id: 1, name: "Alice", active: true }; -> Option D

4. Quick Check:

   Precise object type annotation = A [OK]

Hint: Use inline type with property names and types [OK]

Common Mistakes:

• Using 'any' which disables type safety
• Incorrect syntax for object type annotation
• Using generic 'object' type losing property info