Typescript - #2 Installation

TypeScript is a powerful open-source programming language developed by Microsoft. It builds on JavaScript by adding static types, which can enhance code quality, readability, and scalability. In this guide, we'll walk through the process of installing TypeScript on your machine and setting it up for your projects.

Prerequisites

Before we begin, ensure the following:

You have Node.js installed on your machine (required to run the TypeScript compiler). If not, download it from the official Node.js website.
You have npm (Node Package Manager) installed, which comes bundled with Node.js.

Step 1: Install Node.js and npm

If you haven't installed Node.js yet, follow these steps:

Download the latest stable version of Node.js from Node.js Downloads.
Run the installer and follow the setup instructions.
Verify that Node.js and npm are installed successfully by running the following commands in your terminal or command prompt:
```
 bashCopy codenode -v
 npm -v
```
These commands should display the installed versions of Node.js and npm, respectively.

Step 2: Install TypeScript Globally

To install TypeScript globally on your machine using npm, open your terminal and run the following command:

bashCopy codenpm install -g typescript

The -g flag installs TypeScript globally, making the tsc (TypeScript Compiler) command available anywhere on your system.

Once installed, verify the installation by checking the TypeScript version:

bashCopy codetsc -v

This should display the installed version of TypeScript.

Step 3: Initialize a TypeScript Project

To create a new TypeScript project, you need to initialize it with a tsconfig.json file. This file holds the configuration for the TypeScript compiler.

Create a new folder for your TypeScript project and navigate to it:

 bashCopy codemkdir my-typescript-project
 cd my-typescript-project

Initialize TypeScript configuration:
```
 bashCopy codetsc --init
```
This will generate a tsconfig.json file in your project directory. You can modify this file to customize your TypeScript compiler options, such as targeting specific ECMAScript versions, setting module resolutions, or enabling strict type-checking.

Step 4: Write and Compile TypeScript Code

Create a new TypeScript file, for example, index.ts:
```
 bashCopy codetouch index.ts
```

Open index.ts in a text editor (e.g., VSCode) and add some TypeScript code:

 typescriptCopy codelet message: string = 'Hello, TypeScript!';
 console.log(message);

To compile your TypeScript code into JavaScript, run the TypeScript compiler:
```
 bashCopy codetsc index.ts
```
This command will generate a index.js file containing the compiled JavaScript code.
Run the compiled JavaScript file using Node.js:
```
 bashCopy codenode index.js
```

You should see the message Hello, TypeScript! printed in the terminal.

Step 5: Automatic Compilation with Watch Mode

Instead of manually compiling your TypeScript files every time you make changes, you can enable "watch mode," which automatically recompiles your code when you save changes.

Run the following command:

bashCopy codetsc -w

This will keep the TypeScript compiler running in watch mode, and it will automatically compile files as you update them.

Optional: Install TypeScript Locally for Your Project

If you'd rather install TypeScript locally for a specific project (instead of globally), you can do so by running:

bashCopy codenpm install typescript --save-dev

This installs TypeScript as a development dependency, and you'll need to add a script in your package.json to run the TypeScript compiler:

jsonCopy code{
  "scripts": {
    "build": "tsc"
  }
}

Now, you can compile your TypeScript code by running:

bashCopy codenpm run build

Conclusion

You've now successfully installed TypeScript and set up a basic TypeScript project. TypeScript offers significant benefits over plain JavaScript, especially for large-scale projects with complex codebases, thanks to its type safety and better tooling support.

My daily blog