TypeScript BasicsBeginner⏱ 8 min01 / 7

What is TypeScript?

Discover how TypeScript adds a safety net of types on top of JavaScript, catching bugs before your code ever runs.

You already know JavaScript — or you're learning it. So why does everyone keep mentioning TypeScript? The short answer is: JavaScript is wonderfully flexible, but that flexibility can bite you. A typo in a variable name, a function that receives the wrong kind of value, a property that doesn't exist on an object — JavaScript won't warn you about any of these until the moment they blow up in a user's browser. TypeScript exists to catch those problems before you ever press run.

#TypeScript is JavaScript with a Safety Net

TypeScript is a superset of JavaScript. That means every valid JavaScript file is already a valid TypeScript file — TypeScript just adds one extra concept on top: types. You can annotate your variables, function parameters, and return values with information about what kind of data they hold. TypeScript reads those annotations and flags inconsistencies before your code runs.

Think of it like

Think of a GPS with guardrails

JavaScript is like driving on an open road with no guardrails — you can go anywhere, which is powerful, but one wrong turn sends you off a cliff and you only find out when you're already falling. TypeScript adds guardrails along the road. You can still drive wherever you want, but the guardrails give you instant feedback if you drift toward the edge. The road itself (JavaScript) hasn't changed — the guardrails are just an extra layer of protection.

#A Side-by-Side Comparison

Here is the same function written in plain JavaScript, then in TypeScript. The TypeScript version tells the language exactly what types the inputs and output should be.

JavaScript only finds the problem when the bad call actually runs — which might be in production.
// JavaScript — no type information
function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");   // works fine: "Hello, ALICE"
greet(42);        // crashes at runtime: TypeError
TypeScript highlights the mistake in your editor before you run anything.
// TypeScript — parameter is annotated as string
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet("Alice");   // fine
greet(42);        // Error caught instantly: Argument of type 'number' is not assignable to parameter of type 'string'.

#What Types Look Like

A type annotation is written with a colon after a variable or parameter name. TypeScript has several built-in primitive types you will use constantly.

Explicit annotations are optional when TypeScript can work out the type itself — this is called type inference.
let username: string = "alice";
let age: number = 28;
let isLoggedIn: boolean = true;
let scores: number[] = [95, 87, 100];

// TypeScript can also infer types without annotations:
let city = "Lagos";   // inferred as string
city = 42;            // Error: Type 'number' is not assignable to type 'string'.

#TypeScript Compiles to Plain JavaScript

Browsers and Node.js do not understand TypeScript directly — they only speak JavaScript. So TypeScript comes with a compiler (the tsc command) that reads your .ts files, checks them for type errors, and outputs clean .js files. The types vanish entirely at that point; what runs in production is pure JavaScript.

You write TypeScript, the compiler produces the JavaScript. Think of tsc as a translator.
# Install TypeScript globally
npm install -g typescript

# Compile a file
tsc greet.ts

# This produces greet.js — plain JavaScript the browser can run
Note

Your editor does the heavy lifting

In practice, you rarely run tsc by hand. Tools like VS Code run TypeScript's type checker in the background, underlining mistakes as you type — the same way a spell-checker highlights misspelled words. This instant feedback loop is one of the biggest reasons developers love TypeScript: you fix bugs while the code is still fresh in your head, not hours later when something breaks.

#Why Teams Choose TypeScript

TypeScript is not just about catching typos. Here is what it concretely improves in day-to-day development:

  • Editor autocomplete — Because TypeScript knows the shape of your data, your editor can suggest the right property names and method names as you type.
  • Safe refactoring — Rename a function or change a parameter, and TypeScript immediately shows every place in the codebase that needs updating.
  • Self-documenting code — Type annotations act as lightweight documentation that is always in sync with the actual code (unlike comments, which go stale).
  • Onboarding — A new team member can understand what a function expects and returns just by reading its signature, without digging through all the call sites.
Common mistake

TypeScript checks types — it does not make code faster

One common misconception: TypeScript does not change how your code runs. It only checks it before it runs. A TypeScript program is not faster or slower than the equivalent JavaScript — the compiled output is identical JavaScript. TypeScript's value is entirely in the development experience: fewer bugs, better tooling, more confident code.

Quick check

What does the TypeScript compiler (`tsc`) produce as its output?

#TypeScript is a Gradual Commitment

You do not have to convert an entire codebase to TypeScript overnight. You can rename individual files from .js to .ts one at a time, and TypeScript is happy to work alongside plain JavaScript files. Many teams start by turning on TypeScript in new files only, and migrate the rest over time. This makes it low-risk to adopt — there is no big-bang rewrite required.

Key takeaways

  • TypeScript is a superset of JavaScript — it adds static types and compiles back down to plain JavaScript.
  • Type annotations let you declare what kind of data a variable or function parameter should hold, so TypeScript can catch mismatches before you run anything.
  • Type inference means you often don't need to write annotations explicitly — TypeScript figures out the type from context.
  • The real payoff is in your editor: instant error highlighting, autocomplete, and safe refactoring across a whole codebase.
  • TypeScript does not change runtime behaviour — it is a development-time tool only.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

Type annotations are erased when TypeScript compiles to JavaScript. What does this snippet print at runtime?

predict-output
let username: string = "alice";
let age: number = 28;
let isLoggedIn: boolean = true;

console.log(username);
console.log(age);
console.log(isLoggedIn);
Fix the bug#2

This code has a bug — what's wrong?

fix-bug
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}

greet(42);
Fill in the blank#3

Complete the annotations so this function takes a string and returns a string, matching the lesson's greet example. Fill each blank with the correct type.

function greet(name: ):  {
  return "Hello, " + name.toUpperCase();
}
Reorder the lines#4

Arrange these terminal commands into the correct order to install TypeScript and compile greet.ts into runnable JavaScript.

1
npm install -g typescript
2
node greet.js
3
tsc greet.ts
Your turn
Practice exercise

Write a TypeScript function called formatPrice that takes two parameters: amount (a number) and currency (a string). It should return a string that combines them, like "$29.99" when called with (29.99, "$"). Add type annotations to both parameters and the return type. Then call your function and store the result in a typed variable.

Try it live — edit the code and hit Run to see the output:

solution.ts · editable