Previous
Written by: rJTutorial Team | Last Updated:

TypeScript Setup

TypeScript is a "typed" superset of JavaScript that catches errors during development rather than at runtime. However, browsers and Node.js cannot run TypeScript files directly. This guide will walk you through setting up a professional environment where your TypeScript code is efficiently compiled into clean JavaScript.

 

Prerequisites

  • Node.js Installed: You need Node.js to manage packages and run the TypeScript compiler. You can check your version by running node -v in your terminal.
  • Code Editor: Visual Studio Code (VS Code) is the industry standard for TypeScript because it includes built-in support for IntelliSense and real-time error checking.
Developer Tip: In VS Code, install the "ESLint" and "Prettier" extensions alongside TypeScript. This combination ensures your code isn't just bug-free, but also follows consistent styling guidelines automatically.

 

Steps to Install TypeScript

1. Install TypeScript via npm
To use the TypeScript compiler (tsc) anywhere on your system, install it globally using the Node Package Manager (npm):

npm install -g typescript

Verify that the compiler is ready by checking the version:

tsc --version
Watch Out: On some systems (especially macOS or Linux), you might need to use sudo npm install -g typescript if you encounter permission errors. Alternatively, for specific projects, it is often better to install TypeScript locally using npm install --save-dev typescript.

2. Initialize a TypeScript Project
Instead of manually configuring your settings, you can generate a tsconfig.json file. This file acts as the "brain" of your project, telling the compiler how to behave.

tsc --init

This command creates a configuration file with sensible defaults. Inside, you can specify things like which version of JavaScript to target (e.g., ES6) or where your compiled files should go.

Best Practice: Open your tsconfig.json and set the "outDir": "./dist" and "rootDir": "./src" properties. This keeps your project organized by separating your source TypeScript files from the generated JavaScript output.

3. Write Your First TypeScript File
Create a file named app.ts. In this example, we’ll use a "Type Annotation" for the function parameter to ensure only strings are passed in.

const greet = (name: string): string => {  
  return `Hello, ${name}! Your TypeScript setup is working.`;  
};  

console.log(greet("Developer"));
Common Mistake: Trying to run node app.ts directly. Node.js understands JavaScript, not TypeScript. If you try this, you will get a SyntaxError because Node won't recognize the : string type annotations.

4. Compile TypeScript to JavaScript
Now, use the compiler to transform your TypeScript into browser-ready JavaScript:

tsc app.ts

After running this, you will notice a new file named app.js in your folder. The compiler has stripped away the type annotations, leaving valid JavaScript.

Developer Tip: Use tsc -w (Watch Mode). This command tells TypeScript to watch your files for changes. Every time you hit "Save," it will automatically recompile your code so you don't have to run the command manually.

5. Run the Compiled JavaScript File
Finally, execute your code using the Node.js runtime:

node app.js

 

Summary

Setting up TypeScript is a foundational skill for modern web development. By installing the compiler via npm, initializing a tsconfig.json for project rules, and using the tsc command, you create a robust workflow. This setup allows you to catch bugs early through static typing while still delivering standard JavaScript to your users.

Previous