Skip to content

Join the Seedly owners community →

TypeScript

What is TypeScript?

Understanding why TypeScript exists and how it makes JavaScript safer

Written by 10 min read1 activity
Sprout, your presenter

Sprout presents

TypeScript is JavaScript with types, which catches bugs before your code ever runs. Frankly, I consider it one of computing's better ideas.TypeScript is JavaScript with types, which catches bugs before your code ever runs. Frankly, I consider it one of computing's better ideas.

Sprout circles a wobbly squiggle on a handwritten sheet in terracotta pencil, next to an unposted wooden mailbox
TypeScript catches mistakes before your code ever runs

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.

// 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.

// 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#

Sprout cranks a wooden press that turns a tagged sheet into a plain sheet with the tags removed
Compiling strips the types away and leaves plain JavaScript

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
// 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#

FeatureJavaScriptTypeScript
File extension.js.ts
Type checkingNoYes
Runs directlyYesIn browsers no (compiles to JS). Newer Node.js strips the types and runs it
IDE supportBasicExcellent
Learning curveLowerSlightly higher
Bug preventionRuntime errorsCompile-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.

This lesson ends with a short activity.