TypeScript is a fantastic language, but since it’s built on top of an older one (JavaScript), the ecosystem has grown a bit complex and confusing. So if you’ve ever been confused by what Deno vs. Node vs. V8 vs.
tsx vs. so many more are, this is the place for you.The key thing to understand is this: computers do not directly run TypeScript. TypeScript must either be compiled to JavaScript first, or run through a tool that does that compilation for you.
This article goes through the types of layers you need to know about and examples of the most common and important individual technologies for those layers.
Language
The thing you write.
JavaScript
The “final” language that actually executes.
console.log("hello");
TypeScript
JavaScript plus a type system and some extra syntax.
function greet(name:string) { return`Hello${name}`; }
Languages require an engine to actually execute them, and TypeScript is never executed itself, it is transpiled into JavaScript.
Engine
The thing that actually executes the code.
Responsibilities:
- Parse JS
- Compile JS
- Optimize JS
- Execute JS
- Garbage collection
JavaScript engines do NOT offer:
- filesystem access
- networking APIs
- npm
- package management
- environment variables
- browser DOM
Those come from runtimes.
Examples
- V8: Used in Google Chrome and Chromium-based browsers, Node.js, Deno, Electron
- SpiderMonkey: Used in Firefox
- JavaScriptCore: Used in Safari and WebKit-based browsers
- Hermes: Facebook’s JS engine behind React Native
Runtime
An environment built around an engine that provides APIs and capabilities.
The first runtimes were exclusively in browsers, which offered things like the Document Object Model. Then Node.js came around and made it possible to access things like file systems.
Examples
- Node.js: the V8-based runtime that kicked off the serverside JavaScript revolution.
- Deno: a much newer, but also V8-based, runtime offering modern features such as sandboxed environments, built-in formatting, linting and test-running, and native TypeScript support (so you don’t have to separately compile it).
- Bun: the newest of the bunch; based on JavaScriptCore and known for being extremely fast and offering even more built-in features. In 2025, Bun was bought by Anthropic, which has left some developers feeling concerned about its future.
Compilers & Transpilers
Traditionally, something is called a “compiler” when it converts source code from one language into a representation at a different level of abstraction, such as bytecode. So for example, the GNU C Compiler converts C code into assembler.
On the other hand, a “transpiler” converts from one programming language to another at a similar level of abstraction. Converting TypeScript into JavaScript is unequivocally transpilation.
However, for some time now, the meaning of “compilation” has been a bit muddy, and it’s more useful to talk about specific execution pipelines.
In any case, Microsoft called the TypeScript Compiler (
tsc) a, well, compiler, so we’re just gonna go with that ;)Examples
- tsc: the official TS compiler.
- esbuild: a very common Go-based transpiler & bundler.
- SWC: a very fast Rust-based transpiler used by Next.js/Vercel.
Package Managers
Package managers handle the libraries you want to use in your project: specifying them, downloading them, and inevitably making you want to tear your hair out when something goes awry.
Examples
- npm: the Node Package Manager, the first package manager for JavaScript.
- pnpm: “Performant NPM” came along because npm takes up infamous amounts of disk space. pnpm’s main selling point is that instead of keeping copies of the same libraries for each separate project, it hard links a central copy into your projects.
- Yarn: created by Facebook in 2016, then superceded by Yarn Berry (currently Yarn 4). Became less popular with the rise of pnpm.
- Bun: As mentioned above, Bun is a runtime that also includes its own package manager.
Build Tools
Bundlers & Minifiers
Bundlers combine many files into fewer files, minifiers make files smaller. This is generally most important in browser contexts, where every byte has to be transmitted to the user.
For example:
src/ app.ts utils.ts api.ts
might become:
dist/ bundle.js
Examples
- Webpack: the historically dominant bundler; no longer commonly used in new projects.
- Babel: also historically important; a compiler that made it safer to run scripts in browsers that were far less standardized than they are today
- Rollup: popular for bundling libraries
- esbuild: extremely fast modern bundler
- Bun: also has its own bundler
- Turbopack: newer bundler from Vercel and used in Next.js
Development Servers
Modern development with JS/TS involve software that runs in the background, watching for file changes, recompiling on the fly, and refreshing your browser automatically.
Examples
- Vite: very popular modern choice
- Next.js Dev Server: built into Next.js
- Astro Dev Server: built into Astro
Other Build Tools & Systems
- ts-node: an older tool originally designed to allow Node to run TS files.
- tsx: a new, faster TypeScript runner for node. If you just need to run a TypeScript file, use tsx.
- tsc: it’s the compiler, but it’s also very commonly used just for rapid type-checking.
- Turborepo: a system for coordinating monorepos, where multiple normally-separate software packages are colocated
So What Should I be Using Today?
Most developers no longer assemble a build pipeline from scratch.
For example, a modern Next.js project typically uses:
TypeScript ↓ SWC ↓ Turbopack ↓ Next.js build system ↓ Deployment
while a modern Vite application typically uses:
TypeScript ↓ esbuild ↓ Rollup ↓ Deployment
As a result, many developers interact only with commands like:
npm run dev npm run build
while the framework orchestrates the underlying build tools automatically.