Typescript Compiler Tsc And Tsconfigjson Complete Guide

Step-by-Step Guide to TypeScript Compiler (tsc) and tsconfig.json

Step 1: Install Node.js

TypeScript requires Node.js to run. You can download and install Node.js from here. Installing Node.js will automatically install npm (Node Package Manager), which you'll use to install TypeScript.

Step 2: Install TypeScript

Once you have Node.js and npm installed, you can install TypeScript globally with the following command:

npm install -g typescript

Step 3: Verify TypeScript Installation

Check that TypeScript is installed correctly by typing the following command:

tsc --version

You should see the installed version number.

Step 4: Create a New TypeScript Project

Create a new directory for your TypeScript project:

mkdir my-typescript-project
cd my-typescript-project

Step 5: Initialize a New Node.js Project (Optional)

If you want to initialize a Node.js project, you can do so by running:

npm init -y

This command will create a package.json file with default settings.

Step 6: Create a TypeScript File

Create a new TypeScript file named index.ts:

// index.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

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

Step 7: Compile TypeScript to JavaScript

You can compile the TypeScript file to JavaScript using the tsc command:

tsc index.ts

This command will generate a corresponding index.js file in the same directory:

// index.js
function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("TypeScript"));

Step 8: Create a tsconfig.json File

The tsconfig.json file lets you configure your TypeScript project. You can create a basic tsconfig.json file by running:

tsc --init

This command creates a default tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Step 9: Customize tsconfig.json

You can customize the tsconfig.json file to suit your project. For example, to change the output directory, add an outDir option:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  }
}

With this configuration, TypeScript will compile all files in the src directory to the dist directory.

Step 10: Structure Your Project

Organize your TypeScript files in the src directory. For example, create a src directory and move index.ts there:

mkdir src
mv index.ts src/

Step 11: Update tsconfig.json to Include the Source Directory

Modify the tsconfig.json to include the src directory:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Step 12: Compile the Project

Run the TypeScript compiler to compile all files in the src directory to the dist directory:

tsc

You should now see a dist directory with the compiled index.js file.

Step 13: Run the Compiled JavaScript

You can run the compiled JavaScript file using Node.js:

node dist/index.js

You should see the output: