Introduction to TypeScript

1. What Is TypeScript?

TypeScript is an open-source language built and maintained by Microsoft. It is a superset of JavaScript — meaning every valid JavaScript program is already a valid TypeScript program. On top of plain JavaScript, TypeScript adds one big feature: static type checking. A "type" is just the kind of value something holds — text, a number, true/false — and "static" means TypeScript checks those kinds before the program runs, not while it's running.

Because it's a superset, you can adopt TypeScript gradually. You don't rewrite anything; you rename a .js file to .ts and start adding type information wherever it helps.

2. Why Static Types Help

JavaScript is dynamically typed: a variable can hold text now and a number a moment later, and nobody complains until the program actually trips over it at runtime — often in front of a user. That freedom is handy for tiny scripts but turns into hard-to-find bugs in real apps.

Static types flip this around. You describe what each variable should hold, and TypeScript verifies it at compile time — before a single line runs. The payoff:

• Bugs caught before runtime — a mistyped value is an error in your editor, not a 2am crash.
• Better editor support — autocomplete, inline docs, and reliable rename/refactor.
• Self-documenting code — a function's types tell you exactly what it expects and returns.
• Safer refactoring — change one thing and the compiler points at every spot affected.
• Scales to large codebases — teams can move fast without breaking each other's code.

let total = 100;
total = "free";          // JS allows it (no warning)
console.log(total - 10); // NaN  — silent bug at runtime

let total: number = 100;
total = "free";   // ❌ TS2322: Type 'string' is not assignable to type 'number'
// You fix it in your editor — it never reaches your users.

3. TypeScript vs JavaScript

They share the same syntax and run the same way in the end — TypeScript just adds a checking step first. Here's the side-by-side.

4. How tsc Compiles TS → JS

Browsers and Node.js don't understand TypeScript — they only run JavaScript. So before you run anything, the TypeScript compiler (the tsc command) does two jobs: it checks your types, then erases them, leaving plain JavaScript. This erase step is why types cost you nothing at runtime — they vanish from the final code.

# You write hello.ts
let message: string = "Hi";

# tsc checks the types, then strips them away...
tsc hello.ts

# ...producing hello.js with NO type annotations left:
let message = "Hi";

# Now any browser or Node can run it:
node hello.js

The example below is the actual JavaScript output of a typed program — the comments show the TypeScript you'd write, the code is what runs. Press Run to see the result.

// This is plain JavaScript — exactly what TypeScript turns INTO.
// In a real .ts file you'd write the type ": string" on the next line.
// TypeScript checks the types, then erases them to produce this JS.

function greet(name) {            // in TS: function greet(name: string): string
  return "Hello, " + name + "!";
}

let user = "World";              // in TS: let user: string = "World";
console.log(greet(user));        // Hello, World!

// The string above is fine. TypeScript would REJECT 
...

5. Basic Setup

TypeScript runs on Node.js. If you don't have it, install it from nodejs.org. Then add TypeScript to your project (the recommended way) and create a config file:

# Start a project
npm init -y

# Add the TypeScript compiler as a dev dependency
npm install --save-dev typescript

# Generate a tsconfig.json with sensible defaults
npx tsc --init

# Compile every .ts file in the project
npx tsc

6. Your First Typed Variable

A type annotation is the heart of TypeScript. You write the variable name, a colon, then the type: let age: number = 25;. The three types you'll use constantly are number, string, and boolean.

// A TypeScript (.ts) file — the colon ": type" is the annotation
let age: number = 25;        // a whole or decimal number
let firstName: string = "Alice"; // text, in quotes
let isActive: boolean = true;    // true or false

// TypeScript can also INFER the type from the value, so this:
let city = "London";   // city is automatically a string — no need to write it
// is the same as: let city: string = "London";

When the type is obvious from the value, you can skip the annotation and let type inference figure it out — you still get full safety. Now try it. The boxes below run as JavaScript (the comments show the matching TypeScript). Fill in each ___ and press Run.

// 🎯 YOUR TURN — replace each ___ then press "Run".
// (This is runnable JS; in a .ts file you'd add ": number" / ": string".)

// 1) Make a variable "age" holding a whole number, e.g. 30
let age = ___;            // 👉 a number, no quotes  (in TS: let age: number = 30)

// 2) Make a variable "city" holding some text
let city = ___;           // 👉 text in "double quotes" (in TS: let city: string = "...")

// These lines already work once your variables exist:
console.log("You are " + age + " a
...

One more. TypeScript's whole job is to keep a variable's type consistent — a number stays a number. Fill in two numbers so the calculation works:

// 🎯 YOUR TURN — TypeScript's job is to keep a value's TYPE consistent.
// Fix the blanks so the maths actually works.

let price = ___;          // 👉 a number like 9.99   (in TS: let price: number = 9.99)
let quantity = ___;       // 👉 a number like 3       (in TS: let quantity: number = 3)

let total = price * quantity;
console.log("Total: $" + total.toFixed(2));

// In a .ts file, writing  price = "free"  would be a COMPILE error
// (TS2322: Type 'string' is not assignable to type 'number'
...

// === A tiny order summary — the kind of code TS keeps bug-free ===
// In TypeScript each variable would carry a type annotation so that a
// stray string in a number slot is caught BEFORE the program runs.

let productName = "Mechanical Keyboard"; // in TS: : string
let unitPrice = 79.99;                    // in TS: : number
let units = 2;                            // in TS: : number
let inStock = true;                       // in TS: : boolean

let subtotal = unitPrice * units;         // 1
...

// 🎯 MINI-CHALLENGE: Profile summary
// (Write runnable JS here; imagine the TS type on each line.)
//
// 1. Make these variables:
//      name      -> text     (in TS: : string)
//      age       -> number   (in TS: : number)
//      isStudent -> true/false (in TS: : boolean)
// 2. Print three tidy lines using +  to join text and values.
// 3. BONUS: print "Adult" if age is 18 or more, otherwise "Minor"
//      (hint: age >= 18 ? "Adult" : "Minor")
//
// ✅ Example output:
//    Name: Sam
//   
...