Setting Up TypeScript and Running Code

TypeScript is a popular superset of JavaScript that introduces static typing and other features to help developers write robust, maintainable code. This guide will walk you through setting up TypeScript, writing your first program, and compiling and running TypeScript code.

Prerequisites

Before starting, ensure the following:

Node.js Installed: Download and install Node.js from nodejs.org. This will also install npm (Node Package Manager).
Code Editor: Install a code editor such as Visual Studio Code, which offers excellent TypeScript support.

Installing TypeScript

TypeScript can be installed globally or locally within a project using npm.

Global Installation

Open a terminal or command prompt.
Run the following command:

   npm install -g typescript

Verify the installation:

   tsc --version

This command will display the installed TypeScript version.

Local Installation (Per Project)

Navigate to your project directory:

   cd path/to/your/project

Run the following command to install TypeScript as a development dependency:

   npm install typescript --save-dev

Verify the local installation by running:

   npx tsc --version

Initializing a TypeScript Project

TypeScript projects typically include a tsconfig.json file, which specifies the compiler options and project configuration.

In your project directory, run:

   tsc --init

This command generates a tsconfig.json file with default settings. You can customize it according to your project’s requirements. For example:

   {
     "compilerOptions": {
       "target": "ES6",
       "module": "CommonJS",
       "strict": true,
       "outDir": "./dist",
       "rootDir": "./src"
     },
     "include": ["src/**/*"]
   }

Create the necessary directories:

   mkdir src dist

Place your TypeScript files in the src directory.

Writing a TypeScript File

Create a file named hello.ts in the src directory:

   touch src/hello.ts

Open hello.ts in your editor and write the following code:

   const greet = (name: string): string => {
       return `Hello, ${name}!`;
   };

   console.log(greet("World"));

Compiling TypeScript Code

To compile TypeScript into JavaScript:

Run the TypeScript compiler:

tsc

This will compile all files included in the tsconfig.json file. The compiled JavaScript files will appear in the dist directory.

To compile a single file without a tsconfig.json file:

   tsc src/hello.ts --outDir dist

Running the Compiled Code

After compiling, you can run the JavaScript file using Node.js:

Run the following command:

   node dist/hello.js

The output should be:

Additional Tips

Watching for Changes

To automatically compile TypeScript files whenever you save changes:

Use the --watch flag:

   tsc --watch

TypeScript will continuously watch for changes and recompile as needed.

Installing TypeScript Node (ts-node)

To run TypeScript files directly without compiling:

Install ts-node:

   npm install -g ts-node

Run the TypeScript file directly:

   ts-node src/hello.ts

TypeScript Debugging in VS Code

Open the project in Visual Studio Code.
Configure the debugger:

Go to the Debug tab.
Click on create a launch.json file.
Select Node.js.

Update the launch.json file to include:

   {
     "type": "node",
     "request": "launch",
     "name": "Launch Program",
     "skipFiles": ["<node_internals>/**"],
     "program": "${workspaceFolder}/src/hello.ts",
     "preLaunchTask": "tsc: build - tsconfig.json"
   }

Set breakpoints and start debugging.

Conclusion

You have successfully set up TypeScript and learned how to compile and run TypeScript code. This setup forms the foundation for building robust and scalable applications with TypeScript.