2. Getting Started

TypeScript is a powerful language for building robust and scalable web applications. To start using TypeScript for your development projects, you need to set up your development environment. In this article, we will guide you through the process of setting up a TypeScript development environment step by step, including installing Node.js and npm, getting the TypeScript compiler, configuring tsconfig.json, and creating a simple “Hello World” example.

Installing Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript code outside the browser. npm (Node Package Manager) is a package manager that comes bundled with Node.js, and it’s used to install and manage JavaScript packages and libraries. To get started with TypeScript, you’ll need to have Node.js and npm installed on your computer.

You can download and install Node.js and npm from the official website: https://nodejs.org/

After installation, you can verify that Node.js and npm are correctly installed by running the following commands in your terminal:

Latest Stable Version in Sep 2023 - v18.17.1

node -v # Output: v18.10.0
npm -v # Output: 9.7.2

Installing TypeScript Compiler

Once you have Node.js and npm installed, you can use npm to install the TypeScript compiler globally. Open your terminal and run the following command:

npm install -g typescript

This command will install TypeScript globally on your system, making it available for all your projects.

To verify that TypeScript is installed, you can check its version by running:

tsc -v

Configuring tsconfig.json

To configure TypeScript for your project, you’ll need to create a tsconfig.json file. This file contains TypeScript compiler options and settings for your project. You can generate a basic tsconfig.json file using the TypeScript compiler’s initialization command:

tsc --init

This command will create a tsconfig.json file with default settings. You can customize this file according to your project’s requirements. The tsconfig.json file allows you to specify things like the target JavaScript version, module system, and compilation options.

Hello World Example

Now that your TypeScript environment is set up, let’s create a simple “Hello World” example to test it. Create a file named hello.ts with the following TypeScript code:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

In this code, we define a function greet that takes a name parameter and logs a greeting message to the console. We then call this function with the argument "TypeScript".

To compile this TypeScript code into JavaScript, open your terminal, navigate to the directory where hello.ts is located, and run the following command:

tsc hello.ts

This command will generate a hello.js file in the same directory. You can now run the JavaScript file with Node.js:

node hello.js

You should see the following output in your terminal:

Hello, TypeScript!

Congratulations! You have successfully set up your TypeScript development environment and created a simple TypeScript program.

Conclusion

Setting up a TypeScript development environment involves installing Node.js and npm, getting the TypeScript compiler, configuring the tsconfig.json file, and creating your first TypeScript program. With these foundational steps in place, you are now ready to explore TypeScript’s powerful features and build web applications with confidence.