Typescript: Understanding the Basics Part - I

Bhavik Bamania
Bhavik Bamania
 -  7 mins read

Typescript is one of the most commonly used language which empowers javascript to work more efficiently by filling the gaps which Javascript leaves behind in order to provide "too much flexibility to the lazy-clumsy Javascript developers.

Getting Started

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

“Nothing is perfect”, and this seems to be applicable to Javascript as well, our mighty Javascript, who can do any wonders and that’s whyTypescript came into the picture to fill the gaps that Javascript can’t fill by itself. It’s completely fine if you still haven’t got the idea what the heck I am talking about because now I have done enough of literature stuff and now in order to give you a better picture I should switch myself to the coding side from the literature side.

So, let’s begin with the what & why of Typescript before diving deep into this ocean!

What is Typescript

Typescript is a programming language and also a powerful tool, which allows us to write code in a much easier and cleaner way. It gives extra error checking to your Javascript code.

Typescript helps to write code in a nicer and optimized format for which you need to write plenty of code if you need to achieve Javascript.

Since it is built upon Javascript we can conclude it as a superset of Javascript which gives extra error checking your Javascript code.

However, there is one problem with Javascript and some of you might have realized that Typescript is a superset of javascript and if we talk about browser, well browser doesn’t understand any superset like Typescript, then the following question will be then how browser compiles the Typescript?

Well, readers, hold your horses, the answer lies in the question, ie., Typescript. Typescript is not only a powerful tool or a programming language but it is also a powerful compiler that compiles the Typescript code into Javascript that browsers understand.

Why Typescript?

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.

Typescript act as a guard to your javascript code and ensures a rich quality of your code.

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.

Getting Started with Typescript

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.

tsc app.ts

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

or simply,

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

tsc –init

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?

tsc -w

or

tsc --watch

Understanding the tsconfig in depth

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]
view raw syntax.text hosted with ❤ by GitHub

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

Exclude will be an array, which contains files and directories name which we want to exclude from the compilation. For example.

"exclude": ["app.ts"];

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.

"exclude": ["**/*.dev.ts"];

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.

Include

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.

"include": ["app.ts"];

Just like exclude we can use wildcards in include as well like this,

"include": ["**/*.dev.ts"];

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.

Conclusion

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!

I am here so that I can open the archives of my memory
I wish to deliver what I have received from mankind to mankind
I wish to light-up darkness to enlighten the hidden treasures,
And in that process, I am writing what I have found from mankind.
Made WithLove In India