This video is available to students only

Configuration in TypeScript

In this lesson, we're going to learn how to configure your TypeScript project

So far, we have been compiling our ts files individually. Don't you think it's annoying? Compiling your file every time you want to see changes? I think it is. That is the reason TypeScript has introduced the watch mode. Whenever you're running the tsc script, append --watch or just -w to the command. It will keep a watch on changes and will compile it in real time.

Let's try it with the functions.ts file. Open the terminal and type:

You see, the watch mode is running and now if you make any changes to the file, for example, let's console log hello world, it has recompiled it for us. If we now look at the functions.js file, we see that console log part.

Well, it works well if you have only one TypeScript file in your project. What if you have more than one? We do have many TypeScript files here, but we're using just one in our index.html file. Let's consider that we want all our files to be compiled at a single command. What do we do?

Well, luckily it's possible. What we want to tell TypeScript is that all the files in this particular folder is a single project and I want to work on all of them. For that, we'll have to initialize the project once using the command:

Make sure you're in the desired project before you make this command. Wherever you run this command, the entire project will become a TypeScript project. But how? Let's run this command, and as you can see, it has made a tsconfig.json file. If we look inside the file, we have the compiler options and lots of commented out options. We'll talk about the file in depth so don't worry, but the point is; where this file is located, the entire directory and subdirectory will be considered as a TypeScript project. And now, we can just run the tsc command in the terminal and it will compile all the files in this project which have the extension of dot ts. You can also combine the tsc command with watch mode which will keep on looking for changes in the entire project. Let's delete all the JavaScript files to see if it works. I will append the watch command with tsc to see if our setup is ready.

As you can see, all the JavaScript files have been compiled back to JavaScript and our watch mode is running as well.

Now let's talk about the config.json. This basically instructs TypeScript what to do, how to compile, what to check etc etc. If we look at the file, we see the compiler options, but we can also shape it the way we want. For example, we have an exclude property. Inside the array, we can mention the files which we don't want to compile or which we want TypeScript to ignore. I can create a new file, ignore.ts, and write console.log inside which prints, "I am being ignored", and mention the file name inside the exclude array. If I run the script, tsc -w, we don't see ignore.js file because TypeScript has ignored it. Also, if you want to ignore a specific extension, you can also use wildcards. For example, you're writing tests, and you don't want to compile the test files, you can simply write *.test.ts. It will ignore all the files that end with test.ts.

One thing which usually should be excluded from compilation is node_modules, but you don't have to include node_modules in the exclude script because that is already ignored by default.

Start a new discussion. All notification go to the author.