TYPESCRIPT / LESSON 01

What is TypeScript?

Understanding why TypeScript exists and how it makes JavaScript safer

Written by Andrew Lee JenkinsPublished Oct 5, 202610 min readFree lesson

You ever fill out a form online and accidentally type your phone number into the email box? The form lights up red right away and says "Please enter a valid email." Annoying for half a second... but it just saved you from sending garbage.

TypeScript does that exact thing for your code. It catches mistakes BEFORE your program ever runs, so you're not finding out about a bug from a real user who's already mad about it.

JavaScript's Flexibility Problem

JavaScript is super flexible. You can stick any value in any variable, pass anything into any function, and JavaScript will do its best to make it work anyway. Sounds great on paper. In practice it's how bugs sneak in.

Example

// JavaScript lets you do this without complaints
let age = 25;
age = "twenty-five"; // No error! But this could break things later

function calculateTax(price) {
  return price * 0.08; // What if someone passes "hello"?
}

calculateTax("not a number"); // Returns NaN - no warning!

Bugs like these can hide out until your app is live and real people are using it. That's a lousy way to find out.

What TypeScript Actually Is

TypeScript is a superset of JavaScript. Fancy phrase, simple meaning... every bit of valid JavaScript is also valid TypeScript. TypeScript just bolts on one big extra, and that's types.

Types tell the computer what kind of data a variable is supposed to hold, or what kind of data a function is expecting to get.

Example

// TypeScript catches mistakes immediately
let age: number = 25;
age = "twenty-five"; // Error! Type 'string' is not assignable to type 'number'

function calculateTax(price: number): number {
  return price * 0.08;
}

calculateTax("not a number"); // Error! Argument of type 'string' is not assignable

Here's the big idea. TypeScript checks your code before it runs. The errors show up in your editor while you type, instead of after your users trip over them.

Before I ever touched marketing I had an engineering career, and this is the part that clicked for me right away. Catching a problem on paper is WAY cheaper than catching it after the thing is built.

How TypeScript Works

Browsers can't run TypeScript directly. Node.js is a different story now. Since Node 22.18 and 23.6 it'll run a .ts file straight up by stripping the types out on the fly (it doesn't check them though, and a few TypeScript-only features like enum won't run that way). For anything headed to a browser, and for actually catching your mistakes, the normal route is still a process called compilation that checks your TypeScript and turns it into regular JavaScript.

Step 1. You Write TypeScript

You write your code, types and all, in .ts files.

Step 2. TypeScript Checks Your Code

The TypeScript compiler reads through your code and looks for type errors.

Step 3. It Outputs JavaScript

TypeScript strips out the type annotations and spits out plain JavaScript that any browser can run. Heads up though... by default it'll still write out that JavaScript even when it found errors, so don't just ignore the red squiggles and hope for the best.

Think of it like a translator who proofreads too. It translates your typed code into JavaScript and flags the mistakes along the way.

Why Developers Love TypeScript

TypeScript got REALLY popular, really fast. Here's why big companies like Microsoft, Google, Airbnb, and Stripe use it.

Catch bugs early - Find errors as you type, before they ever reach production
Better autocomplete - Your editor knows which properties and methods are available
Self-documenting code - Types tell you what a function expects without reading the whole thing
Safer refactoring - Change a function and TypeScript points at everywhere that just broke
Team collaboration - Types make it obvious how code is supposed to be used

Example

// Your editor knows user has name and email properties
interface User {
  name: string;
  email: string;
}

function greetUser(user: User) {
  // Your editor autocompletes user.name and user.email
  return `Hello, ${user.name}!`;
}

TypeScript vs JavaScript: A Quick Comparison

Feature	JavaScript	TypeScript
File extension	`.js`	`.ts`
Type checking	No	Yes
Runs directly	Yes	In browsers no (compiles to JS). Newer Node.js strips the types and runs it
IDE support	Basic	Excellent
Learning curve	Lower	Slightly higher
Bug prevention	Runtime errors	Compile-time errors

TL;DR

TypeScript is JavaScript with type safety added, basically a spell checker for your code
It catches errors before your code runs, which saves you from bugs in production
All JavaScript is valid TypeScript, so you can switch over gradually
TypeScript compiles down to regular JavaScript that runs anywhere (newer Node.js can also run .ts files directly, minus the type checking)
Big companies use TypeScript because it keeps large codebases manageable

What's Next?

So now you know what TypeScript is and why it exists. Next up we get into the actual syntax... you'll learn how to write type annotations and meet the basic types TypeScript gives you.

Loading the lesson…

Loading activities…