What Is TypeScript and Why It Exists

You already write JavaScript. TypeScript is JavaScript with one addition: a type system that catches mistakes before your code ever runs in the browser.

The problem TypeScript solves

JavaScript is a dynamically typed language. Variables can hold any value, and the interpreter only discovers type errors at runtime — when a user is already looking at a broken screen.

function formatAmount(amount) {
  return '$' + amount.toFixed(2);
}

formatAmount('45.00'); // Runtime error: amount.toFixed is not a function

The mistake here — passing a string instead of a number — is invisible until the code executes. In a large codebase, these errors can be buried deep in code paths that are rarely exercised, only surfacing in production.

TypeScript solves this by analyzing your code before it runs:

function formatAmount(amount: number): string {
  return '$' + amount.toFixed(2);
}

formatAmount('45.00'); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

The error appears the moment you write the bad call — in your editor, before you save the file.

What TypeScript is

TypeScript is a superset of JavaScript — every valid JavaScript file is also a valid TypeScript file. You add type annotations on top of the JavaScript you already know, and TypeScript uses them to verify your code is consistent.

TypeScript is also a compiler. The browser cannot run .ts files directly. The TypeScript compiler (tsc) reads your .ts source files, checks them for type errors, and outputs plain .js files the browser can run.

your .ts files → tsc → .js files → browser

No types survive into the output. The compiled JavaScript is clean, standard code with no TypeScript-specific syntax.

Why the industry adopted it

TypeScript was released by Microsoft in 2012 and has grown into one of the most widely used languages in web development. The reasons are practical:

Errors at write time, not runtime. The type system catches the class of bugs JavaScript discovers at runtime — wrong argument types, missing properties, calling methods that don’t exist — and surfaces them immediately.

Better tooling. Because TypeScript knows the shape of every value in your codebase, your editor can provide accurate autocomplete, refactoring support, and inline documentation. This works without comments or manual configuration.

Self-documenting code. Type annotations describe what functions expect and return. A reader does not need to trace through the implementation to understand the contract.

Required by major frameworks. Angular is built entirely in TypeScript and requires it. Most large React and Vue projects use it. Node.js codebases at scale almost universally use TypeScript.

What TypeScript does not do

TypeScript’s type system is erased at compile time. It has no effect at runtime. This means:

• TypeScript cannot validate data from an API response (the response is unknown at runtime)
• TypeScript cannot prevent JavaScript from being called with wrong types from outside the TypeScript boundary
• TypeScript does not make your code faster

What it does is make your code more correct — by finding type mismatches, undefined property accesses, and logic errors while you write.

AceIt and TypeScript

Throughout this course you will build AceIt — a browser-based trivia quiz that fetches live questions from the Open Trivia DB API. Every TypeScript concept you learn will be applied directly to the app.

In the app’s api.ts file, for example, you will write a generic fetchJson<T> function that tells TypeScript the exact shape of the data coming back from the API:

async function fetchJson<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json() as Promise<T>;
}

Right now, this may look unfamiliar. By Module 05 it will be natural. This is the version of JavaScript development that professional teams work in every day.

Exercise

No code yet — this lesson is conceptual. Answer the following in your own words:

1. What is the difference between a compile-time error and a runtime error?
2. Why can the browser not run .ts files directly?
3. Name one thing TypeScript’s type system can catch, and one thing it cannot.

Recap

• TypeScript adds a static type system to JavaScript and catches type errors before code runs.
• TypeScript is a superset of JavaScript — all valid JS is valid TS.
• The TypeScript compiler (tsc) strips type annotations and outputs plain .js files.
• Types are erased at compile time — they have no effect at runtime.
• TypeScript is required or strongly preferred in Angular, and widely used in React, Vue, and Node.js.