Kickstart Your TypeScript Set Up 6 exercises
explainer

JavaScript vs. TypeScript in the Build Process

Let's dive into how TypeScript functions within the build process.

JavaScript-only Setup

With a JavaScript-only setup, you would typically be crafting code in JavaScript files, namely .js or possibly .jsx files. These files are then utilized directly by the browser and runtime environments

Loading explainer

Transcript

00:00 Let's talk a bit about how TypeScript works in the build process. If you have a JavaScript only setup, you're going to have you over here, and you're going to be writing code in JavaScript files, right? So .js files or .jsx files sometimes.

00:16 And those are then going to be used by the browser and Node.js. So it's a very simple setup. You just write your code in JavaScript files, and it's then consumed by the browser or Node. Node is a runtime environment that can basically run JavaScript files on a server,

00:35 on your desktop, on mobile applications. Node is extremely versatile, extremely widely used. But of course, your JavaScript files could be consumed by some other runtime as well, like Hermes, for instance, or React Native or Bun or Deno or something. So you can think of these runtimes really as just representative of many other,

00:54 but the two main ones, browser and Node.js. So again, very, very simple here, just you writing JavaScript files with the browser and Node.js in mind. TypeScript is a lot more complicated. So let's start over on the left-hand side here. Start with you.

01:12 You're writing your code in .ts files now, so a different file extension here. These ts files, two things happen to them. First of all, they're watched by TypeScript's IDE server. It has the ts server, which sits in your IDE and gives you in IDE warnings,

01:30 which gives you direct feedback on what you're getting wrong, let's say, in your files, or giving you autocomplete or letting you do things like renaming symbol or all sorts of powerful things. So the IDE server creates a feedback loop where you write your code, it's watched by TypeScript,

01:48 that gives you feedback, that helps you write better code. Then your ts files, they can't be run by the browser and Node.js themselves. So they actually need to be built by something. And this is then the TypeScript CLI. The TypeScript CLI is a command line interface that can let you turn your TypeScript files

02:06 into JavaScript files. And then those JavaScript files get used by the browser and Node.js. And so this setup is the same as we saw before, except you're not authoring your JavaScript files yourself. You're actually writing your code in TypeScript files, which is giving you this beautiful virtuous feedback loop

02:25 inside your IDE. Now, these are the two main differences then. You're essentially writing TypeScript files, which gives you this lovely feedback loop, which you just don't get if you're writing JavaScript. You often have to test your code inside the browser or inside Node.js, which can be slower,

02:42 a little bit more painful to get used to. Whereas TypeScript gives you lovely feedback inside your IDE, but at the cost of a little bit of a stranger, slightly more convoluted build process.