How to Create Your First tsconfig.json

One way would be to manually go ahead and create tsconfig.json like we did last time in the Getting Started with Typescript tutorial. However, since Typescript comes loaded with features why not exploit them?

We are going to see how to create your first tsconfig.json in this tutorial by using the npx tsc –init. With the available compiler script, we get tons of other options. But there are some that come by default, we are going to keep them as is, and add two more.

That being said, let’s proceed.

How to Create and Update Your First tsconfig.json

You can initialize the tsconfig with the most basic settings using the following command:

npx tsc --init

Type the above and press enter, of course, you will have to first delete your existing tsconfig.json to do that.

A new tsconfig.json will be created with some of the basic settings like:

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

When you open the file, you will also notice that there are tons of other commented configurations ready to be configured based on your project requirements.

You will also notice because of the presence of this tsconfig.json the error of block-scoped variable has disappeared.

Let’s get rid of all the comments to keep things simpler and clean:

Now if you are working on a project, you don’t want the .js compiled files that you would barely open, to just hang around on the explorer and look messy. You can have two separate folders for the same instead.

1. src
2. build

NOTE: Creating the build folder is not necessary, if you are going to use the compilerOptions -> outDir to define the output build strategy. But for the sake of understanding let’s create two folders.

Call them whatever you want, I am simply using the standards – src is the place where our main code would be. build would be the place to store all the compiled Javascript files.

Move your testing.ts to the src folder.

Now update your tsconfig.json file by adding the following inside the braces:

"include": ["src"],

Now let’s add the logic to always compile our js files into the build folder. Add another line your existing compilerOptions:

"outDir": "./build"

The above will enforce the logic to always use ./build as the compiled js files’ output directory.
NOTE: Here ‘./’ insinuates your root directory.

Now delete the existing testing.js so that we can see the above logic we placed in action.

Time to run the program once again.

Since we have moved the original testing.ts to the src folder, in order to run your actual script you just have to type tsc and press enter:

tsc

Press enter

Typing the above and pressing enter will now ensure your transpiled code always ends up in the build folder.

You can delete the build folder, and rerun and see how it creates the build folder as well as adds the compiled or transpiled .js file there.

There you have it! The basics of how to get started with the tsconfig.json file.

Let me know if you liked the How to Create your First tsconfig.json tutorial in the comments section. For more learning, visit Dumb It Dude.