TypeScript Basics›Core· 30 min read

Setting Up & Compiling

Install TypeScript, turn a .ts file into .js with the tsc compiler, and let watch mode rebuild for you.

What you will learn

Install TypeScript with npm
Compile a file with tsc
Use watch mode to rebuild automatically

Install the compiler

A quick word on the tools we will type into the terminal (the text window where you type commands to your computer, also called the command line):

npm (Node Package Manager) — the tool that downloads and installs code packages for your project. It comes bundled with Node.
npx — a helper that comes with npm; it runs a tool you have installed in *this* project (rather than a different version installed globally).
Node — the program that runs JavaScript on your computer; we use its node command to run the compiled .js file.

TypeScript ships as an npm package (a reusable bundle of code) called typescript. It gives you a command-line tool named tsc — the TypeScript Compiler (the program that turns .ts into .js). Install it for your project:

Terminal: install TypeScript and check the version

# inside your project folder
npm install --save-dev typescript

# check it installed
npx tsc --version

Note: Output: Version 5.4.5 (Your number may differ.) npx runs the locally installed tsc. Seeing a version means TypeScript is ready to use.

Write your first .ts file

Create a file called hello.ts. It looks almost like JavaScript — with one type label added:

hello.ts — a tiny typed program

// hello.ts
const name: string = 'Asha';
console.log('Hello, ' + name + '!');

Note: Output: (No output yet — this is just the source file. The : string on name is the only TypeScript-specific part; everything else is ordinary JavaScript. We run it in the next step.)

Compile it to JavaScript

Now turn that .ts file into a .js file you can actually run:

Compile, then run the output

npx tsc hello.ts      # creates hello.js
node hello.js         # run the JavaScript

Note: Output: Hello, Asha! tsc created a new file hello.js next to hello.ts, with the types stripped out (plain JS has no types). node then runs that JavaScript.

Watch mode — rebuild on every save

Re-running tsc by hand every time is tiring. Watch mode rebuilds automatically whenever you save:

Watch mode keeps recompiling

npx tsc hello.ts --watch
# now every save recompiles hello.js instantly

Note: Output: Starting compilation in watch mode... Found 0 errors. Watching for file changes. Leave this running in a terminal. Edit and save hello.ts and it rebuilds hello.js for you. Press Ctrl+C to stop.

Tip: In real projects you almost always run tsc --watch (or your framework runs it for you) so errors show up the instant you save.

The whole flow, in order

Here is every step from a fresh folder to a running program, start to finish:

Open a terminal inside your project folder.
Install TypeScript once: npm install --save-dev typescript.
Check it worked: npx tsc --version (you should see a version number).
Write your code in a .ts file, for example hello.ts.
Compile it: npx tsc hello.ts — this creates a plain JavaScript file hello.js.
Run the result with Node: node hello.js — this prints your output.
For day-to-day work, run npx tsc hello.ts --watch so every save recompiles automatically; press Ctrl+C to stop.

Q. What does running npx tsc hello.ts do?

Answer: tsc is the TypeScript compiler. It translates your .ts file into a .js file that Node or a browser can run.

✍️ Practice

Create a greet.ts that prints a greeting, compile it, and run the .js with Node.
Start tsc greet.ts --watch, change the message, save, and rerun the JS to see the update.

🏠 Homework

Open the generated .js file and write down two differences you notice between it and your .ts source.