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.