Introduction to TypeScript

What "Superset of JavaScript" Really Means

Every valid JavaScript file is already valid TypeScript - TypeScript does not replace the language, it layers optional type annotations, interfaces, and compile-time checks on top of it. This means an existing JavaScript codebase can usually be renamed from `.js` to `.ts` and still compile, even before a single type annotation has been added.

The types themselves have no representation at runtime. They exist purely to help the compiler (and your editor) catch mistakes before the code ever runs, and they are stripped away entirely during compilation - the JavaScript that ships to a browser or Node.js has no trace that TypeScript was ever involved.

Why Static Typing Helps

In plain JavaScript, a typo like calling `user.emial` instead of `user.email` is only discovered when that line actually executes - possibly in production, possibly rarely, depending on which code path triggers it. TypeScript's compiler checks every reachable line against declared types, so many classes of bugs (wrong property names, passing a string where a number is expected, forgetting a required function argument) surface immediately, at compile time, instead of as a runtime crash.

Static types also serve as always-up-to-date documentation. A function signature like `function total(items: CartItem[]): number` tells you exactly what to pass in and what you get back, without needing to read the implementation or trust a comment that might have gone stale.

Compiling with tsc

The TypeScript compiler, `tsc`, reads `.ts` files, type-checks them, and emits plain `.js` files (plus optional `.d.ts` declaration files and source maps). Running `tsc` with no arguments looks for a `tsconfig.json` in the current directory and compiles the project it describes; running `tsc --init` generates a starter `tsconfig.json` for you.

During everyday development, most projects run `tsc` in watch mode (`tsc --watch`) or rely on a bundler (Vite, webpack, esbuild) that calls into the TypeScript compiler API itself, so you rarely invoke `tsc` by hand outside of a final production type-check.

// greet.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('Ada'));
// console.log(greet(42)); // compile-time error: number is not assignable to string

// Compile with:
//   tsc greet.ts
// This produces greet.js, plain JavaScript with the types stripped out.

Basic Type Annotations

Annotations follow a variable, parameter, or return type with a colon and the type, such as `let age: number = 30`. You do not need to annotate everything - TypeScript infers types from initial values wherever it safely can, and annotations are most valuable on function boundaries (parameters and return types), since that is where the compiler has nothing else to infer from.