Why TypeScript over JavaScript - Visual Breakdown

Concept Flow - Why TypeScript over JavaScript

Write JavaScript Code

↓

Add TypeScript Types

↓

Compile TypeScript to JavaScript

↓

Catch Errors Early

↓

Run JavaScript in Browser/Node

↓

Better Code Quality & Maintenance

Start with JavaScript code, add types with TypeScript, compile it to JavaScript, catch errors early, then run the safe JavaScript code.

Execution Sample

Typescript

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

console.log(greet(42));

This code tries to greet a number instead of a string, TypeScript will catch this error before running.

Execution Table

Step	Code Line	Action	TypeScript Check	Result
1	function greet(name: string) {...}	Define function with 'name' as string	No error	Function ready
2	return "Hello, " + name;	Concatenate string and name	No error	Returns string
3	console.log(greet(42));	Call greet with number 42	Type error: Argument of type 'number' is not assignable to parameter of type 'string'	Compilation error, stops here

💡 TypeScript stops compilation due to type mismatch at step 3

Variable Tracker

Variable	Start	After greet(42) call
name	undefined	42 (type error)
return value	undefined	Not assigned due to error

Key Moments - 2 Insights

Why does TypeScript show an error when passing 42 to greet?

Because greet expects a string parameter, but 42 is a number. The execution_table step 3 shows this type mismatch causing a compilation error.

Does JavaScript catch this error at runtime?

No, JavaScript would run and produce 'Hello, 42' as a string, but TypeScript prevents this mistake early as shown in the execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A Function greet runs successfully

B JavaScript logs 'Hello, 42'

C TypeScript reports a type error

D No error, code compiles

💡 Hint

Check the 'TypeScript Check' and 'Result' columns at step 3 in execution_table

According to variable_tracker, what is the type of 'name' after calling greet(42)?

A undefined

B number (type error)

C string

D boolean

💡 Hint

Look at the 'name' row in variable_tracker after the greet(42) call

If we remove the type annotation ': string' from greet, what changes in the execution_table?

A Step 3 error disappears, code compiles

B Step 1 shows error

C Step 2 shows error

D No change, error remains

💡 Hint

Removing type annotation disables type checking on parameter, so step 3 error is gone

Concept Snapshot

TypeScript adds types to JavaScript for safer code.
It checks types before running code.
Errors are caught early during compilation.
JavaScript runs the compiled output.
This helps avoid bugs and improves maintenance.

Full Transcript

This visual shows why TypeScript is used over JavaScript. We start with a JavaScript function and add a type annotation to the parameter. When calling the function with a wrong type, TypeScript catches the error before running the code. The execution table shows the steps and where the error happens. The variable tracker shows the wrong type passed. This early error detection helps write better, safer code compared to plain JavaScript.