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
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
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.