Configuration in TypeScript

[00:00 - 00:05] So far we have been compiling our TypeScript files individually. Don't you think it's annoying?

[00:06 - 00:10] Compiling your file every time you want to see changes? I think it is.

[00:11 - 00:22] That is the reason TypeScript has introduced the watch mode. Whenever you're running the DSS script, append the dash-dash-watch or just dash w to the command.

[00:23 - 00:29] It will keep a watch on changes and will compile it in real time. Let's try it with the functions.ts file.

[00:30 - 01:00] Open another terminal and type TSC functions.ts-watch and press enter. You see the watch mode is running and now if you make any changes to the file, let's console.log hello world.

[01:01 - 01:08] It has recompiled for us. If you now look at the functions.js file, we see the console.log file.

[01:09 - 01:17] Well, it works well if you have only one TypeScript file. What if you have more than one?

[01:18 - 01:24] We do have many TypeScript files here, but we are using just one in our index. html file.

[01:25 - 01:30] Let's consider we want all our files to be compiled at a single command. So what do we do?

[01:31 - 01:41] 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.

[01:42 - 01:53] So that will have to initialize the project using the command TSC- in it. Alright, let's come out of this watch mode and let's close this server.

[01:54 - 02:02] Make sure you're in the desired project before you make this command. Where you run this command, the entire project will become TypeScript project.

[02:03 - 02:05] But how? Let's run this command.

[02:06 - 02:13] TSC-net. And as you see, it has made a TS-config.json file.

[02:14 - 02:23] If you 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.

[02:24 - 02:39] But the point is where this file is located, the entire directory and sub directory will be considered as TypeScript project. And now we can run just the TSC command in the terminal and it will compile all the files in this project.

[02:40 - 02:50] All the files which have the extension of .ts. You can also combine the TSC command with watch mode, which will keep on looking for changes in the entire project.

[02:51 - 02:55] Let's do one thing. Let's delete all the JavaScript files to see if it works.

[02:56 - 03:06] I will append the watch mode with TSC-in. To see if our setup is ready.

[03:07 - 03:21] As you see, all the JavaScript files have been compiled back to JavaScript and our watch mode is running as well. It gives us some errors, but that's not the point.

[03:22 - 03:31] The point is with one single command, we can compile all the files. Now let's talk about the .ts.config.json file.

[03:32 - 03:42] This basically instructs TypeScript what to do, how to compile, what to check and so on. If you look at the file, we have the compiler options.

[03:43 - 03:58] But we can also shape it the way we want. For example, we can have an exclude property and inside this array we can mention the files which we don't want to compile or we want TypeScript to ignore.

[03:59 - 04:15] I can create a new file and let's call it ignore.ps. And I can write console log inside the file.

[04:16 - 04:46] And we can write the files named inside the excluded array which is ignore.ps. If I run this script again, you see we don't see ignore.js file because Type Script has ignored it.

[04:47 - 04:53] You can also use wildcards. You are also writing tests and you don't want to compile the test files.

[04:54 - 05:07] So what you can do is simply write star which is a wildcard.test.js. It will ignore all the files that end with test.ts.

[05:08 - 05:15] Let's take that off. One thing which usually should be excluded from compilation is node modules.

[05:16 - 05:26] But you don't have to include node modules in the exclude script because that is already ignored by default. Now that you know about exclude, we have another option to include.

[05:27 - 05:34] It does the exact opposite of the exclude property. It takes files which you want to include in the compilation process.

[05:35 - 05:58] If you include app.ts file here and let's delete again all the JavaScript files . I have deleted all the JavaScript files and now if I run the tsc command again, you will notice that only the app.js file has been compiled.

[05:59 - 06:11] Another property is the files which is almost like include. The only difference is that include property can contain folders as well.

[06:12 - 06:22] Which means you can mention a folder and TypeScript will include everything inside that folder. But with files, you can only mention the file names, not the folder name.

[06:23 - 06:29] We will stick with include for now. Let's talk about the compiler options now.

[06:30 - 06:36] It basically defines how the file is going to be compiled. We see a lot of options being commented out.

[06:37 - 06:43] All of them have a comment which tells what that particular feature does. We don't have to know all of these features.

[06:44 - 06:51] You will do perfectly fine without knowing many of these. We will be discussing the features we really care about and which are the most common ones.

[06:52 - 07:03] On top, we have the target which is basically to which JavaScript version we want to compile our code. You are free to change it to ESX or any other latest one.

[07:04 - 07:13] Also, TypeScript is not just compiling TypeScript to JavaScript. It also can compile to a previous JavaScript version which is understood by all of the browsers.

[07:14 - 07:32] For example, if you are using error functions and you choose a target to be ES5 , the error function will be compiled to a normal function. If you are using any other tool which takes care of compilation of JavaScript, you can keep target to the latest one which will reduce the work of TypeScript.

[07:33 - 07:39] Again, it's a preference. I want it to be ES5 so this is what the target does.

[07:40 - 07:49] Let's talk about the lab option first. This makes the JavaScript APIs available for TypeScript like the document environment or console.

[07:50 - 08:01] This is the reason we can use console log in TypeScript or locating an element using document. You must be wondering it's not even activated then how is everything available?

[08:02 - 08:07] Good question. When it's commented out, there are some properties which are available by default.

[08:08 - 08:19] Let's remove the slashes and now it's active. If we go back to app.ts file, you see console gives us an error.

[08:20 - 08:27] If we hover over it, it says "cannot find name console". Do you need to change your target library?

[08:28 - 08:36] Try changing the lip compiler options to include DOM. When it was commented out, the option DOM was available by default.

[08:37 - 08:55] But now that we made it active, it's just an empty array. By default, the lip has DOM, DOM.iterable, ES6 and script rules.

[08:56 - 09:00] We can just let them be here or comment it out. It's just the same thing.

[09:01 - 09:09] And also if we see the error is gone. A logjs property if true will compile the JavaScript files as well.

[09:10 - 09:14] Checkjs property won't compile it. It will just check the syntax.

[09:15 - 09:21] If there is something wrong, it will show an error. JSX is useful for React because it uses JSX.

[09:22 - 09:29] So it basically compiles the JSX syntax. SourceMap basically helps you debug your code.

[09:30 - 09:44] The JavaScript code inside the browser only shows you the JavaScript code inside the browser. If you turn the source map to true, it creates a TypeScript map file inside the folder, which works as a bridge between the TypeScript code and the browser.

[09:45 - 09:56] And you are able to see the TypeScript files inside the browser, which helps you debug your code in more efficient way. After SourceMap, let's talk about "outer" and "rooter".

[09:57 - 10:10] In a real world project, we don't have files laying around the root directory like this. We have a SRC folder where we have our TypeScript files and our "test" folder, which contains our compiled JavaScript files.

[10:11 - 10:18] This gives us an opportunity to do the cleanup. Let's delete all files except app.ts first.

[10:19 - 10:37] Let's remove the comment and mention the "test" directory here. Now, if we run the TSC command, you see it has made a "test" folder inside the root directory, which contains our compiled app.js file.

[10:38 - 11:00] Root directory, on the other hand, looks for the specific directory where we want to store our TypeScript files. If we create a new folder, SRC here, and put the app.ts file inside it, and mention the same inside the root directory.

[11:01 - 11:18] Let's remove the comment and add the SRC folder here. Let's delete the "test" directory and run the TSC command again.

[11:19 - 11:27] You see it has created a "test" folder again with the app.js file. This, I feel, is a more structured way to keep our code.

[11:28 - 11:40] So let's keep it that way. Even after we have mentioned the SRC folder inside the root directory, include and exclude options will work the same way they're supposed to.

[11:41 - 11:49] So don't worry about it. The remove comments option, if true, will not compile the comments you put on the TypeScript file.

[11:50 - 12:02] The no-emit option, if turned to true, will not make an output file. You can turn it on if you just want to check the code for compilation errors and are not ready to make an output file yet.

[12:03 - 12:21] There is another important compiler option which is not mentioned here, which is called "no-emit on error". Usually when you run the TSC command, even if you have an error which we did, the files are compiled to JavaScript anyways.

[12:22 - 12:40] If you want to stop this behavior and you want to create compiled output files only when the code is error-free, you can turn this option to true. Even if you have an error in one file and rest 100 files are perfectly fine, even in that case no file will create an output file.

[12:41 - 12:46] If you are a fan of error-free code, you can just turn it on. So these were the basic options.

[12:47 - 12:51] Now let's talk about the strict type checking options. By default it's set to true.

[12:52 - 13:03] In this mode it enables all strict type checking options mentioned below. If you want to activate some of these options, you can change strict to false and selectively enable what you want.

[13:04 - 13:14] Let's talk about no implicit any option first. If it's true, which is now, it will report us where the implicit type is any and we haven't mentioned it.

[13:15 - 13:34] For example, if we go to app.ts file and remove the number type, it will report that to us by giving us an error, which says parameter R2 implicitly has any type. So this is what this option does.

[13:35 - 13:45] It reports us that we haven't defined the type and it is implicitly any type. Now let's revert the changes and go back to tskconfig.json file.

[13:46 - 13:55] Now, strict null checks property will check if the value is null. If the TypeScript feels the value might be null, it won't let you use it anywhere else.

[13:56 - 14:05] You can suffix an exclamation mark to get away with the error or put it inside the fl's block. But it's still up to you, it's your preference.

[14:06 - 14:16] Strict bind call apply checks on which function you're calling bind call or apply method. And it strictly checks if what you're setting actually makes sense.

[14:17 - 14:31] If you use bind call apply methods quite often, you can turn it to true. The always strict mode has the responsibility to make sure the compiled JavaScript files are using strict mode.

[14:32 - 14:49] Additional checks are just checking the cleanliness of your code. They check if you're using all the variables you have declared in a local scope , all the parameters you have passed to a function and you're not implicitly returning anything, which means your function must be consistent about its returns.

[14:50 - 14:58] There are scenarios where you create an if else block and return something only when the condition matches. Otherwise you return nothing.

[14:59 - 15:06] No implicit returns property checks for that. Well, these are the options which we are going to use 99% of the times.

[15:07 - 15:12] Hence, I have not discussed everything here. We can look at some options when they come along.