Introduction to TypeScript

What Is TypeScript?

TypeScript is a statically typed superset of JavaScript developed and maintained by Microsoft. It adds an optional type system on top of JavaScript, which means you annotate variables, function parameters, and return values with types. The TypeScript compiler checks those annotations at build time and reports errors before your code ever runs — catching bugs that would otherwise only surface in production.

// JavaScript — no type information, no safety net
function add(a, b) {
  return a + b;
}

// TypeScript — types are explicit, mistakes are caught immediately
function add(a: number, b: number): number {
  return a + b;
}

add(1, 2);       // fine
add(1, "hello"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

The error above is caught at compile time, before you ship code to production. That is the core value proposition of TypeScript.

Why TypeScript Exists

JavaScript was designed for small scripts in web pages. As applications grew into hundreds of thousands of lines across large teams, the lack of types created real, costly problems:

• Refactoring is risky. Renaming a function or changing its signature in a large JS codebase means manually hunting every call site. TypeScript’s compiler does that for you automatically and flags every place that breaks.
• Tooling is limited. Without types, editors cannot reliably autocomplete, detect unused variables, or show inline documentation. Every object is opaque until you read the source.
• Bugs surface late. A typo in a property name or passing the wrong argument type shows up only when a user hits that code path at runtime — which may be rarely, or in a critical flow.

TypeScript addresses all three. It was first released in 2012 and has become the dominant choice for large-scale JavaScript projects.

TypeScript vs JavaScript

Understanding the key differences helps you know when TypeScript is pulling its weight and when you might prefer plain JS for a small script.

TypeScript is not a replacement for JavaScript — it compiles to JavaScript. You choose TypeScript to get better tooling and earlier error detection; the output is the same JS runtime that has always powered the web.

A Realistic Example

This example shows how TypeScript prevents a whole class of bug that is very easy to introduce and hard to track down in plain JavaScript.

interface User {
  id: number;
  name: string;
  email: string;
}

function sendWelcomeEmail(user: User): void {
  // TypeScript knows user.email is always a string — no runtime surprises
  console.log(`Sending email to ${user.email}`);
}

const newUser = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

sendWelcomeEmail(newUser); // works perfectly

// If you accidentally pass an incomplete object:
sendWelcomeEmail({ id: 1, name: "Bob" });
// Error: Property 'email' is missing in type '{ id: number; name: string; }'

Without TypeScript this bug would only surface at runtime when the email field turns out to be undefined — and likely not during development at all.

The TypeScript Ecosystem

TypeScript is deeply integrated into the modern JavaScript ecosystem, which means you benefit from it immediately in any standard project:

• Frameworks: React, Angular, Vue, Svelte, Next.js, Nuxt, and Remix all have first-class TypeScript support. Many are written in TypeScript themselves.
• Runtimes: Node.js supports TypeScript via ts-node or natively in newer versions. Deno runs TypeScript without any setup at all.
• Package ecosystem: Most popular npm packages ship with .d.ts declaration files or have community-maintained @types/* packages on DefinitelyTyped, so you get types for libraries you didn’t write.
• Tooling: VS Code, WebStorm, and other editors provide full IntelliSense, inline errors, and refactoring tools powered by the TypeScript language server.

Compilation Pipeline

TypeScript adds one step to your build: the compiler transforms .ts files into plain .js files. This happens before deployment — the browser or Node.js only ever sees standard JavaScript.

Your .ts file
     ↓
TypeScript Compiler (tsc)
  - Type checks your code
  - Strips all type annotations
  - Transpiles modern syntax to your target JS version
     ↓
Plain .js file  →  Node.js / Browser

The compiled JavaScript can target different environments — ES5 for older browsers, ES2020 for modern ones, CommonJS modules for Node, ESM for bundlers. You control this through tsconfig.json, covered in the next tutorial.

Key Takeaways

• TypeScript adds a static type system to JavaScript without changing the runtime behavior.
• Errors caught by the compiler never reach your users.
• The tooling improvements — autocomplete, safe refactoring, inline docs — are often as valuable as the type safety itself.
• TypeScript compiles to plain JavaScript, so it runs everywhere JavaScript runs.