Typescript: Understanding the Basics Part - I

Getting Started

“Necessity is the mother of all innovation.” This quote fits perfectly when we talk about Typescript. Confused? Let me clear the air and explain how Typescript relates to this quote.

“Nothing is perfect,” and this is true for Javascript as well. While Javascript is a powerful language that can do wonders, it has its limitations. Typescript came into the picture to fill these gaps. If you're still unsure what I'm talking about, don't worry. I've done enough literary work, and now it's time to switch from literature to coding.

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

What is Typescript?

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

Typescript helps you write code in a nicer and more optimized format, which would require plenty of code to achieve in Javascript.

Since it is built upon Javascript, we can conclude that it is a superset of Javascript, providing extra error checking for your Javascript code.

However, there is one problem with Javascript: the browser doesn't understand any superset like Typescript. So, how does the browser compile Typescript?

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

Why Typescript?

After understanding what Typescript is, we need to understand why we should use it.

The answer is simple: the idea behind using Typescript is to avoid the mistakes and errors we make in our code that lead to compilation or runtime errors.

Typescript acts as a guard for 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 interfaces, generics, and meta-programming features like decorators.

In summary, Typescript is a useful tool to ensure better coding standards with interesting features that help achieve better code quality with good readability and optimization.

Getting Started with Typescript

After some theory, it's time to get our hands dirty. Let's get started with Typescript.

Usually, if you're working with Typescript, you won’t need to set it up and configure its compiler because it will come with the library you're using, such as React.js, Angular, etc. However, to understand Typescript from its core, it's good to start from scratch.

So, if you're doing it from scratch, you need to do everything manually. Here’s how to do it:

sudo install -g typescript

This will install Typescript globally, and Typescript ships with its compiler.

Our job is half done here. Since we're working with Typescript from scratch, we need to configure the compiler as well.

As we know, browsers don’t understand Typescript, so we need a compiler that understands Typescript and compiles it into something the browser understands. Typescript ships with its compiler, so all we need to do is run it.

tsc app.ts

This command will compile the app.ts file of your project. To avoid hitting this command every time you make changes, you can run the compiler in watch mode like this:

tsc app.ts --watch

or simply,

tsc app.ts -w

This is fine when you're just tinkering with Typescript and working on demos. But in a real-world scenario, you'll need to use Typescript on the entire project, and you'll need to run the Typescript compiler on the entire project.

Typescript has a 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, this will be the root directory. To create this file, simply hit:

tsc –init

This command will create a tsconfig.json file containing all the configurations for the Typescript compiler. Once you hit this command, you'll get a file that looks something like this:

{
 "compilerOptions": {
   "target": "es6",
   "module": "commonjs",
   "strict": true,
   "esModuleInterop": true,
   "skipLibCheck": true,
   "forceConsistentCasingInFileNames": true
 },
 "include": [
   "src"
 ],
 "exclude": [
   "node_modules",
   "**/*.spec.ts"
 ]
}

This file is self-explanatory. However, we need to understand a few things in depth to get along well with Typescript. We will come to that later, but first, we need to run this compiler in watch mode.

tsc -w

or

tsc --watch

Understanding the tsconfig in Depth

Out of the many options in the compiler, two are important to know for day-to-day use. However, you will hardly need to change the tsconfig.json file. Just for good understanding, let's review some of the options in tsconfig.json.

Include and Exclude Files

As the name suggests, this option will list the files to include or exclude from being compiled. Let’s break this down.

By default, there is no include and exclude option, because it includes all the relevant files and excludes all the unwanted files or folders from being compiled.

Exclude

Exclude is an array containing files and directories you want to exclude from compilation. For example:

"exclude": ["app.ts"]

This will exclude the app.ts file from being compiled by the Typescript compiler.

You can use wildcards to exclude a set of files from being compiled.

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

This will exclude all files with .dev.ts in their names in any folder of the project.

Note: By default, node_modules are excluded from compilation. If you create an exclude array, you need to specify node_modules to exclude it from compilation.

Include

Include works exactly the opposite of exclude. If you create an include key in the config file, you need to add all the files and folders you want to compile.

"include": ["app.ts"]

You can use wildcards in include as well:

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

Note: If you set both include and exclude and in include you have the root folder and its subfolders in exclude, then include will exclude all the subfolders of the included folder. In other words:

Compile = include - exclude

If you wish to compile all the files of the project, don’t set include and exclude.

Just like include and exclude, there is another key called “files,” which allows you to include files but not folders.

Stop Emitting Files on Compilation Error

By default, Typescript emits files on a compilation error to serve its purpose. If you wish to stop emitting files on a compilation error, you can set “noEmitOnError” to false.

By default, it is set to true, allowing the creation of a JS file regardless of compilation errors in the TS file.

Tip: Don’t toggle this option, otherwise, just think about the purpose of using Typescript.

For more options, refer to the official docs.

Conclusion

Let’s take a break from learning. In the next part, we will do some really interesting things in Typescript with hands-on demos. Meanwhile, let’s quickly revise what we have learned here.

• Typescript adds types and allows the use of next-gen JS features, which are later compiled into JS, similar to Babel.
• It adds non-JS features like Interfaces and Generics for better code standards and error-free code.
• Supports meta-programming features like Decorators.
• Rich config options allow customizing TS as per your needs.
• How to set up a Typescript project from scratch with a tsconfig.json file.
• Some important options in tsconfig.json.

Have a great time, and see you next time!