What is a tsconfig.json file and why do I need it?

Published:

The tsconfig.json file is the main configuration file for TypeScript. Similar to how the package.json file in a directory identifies the presence of a Node.js project (or at least node modules), the tsconfig.json file identifies the presence of TypeScript files in the project.

Adding this file will give you some control on the compilation of TypeScript into JavaScript.

You can generate a new tsconfig.json file by using the flag --init.

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
  • target - JavaScript syntax output ()
  • rootDir - Project source directory directory
  • outDir - Output directory for your built JavaScript files, this directory would typically be added to the gitignore.
  • module - Don’t really worry about the depths of this one just yet, for now, we’ll use “commonjs”

If you open up the tsconfig.json, that is going to be a pretty big and intimidating file. There are a lot of options and configurations you can make for the tsc compiler, but you dont need to worry about most of these right now.

A simple tsconfig.json file to get started with that will take the TypeScript files in a directory src and output them into a directory dist. It will compile your JavaScript for the most backwards compatibility.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src"
    }
}

Example

$ ls
tsconfig.json
$ cat tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src"
    }
}
$ mkdir {src,dist}
$ echo 'console.log("Hello World!");' > src/main.ts
$ cat src/main.ts
console.log("Hello World!");
$ ls -alR
./:
dist
src
tsconfig.json

./dist:

./src:
main.ts
$ tsc
$ ls -alR
./:
dist
src
tsconfig.json

./dist:
search.js

./src:
main.ts
$ cat dist/search.js
console.log("Hello World!");

A full settings and configuration can be seen on the offical typescriptlang docs or the more detailed configuration options.