Typescript: Understanding the Basics Part - I
“Necessity is the mother of all innovation”, this quote fits best when we take about Typescript, got confused? OK, allow me to clear the air of mystery, and let me tell you how Typescript can relate to the above quote.
So, let’s begin with the what & why of Typescript before diving deep into this ocean!
After a good understanding of what is typescript? We need to understand why we need to use Typescript.
The answer is pretty simple since the idea behind using typescript is to avoid the mistakes and errors which we make in our code that leads to compilation error or runtime error.
Along with its powerful error handling Typescript also provides many interesting features such as interface, generics, and meta-programming features like decorators.
In words, we can conclude that Typescript is a pretty useful tool to ensure better coding standards with some pretty interesting features which ultimately helps to achieve better code quality with good readability and optimization.
After a good few minutes of theory, it’s time to get our hands into work and we can now get started with Typescript.
Well, mostly if you are working with Typescript you won’t need to set up typescript and its compiler because it will ship with the library you are working with, for example, Reactjs, Angular or etc. But in order to understand typescript from its core. I feel it’s good to start it from scratch.
So, if you doing it from scratch then you need to do all the things manually and that’s what we are going to do now.
sudo install -g typescript
This will install the typescript globally, typescript ships with its compiler.
There is one very important thing to note here is that our job is half done here since we are working with typescript from scratch and setting our environment we need to configure the compiler as well.
As we know, our browser doesn’t understand typescript therefore we need a compiler that understands the typescript well and compiles it into something which the browser understands. We are also aware of the fact that typescript ships with its compiler so now all we need is to run it.
This command will compile the app.ts file of your project. In order to avoid hitting this command every time when you make any changes you run the compiler with watch mode like this
tsc app.ts --watch
tsc app.ts -w
Well, this looks good when you just tickling with typescript and working with demos but in a real-world scenario, you will have to use typescript probably on the entire project, and you will need to run the typescript compiler on the entire project.
Well, you don’t need to worry about that as typescript has the solution for this problem as well.
To compile the entire project you need to initialize a tsconfig.json file in the directory where you want to compile all the .ts files, ideally, it will be the root directory. To create this file all you need is to hit
This command will create a tsconfig.json file which will contain all the configurations for the typescript compiler. Once you hit this command you will get a file something like this one.
This file is very self-explanatory however, we need to know a few things in deep in order to get along well with typescript. We will come to it later but first, we need to run this compiler with a watch isn’t it?
Out of hell lot of options given in the compiler two options, I found important to know on day-to-day bases. However, you will hardly be required to make any changes in the tsconfig.json file but just for good understanding and knowledge purposes let’s understand some of the options of tsconfig.json.
Include and Exclude Files
Well the name itself suggests that this option will contain the list of files that we need to include or exclude from being compiled. Let’s break this into pieces and understand it one by one.
|<operation> [n]> /dev/null [options]|
IMP: By default, there is no such option mentioned as include and exclude, because it has included all the relevant files that we need to compile and excludes all the unwanted files or folders which we need to exclude from getting compiled.
Exclude will be an array, which contains files and directories name which we want to exclude from the compilation. For example.
This will exclude the app.ts file from being compiled by the typescript compiler.
Just like any other config file, we can use wildcards as well to exclude a set of files from being compiled.
This will exclude all the files with such names in any of the folders in the project.
IMP: By default, node_modules are excluded from compilation but if we are explicitly creating exclude array then we need to specify node_modules to exclude it from being compiled.
In words, include will work exactly opposite of exclude, which means if you are creating an include key in the config file you need to add all the files and folders that you want to compile.
Just like exclude we can use wildcards in include as well like this,
IMP: If we have set both include and exclude and in include, we have the root folder and its subfolders in exclude then include will exclude all the subfolders of the included folder. we can equate this word riddle like this
Compile = include - exclude
If you wish to compile entire files of the project then don’t set include and exclude.
Just like include and exclude, there is one more key called “files”, which will allow you to include the files and not the folders.
Stop Emitting files on Compilation error
By default, typescript emits files on a compilation error in order to serve its purpose however, if we wish to stop emitting files on a compilation error then we can set “noEmitOnError” to false.
By default, it is set to true. It will allow us to create a JS file regardless of the fact that there might be some error in the compilation of the ts file.
Tip: Don’t toggle this option otherwise just think for a while about what is the purpose of using typescript.
There are many other options for more refer to the official docs.
I think we can have a break here from learning and in the next part, we will do some really interesting things in typescript. A real hands-on with lots of demos. Till the time we can do a quick revision about the things we have understood here.
- Typescript adds types, we can use next-gen JS features in TS and will be compiled into JS later, just like Babel.
- It adds non-JS features like Interface or Generics (for better code standard and error feature code).
- Supports meta-programming features like Decorators.
- Rich config options we can configure TS as per our need.
- How to set up a typescript project from basic with and tsconfig.json file
- Some of the important options in the tsconfig.json.
Have a great time, cya next time!