What is TypeScript?

What is TypeScript?

TypeScript is a strongly typed superset of JavaScript developed and maintained by Microsoft. Every valid JavaScript file is also a valid TypeScript file — you can adopt TypeScript gradually without rewriting a single line.

The core idea is simple: TypeScript adds a type layer on top of JavaScript that is erased at compile time. The browser or Node.js runtime never sees TypeScript; it only runs the compiled JavaScript output. This means TypeScript has zero runtime cost.

Your TypeScript code  →  tsc compiler  →  Plain JavaScript  →  Browser / Node.js

Why TypeScript exists

JavaScript was designed as a scripting language for small interactions on web pages. As applications grew to hundreds of thousands of lines of code, the lack of types became a serious problem:

• Refactoring is dangerous — renaming a function or changing a parameter means hunting down every call site manually.
• Autocomplete is unreliable — editors cannot suggest properties they do not know exist.
• Bugs surface at runtime — a typo in a property name or a wrong argument type is only discovered when a user encounters the error.

TypeScript solves these problems by making the shape of every value explicit and verifiable before the code ever runs.

TypeScript vs JavaScript: a concrete comparison

Consider the bug shown in the code example above. In JavaScript, passing a string where a number is expected produces NaN silently. The code runs, and the problem only appears when a customer sees a malformed price on screen. In TypeScript, the same mistake is caught the moment you write it — the editor underlines the error and the compiler refuses to produce output until it is fixed.

The same principle applies to object shapes. Mistyping user.naem instead of user.name is a trivially common mistake. JavaScript returns undefined and moves on. TypeScript reports error TS2339 and identifies the exact line and column.

How TypeScript compiles

TypeScript compilation is a two-step process:

1. Type checking — the compiler analyses every expression and verifies that types are used correctly. This step produces errors and warnings but does not change any code.
2. Transpilation — type annotations, interfaces, and TypeScript-specific syntax are stripped away. The output is plain JavaScript that any environment can run.

# Install the TypeScript compiler globally
npm install -g typescript

# Compile a single file
tsc hello.ts          # produces hello.js

# Compile an entire project (reads tsconfig.json)
tsc

The compiler can target different JavaScript versions (ES5, ES2020, ESNext) and module formats (CommonJS, ESM), making it suitable for browsers, Node.js, Deno, and Bun.

TypeScript 6.0: what is new

TypeScript 6.0 is the current stable release. The most important improvements over 5.x include:

• Import attributes — typed with { type: "json" } assertions are fully supported.
• Improved narrowing — control flow analysis handles more complex patterns, including aliased conditions.
• using and await using — explicit resource management (TC39 proposal) with full type support, allowing deterministic cleanup of files, database connections, and other disposable resources.
• Performance improvements — the type checker is significantly faster on large projects with many circular imports.
• isolatedDeclarations option — enables parallel declaration file generation, a prerequisite for the Go rewrite.

// TypeScript 6.0: using declarations for automatic resource cleanup
function readFile(path: string): Disposable {
  const handle = openFileHandle(path);
  return {
    [Symbol.dispose]() {
      handle.close();
    },
  };
}

function processFile(path: string): void {
  using file = readFile(path); // automatically closed when scope exits
  const content = file.read();
  console.log(content);
  // file.close() is called automatically here — no try/finally needed
}

The TypeScript ecosystem

TypeScript is not just a compiler. It is a complete tooling ecosystem:

The @types system deserves special mention. Many popular JavaScript libraries (Express, Lodash, React) were written before TypeScript existed. The DefinitelyTyped community maintains type definitions for these libraries under the @types/ namespace:

# Install type definitions for a library that ships without them
npm install -D @types/lodash

Modern libraries like Zod, Prisma, tRPC, and Angular are written in TypeScript and include their own declarations — no separate @types package needed.

Where TypeScript runs

TypeScript is used across the entire JavaScript ecosystem:

• Frontend — Angular requires TypeScript; React and Vue have excellent TypeScript support.
• Backend — Node.js, Deno, and Bun all run TypeScript natively or with minimal setup.
• Full-stack — Frameworks like Next.js, Nuxt, and Analog generate TypeScript projects by default.
• CLIs — Tools like Angular CLI, Nx, and Astro are themselves written in TypeScript.
• Libraries — Sharing typed APIs between packages eliminates an entire class of integration bugs.

The TypeScript playground

Before installing anything, the fastest way to explore TypeScript is the official playground at typescriptlang.org/play. It provides:

• A full TypeScript editor with error highlighting
• Real-time display of the compiled JavaScript output
• A dropdown to select different TypeScript versions (including nightly builds)
• Shareable links to your code snippets

Use the playground to verify every example in this course before moving it to a real project.

Practice

1. Open the TypeScript playground and type the JavaScript calculateDiscount function from the example above. Then add the TypeScript type annotations and observe how the error on the string arguments appears immediately.
2. Try accessing a non-existent property on a typed object. Notice the exact error code and message TypeScript provides.
3. Look up the release notes for TypeScript 6.0 at typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html and identify one feature not mentioned in this lesson.