Migrating JavaScript to TypeScript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with a type annotation.

Typescript

let username: [1] = 'Alice';

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' instead of 'string' for text values.

Omitting the type annotation.

In TypeScript, you declare a variable's type after the colon. Here, username is a string.

2fill in blank

medium

Complete the function parameter with the correct type annotation.

Typescript

function greet(name: [1]): string {
  return `Hello, ${name}!`;
}

Drag options to blanks, or click blank then click option'

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' or 'boolean' for a name parameter.

Leaving out the type annotation.

The parameter name should be a string because it is used inside a text message.

3fill in blank

hard

Fix the error by adding the correct type annotation to the array.

Typescript

const scores: [1] = [10, 20, 30];

Drag options to blanks, or click blank then click option'

Aany[]

Bstring[]

Cboolean[]

Dnumber[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string[]' for an array of numbers.

Not specifying the array type.

The array scores contains numbers, so its type is number[].

4fill in blank

hard

Fill both blanks to define an interface and use it to type an object.

Typescript

interface [1] {
  id: number;
  name: string;
}

const user: [2] = { id: 1, name: 'Bob' };

Drag options to blanks, or click blank then click option'

AUser

BPerson

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the interface and the object type.

Using a name that does not match the object.

The interface is named User and the object user uses this interface as its type.

5fill in blank

hard

Fill all three blanks to create a typed function with a return type.

Typescript

function add(a: [1], b: [2]): [3] {
  return a + b;
}

Drag options to blanks, or click blank then click option'

Anumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' as a parameter or return type.

Mixing different types for parameters and return.

The function add takes two numbers and returns a number, so all types are number.

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