Setting Up tsconfig

Introduction

In the world of TypeScript, the tsconfig.json file serves as the central hub of your project, much like the captain's wheel on a ship. This JSON configuration file allows you to control how the TypeScript compiler will convert your TypeScript code into JavaScript. But what exactly goes into this file? How can you tailor it to meet your project’s unique needs? 

In this article, we'll demystify the tsconfig.json file by walking you through its most essential properties, how to set it up, and some common scenarios where custom configurations come in handy.

What is tsconfig.json?

Simply put, tsconfig.json is a configuration file that specifies the root files and compiler options required to compile a TypeScript project. It plays a pivotal role in shaping the behavior of your TypeScript compiler, guiding it on what to do and what not to do.

Why Do You Need tsconfig.json?

Compiler Options: It lets you set various compiler options like whether to allow JavaScript files or only TypeScript files, how to handle modules, etc.

Project Structure: It helps define your project structure by specifying which files to include or exclude during the compilation process.

Type Checking: You can enable or disable strict type checking and various other type-related settings.

Setting Up Your First tsconfig.json

Creating a tsconfig.json is straightforward. Simply navigate to your project’s root directory and run:

tsc --init

This command generates a tsconfig.json file populated with default values and extensive comments.

Basic Properties

Here are some of the most commonly used properties:

compilerOptions: An object containing key-value pairs for various compiler options.

include: An array specifying which files should be included in the compilation.

exclude: An array specifying which files should be excluded from the compilation.

A Sample tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

Customizing Compiler Options

The compilerOptions object in tsconfig.json is where the real action happens. Here are some of the most impactful properties you can set:

target

Specifies the ECMAScript target version. It can be es5, es6, es2017, etc.

module

Defines the module code generation method, such as commonjs, amd, es2015, etc.

strict

Enables a wide range of type checking behavior that results in a more robust codebase.

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "strict": true
  }
}

Common Use-Cases

Working with React

When you're using TypeScript with React, you'll need to set the jsx compiler option to react.

Using TypeScript with Node.js

For Node.js projects, you'll often use commonjs as your module system. You may also want to set the resolveJsonModule to true to import JSON files.