What is TypeScript - Visual Explanation

Concept Flow - What is TypeScript

Write JavaScript code

↓

Add TypeScript types

↓

Compile TypeScript

↓

JavaScript output

↓

Run in browser or Node.js

TypeScript is JavaScript with added types. You write code with types, then compile it to plain JavaScript to run.

Execution Sample

Typescript

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

console.log(greet("Alice"));

This code defines a function with a typed parameter and prints a greeting.

Execution Table

Step	Action	Evaluation	Result
1	Define function greet with parameter name typed as string	TypeScript checks type	No error
2	Call greet with argument "Alice"	Check argument type matches string	Valid call
3	Function returns string `Hello, Alice!`	Template string evaluated	Hello, Alice!
4	console.log prints the returned string	Output to console	Hello, Alice!
5	Compilation produces JavaScript without types	TypeScript removes types	function greet(name) { return `Hello, ${name}!`; }

💡 Execution ends after printing greeting and compiling to JavaScript

Variable Tracker

Variable	Start	After Call	Final
name	undefined	"Alice"	"Alice"
greet return value	undefined	undefined	"Hello, Alice!"

Key Moments - 3 Insights

Why do we write types like : string in the code?

Types help catch errors before running code. See execution_table step 1 where TypeScript checks the type.

Does TypeScript run in the browser directly?

No, TypeScript compiles to JavaScript first (step 5), then the JavaScript runs in the browser or Node.js.

What happens if we pass a number instead of a string?

TypeScript will show an error during compilation (step 2), preventing wrong types from running.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of calling greet("Alice") at step 3?

A "Hello, Bob!"

B "Hello, Alice!"

C Error: wrong type

D undefined

💡 Hint

Check the 'Result' column at step 3 in the execution_table

At which step does TypeScript remove types to produce JavaScript?

A Step 5

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' and 'Result' columns for step 5 in the execution_table

If we change the parameter type from string to number, what will happen?

A Code runs without errors

B Output changes to a number

C TypeScript shows an error during compilation

D JavaScript code will include types

💡 Hint

Refer to key_moments about type errors and execution_table step 2

Concept Snapshot

TypeScript is JavaScript with types.
You add types to variables and functions.
TypeScript checks types before running.
It compiles to plain JavaScript.
JavaScript runs in browsers or Node.js.
Types help catch errors early.

Full Transcript

TypeScript is a programming language that builds on JavaScript by adding types. You write code with types, like specifying a variable must be a string. TypeScript checks these types before running the code to catch mistakes early. Then, it compiles the code into plain JavaScript, which can run in any browser or Node.js environment. For example, a function greet takes a string name and returns a greeting. When you call greet("Alice"), TypeScript ensures "Alice" is a string, then the function returns "Hello, Alice!". The types are removed during compilation, so the final JavaScript runs normally. This process helps programmers avoid bugs and write clearer code.