Environment Setup & Compiling Configuration

Before we start writing TypeScript, we need to set up our development environment. This guide will walk you through installing the TypeScript compiler and configuring your project using the tsconfig.json file.

1. Prerequisites: Install Node.js

TypeScript relies on Node.js to run its compiler. Make sure you have Node.js installed on your machine.

To verify your installation, open your terminal and run:

node -v
npm -v

If these commands return version numbers, you are ready to proceed.

2. Installing the TypeScript Compiler

You can install TypeScript globally or locally within a project. In professional development, it is best practice to install it locally so that every team member uses the same version.

Option A: Local Installation (Recommended)

Initialize a new project directory and install TypeScript as a development dependency:

mkdir my-ts-app
cd my-ts-app
npm init -y
npm install typescript --save-dev

You can now run the compiler locally using npx tsc.

Option B: Global Installation

If you want to run the compiler anywhere on your computer:

npm install -g typescript

Verify the compiler version to make sure it is installed:

tsc -v

3. Configuring TypeScript with tsconfig.json

The tsconfig.json file is the configuration file for a TypeScript project. It tells the compiler how to compile your code, which files to include, and which features of modern JavaScript to support.

Creating the Configuration File

Run the initialization command to generate a default tsconfig.json with detailed comments:

npx tsc --init

This will create a tsconfig.json file in your root folder.

Core Configuration Options

Here is a clean, production-ready configuration. Let us examine the most important fields:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Explaining the Options:

• target: Specifies which JavaScript version to output. Using ES2022 compiles down to modern JavaScript features.
• module: Defines the module system of the output code. NodeNext or CommonJS are commonly used.
• rootDir: Points to the folder containing your raw TypeScript source files.
• outDir: Points to the target folder where compiled JavaScript files should be saved.
• strict: Enables a broad range of type-checking behaviors that ensure stronger type safety. It is highly recommended to keep this true.
• esModuleInterop: Ensures compatibility when importing CommonJS modules into ES Module files.

4. Setting up strict Mode

The "strict": true flag is the single most important setting in your TypeScript configuration. It acts as an umbrella setting that enables several strict compiler checks:

• noImplicitAny: Raises an error on expressions and declarations with an implied any type, forcing you to define explicit types.
• strictNullChecks: Prevents you from performing actions on values that might be null or undefined.
• strictFunctionTypes: Enforces stronger type-checking on function parameters.

Enabling strict mode ensures your project benefits fully from type safety.

5. Summary

• Node.js is required to run the TypeScript tools.
• Use npm install typescript --save-dev to add TypeScript locally to a project.
• Initialize a project settings file using npx tsc --init.
• Keep strict set to true in compiler options to maximize the protection offered by the type system.