Getting Started with TypeScript · Lesson 1 of 17

What Is TypeScript? TypeScript vs JavaScript

4 min read Updated Nov 8, 2026 Saurabh Samir

On this page

The bug JavaScript lets through
What TypeScript adds
How TypeScript runs
TypeScript vs JavaScript
Practice
Summary

TypeScript is JavaScript with types. You write the same JavaScript you know, plus annotations like name: string, and the TypeScript compiler checks that your code uses values correctly – before it ever runs. Created by Microsoft in 2012, it's now the default for Angular, standard in React and Next.js projects, and used by most Node.js teams. Job listings for front-end and full-stack roles ask for it far more often than plain JavaScript.

In this lesson

What TypeScript adds to JavaScript
Catching bugs before the code runs
How TypeScript becomes JavaScript
Where TypeScript is used

The bug JavaScript lets through

In JavaScript this runs – and silently produces nonsense:

function totalPrice(price, qty) {
  return price * qty;
}
console.log(totalPrice("499", 2));      // 998 (string coerced)
console.log(totalPrice(499));           // NaN – qty forgotten
const user = { name: "Asha" };
console.log(user.nmae);                 // undefined – typo, no error

The same code in TypeScript is rejected by the compiler, with the exact line and reason:

function totalPrice(price: number, qty: number): number {
  return price * qty;
}
console.log(totalPrice("499", 2));
console.log(totalPrice(499));
const user = { name: "Asha" };
console.log(user.nmae);

Type errors

main.ts(4,24): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
main.ts(5,13): error TS2554: Expected 2 arguments, but got 1.
main.ts(7,18): error TS2339: Property 'nmae' does not exist on type '{ name: string; }'.

Three bugs found without running anything, each with its line, column and an exact reason. In a large codebase these messages appear in your editor as you type, long before a user hits the bug.

What TypeScript adds

TypeScript = JavaScript + a type system

Type annotationsname: string, scores: number[], (a: number) => boolean
Type inferencelet count = 5 is known to be a number – no annotation needed
Interfaces and type aliasesdescribe the shape of objects and API responses
Unions, generics, utility typesmodel real data precisely
All of modern JavaScriptevery JS feature still works – TypeScript is a superset

How TypeScript runs

From .ts to running code

You write main.tsJavaScript plus types
tsc type-checks itreports errors; nothing runs yet
Types are erasedthe output main.js is plain JavaScript
A JS runtime runs itbrowser, Node.js, Deno, Bun

interface Course {
  title: string;
  lessons: number;
}
const courses: Course[] = [
  { title: "TypeScript", lessons: 20 },
  { title: "C++ with STL", lessons: 33 },
];
const total = courses.reduce((sum, c) => sum + c.lessons, 0);
console.log(`${courses.length} courses, ${total} lessons`);

Output

2 courses, 53 lessons

The compiled JavaScript is the same code without the interface and : Course[] – types exist only at compile time, so TypeScript adds zero runtime cost. It also means types can't check data that arrives at run time (an API response) unless you validate it – more on that later.

TypeScript vs JavaScript

	JavaScript	TypeScript
Types	dynamic, checked while running	static, checked before running
Errors found	at run time, often by users	at compile time, in your editor
Editor help	basic autocomplete	precise autocomplete, rename, go-to-definition
Runs in	browsers and Node directly	compiled (or type-stripped) to JavaScript first
Learning curve	lower	a little higher – it pays off on teams and big codebases

Where you'll meet it

Angular is written in and requires TypeScript; create-next-app and Vite's React templates default to it; NestJS, Prisma and most modern Node libraries ship with types. Knowing TypeScript well is now part of being a professional JavaScript developer.

Practice

Quick check

Is TypeScript a different language from JavaScript?

It's a superset: every valid JavaScript program is (almost always) valid TypeScript, plus optional type syntax.

Do types exist when the program runs?

No – they're erased during compilation; the output is plain JavaScript.

When does TypeScript report a type error?

At compile time (and live in the editor), before the code runs.

Summary

TypeScript adds static types to JavaScript and catches bugs before code runs.
tsc checks types and emits plain JavaScript; types have no runtime cost.
It's the standard for Angular, React/Next.js and Node teams.

Finished this lesson?

Mark it complete to track your progress, then carry on with the next lesson.

Next lesson