Migrating JavaScript to TypeScript - Step-by-Step Execution

Concept Flow - Migrating JavaScript to TypeScript

Start with JS code

↓

Add TypeScript types

↓

Fix type errors

↓

Compile TS to JS

↓

Run compiled JS

↓

Iterate and improve types

↓

End with safer code

This flow shows how you start with JavaScript, add types, fix errors, compile, run, and improve your code step-by-step.

Execution Sample

Typescript

function greet(name) {
  return "Hello, " + name;
}

console.log(greet(42));

This JavaScript function greets a name but is called with a number, which TypeScript will catch as an error.

Execution Table

Step	Code Line	Action	TypeScript Check	Result/Output
1	function greet(name) {	Define function greet with parameter name	name has implicit any type	No error
2	return "Hello, " + name;	Return greeting string concatenated with name	No error	No output yet
3	}	End function	No error	No output
4	console.log(greet(42));	Call greet with number 42	No error (if no types), Error if typed	If no types, outputs 'Hello, 42'
5	Add type: function greet(name: string) {	Add type annotation to parameter	TypeScript error appears on call with 42	No output
6	Fix call: console.log(greet("Alice"));	Call greet with string 'Alice'	No error	Output: Hello, Alice
7	Compile TS to JS	TypeScript compiles to JavaScript	No error	JS code ready to run
8	Run compiled JS	Run output in JS environment	No error	Console prints: Hello, Alice

💡 Execution stops after running compiled JavaScript with correct types and no errors.

Variable Tracker

Variable	Start	After Step 4	After Step 6	Final
name	undefined	42 (incorrect type)	"Alice" (correct type)	"Alice"

Key Moments - 3 Insights

Why does TypeScript show an error when calling greet(42)?

Because after adding the type annotation 'name: string', passing a number (42) does not match the expected string type, as shown in execution_table step 5.

What happens if you don't add types to the function parameter?

TypeScript treats the parameter as 'any' type, so no error occurs even if you pass a number, but you lose type safety. This is shown in execution_table step 4 where no error appears without types.

How does adding types improve the code?

Adding types helps catch mistakes early, like passing wrong argument types, making the code safer and easier to maintain, as seen in execution_table steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution table, what type error appears at step 4?

A Missing return statement

B Passing a number to a string parameter

C Using an undefined variable

D Syntax error in function definition

💡 Hint

Check the 'TypeScript Check' column at step 4 in the execution_table.

At which step does the function call get fixed to avoid the type error?

A Step 3

B Step 2

C Step 6

D Step 8

💡 Hint

Look for the step where greet is called with a string argument in the execution_table.

If you remove the type annotation from the parameter, what changes in the execution?

A No type error will appear when calling greet(42)

B TypeScript will still show an error on greet(42)

C The function will not compile

D The output will be empty

💡 Hint

Refer to the 'TypeScript Check' column in step 4 before adding types.

Concept Snapshot

Migrating JavaScript to TypeScript:
- Start with JS code
- Add type annotations (e.g., function greet(name: string))
- Fix type errors shown by TypeScript
- Compile TS to JS
- Run compiled JS
- Iteratively improve types for safer code

Full Transcript

This visual execution shows how to migrate JavaScript code to TypeScript by adding type annotations, fixing errors, compiling, and running the code. Initially, a JavaScript function greet accepts any parameter. When called with a number, it works but is unsafe. Adding a type annotation 'name: string' causes TypeScript to show an error if a number is passed. Fixing the call to pass a string removes the error. Compiling TypeScript produces JavaScript that runs safely. Variables and errors are tracked step-by-step to help beginners understand the migration process.

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