04 - TypeScript: Configuration
Episode transcript for the podcast “Listen, Learn, and Code”. See podcast overview for more episodes and additional information.
Hello and welcome to “Listen, Learn, and Code” - the podcast where you can learn coding while doing something else, like cleaning your room, or watching cat videos.
In the previous episodes, we’ve already mentioned that TypeScript can be configured in certain aspects. So before we look at even more built-in types, let’s see how TypeScript configuration works. So, get ready, and let’s get started!
When using the online playground, you can open the configuration options by clicking on the “TS Config” tab above the editor field. Most of the settings are boolean true-or-false options represented by checkboxes. You will also see short explanations for each of the settings. If you need more information on a certain setting, you can look it up in the reference documentation that I’ve linked in the show notes.
When working with TypeScript on your machine, you can specify configuration settings in one of two ways. The first way is to provide command line parameters when you invoke the TypeScript compiler “tsc”. A more convenient way is to use a configuration file. To generate this configuration file, you can execute the following command:
This generates the file “tsconfig.json”. This file contains about one hundred configuration settings, together with short explanations on their meaning. Most of them are commented out, which means that TypeScript uses their default value. If you want to change one of these settings, you can simply remove the comment marker, and adapt the value. The JSON format itself doesn’t allow comments, but TypeScript makes a useful exception here.
Now let’s take a look at the most important configuration settings.
A nice thing about having a tsconfig file is that it makes compilation easier. In the previous episode, we compiled our “Hello World” program using the command
In most cases, your program will grow, and have more than just one source file. What you could do is list all your source files as arguments to the tsc command. So for example, if you have a source file named “hello.ts”, and another one named “foobar.ts”, you would invoke the command
tsc hello.ts foobar.ts
But of course, that will get tedious soon. If you have created a tsconfig file, all you have to do is execute
tsc without any arguments. The TypeScript compiler will then automatically search for all source files, and compile them.
Now you have your output files neatly together in a “dist” folder. What if you also want your TypeScript files together in their own “src” folder (which stands for “source”) next to this “dist” folder? You can create this folder and move the TypeScript files there, and the compiler will still find them. But if you look into your “dist” folder again, you will see that it now also contains an “src” folder, which doesn’t look very nice for a distribution. You can solve this by setting the configuration option “rootDir” to “src”.
The most important option that is contained in strict mode is “noImplicitAny”. To really understand this option, we have to know what the “any” type means, which we will cover in one of the next episodes. In a nutshell, the type checker basically ignores everything that has the “any” type, and doesn’t warn you if you do something wrong. And with this option, you can prevent that the “any” type is used implicitly in certain cases. So setting “noImplicitAny” to “true” is a good idea if you haven’t activated the “strict” option.
The second next important “strict” family member is the option “strictNullChecks”. When this option is turned on, TypeScript helps you to prevent NullPointerExceptions. We will see examples for this option when we take a closer look at the “null” type. If you prefer a more dangerous null pointer experience, like in Java for example, you have to leave this option disabled.
So to sum up what we did in this episode:
- We learned how to configure TypeScript both in the playground and on your local machine.
- We saw that the generated tsconfig.json file contains comments, even though they are not supported by the JSON format.
- And we learned about the following configuration settings:
- target - for the ECMAScript version
- rootDir - for adjusting the hierarchy inside the output folder
- strict - for activating 8 other options in the “strict” family
- noImplicitAny - for preventing the implicit use of the dangerous “any” type
- strictNullChecks - for preventing NullPointerExceptions
- and noEmitOnError - for disabling code generation in case of errors
And that’s all for now. I hope you enjoyed this episode, which conludes the first batch of episodes for this podcast. If you wish to hear more of this, be sure to subscribe the podcast and give it a like, or drop me a message. If there is enough demand, I’ll be happy to hear you next time on “Listen, Learn, and Code”.