TypeScript Tutorial: IDE (Chapter 2)

A TypeScript Tutorial for beginners on TypeScript

Integrated Development Environment

We will be setting up an IDE in this post for TypeScript. Yes, you got me right … an Integrated Development Environment. We will be using this IDE during the span of course “Beginning with TypeScript Tutorial“. For me an IDE comprises of below parts mainly:

  • An Editor: where you can write the code and format it so that it can be easily readable by a human eye.
  • Some Intellisense: When you start writing a code, if you can see what you are doing or tend to do, it is a great help for you as compare to just be able to read it. Intellisense provide strengths to your IDE, so that it can help you write a better and accurate code.
  • Compiler: So you are done with your code and now you should be able to convert that into something, which can be executed in its environment. A compiler does that. (As TypeScript is a language, which requires to be compiled into JavaScript, so we need a compiler here.)

Let’s Go Shopping

When we go out for shopping, we try to go to one place where, we can get all what we need in a single stop. But, it is not always true. In some cases you would want to step out and find things at different places, whatever reason you may have. For us the reason is … We want all that comes free. During the course Beginning with TypeScript Tutorial, we will be trying to use whatever comes free. (macs are not cheaper, which I am going to use during this tutorial, but rest assured that all this can be done in a Windows PC too.) Here is our shopping list.

  1. Atom Editor: I am going to use Atom Editor from GitHub. You can argue or whatever you want, but that’s the editor of my choice as compared to Visual Studio Code. I am not doing a product comparison here. But, if you think that you can find the remaining ingredients to match the recipe, you are free to use whatever you like. (Of course you are welcome to discuss the pros and cons below in the comments.). Here are the extensions you will require, if you opt for Atom Editor.
    • atom-typescript: This extension transforms the Atom Editor into a full blown IDE for typescript. Once you have that extension, you may not require any other extension at all for TypeScript at least. (disclaimer: depends on the individual requirements too.). This extension may install another extension named linter, in case you already don’t have that for some other reasons.
    • script: This is simple extension, which help you to execute the code from within the editor. We will need this to test our compiled JavaScripts.
  2. NodeJS: This is a JavaScript runtime engine, where you can run your JavaScript code.

On the Cooking Table

  1. Download and install the Atom Editor of your operating system from the link provided above in the list.
  2. Open Atom and got to preferences. You should see something like this:
  3. Navigate to Install tab from the left panel and search and install atom-typescript and script packages. Once you install, Atom may prompt you to restart. After this process you should see the installed packages something like this:
  4. Your Editor is ready.
  5. Now you are required to install nodejs. Please download and install the application from the link provided in the list above.
  6. You are all done and ready to cook.

Let’s Test the Environment

We are almost ready with all the things. As the last step before we start on the course “Beginning with TypeScript Tutorial” and do some real work, let’s just check our environment.

  1. Create a folder named testing on you computer and drag-drop that folder in the editor. This should show a tree view on the left side of the editor listing the folder there.
  2. Right Click the folder and select New File from the menu. This will prompt you to provide a file name. I have given name as testing.ts. The file should be opened in the editor. Here is how your edit should look like:

    Notice the TypeScript pane at the bottom of the editor and a message in there saying “no tsconfig.json”. That’s your cue to add a tsconfig.json to your folder.
  3. Press Shift + Command + P, which should bring you a command palette. Here you can start typing tscongif.js and select the item Create Tsconfig.json Project File.

    A new file will be created in the folder. Just leave that file as it is.
  4. Now in testing.ts enter the text console.log("Hello World!") and save it. As soon as you save the file, you should see a new file created in the left navigation, named testing.js. This confirms that all the required things are installed properly and working as expected and TypeScript is getting compiled into JavaScript.
  5. Right click the newly created file and select Split Right to open the file and observe the contents. Here is your output.

Moving Ahead …

We have all the prerequisites the course Beginning with TypeScript Tutorial and ready to dive. I will conclude this post here with more to come in the next post. We will be learning about type in the TypeScript in the next chapter.

In case you have any questions, please leave your comments below. I will be really happy to answer them as soon as possible. I hope you liked the contents here and in my previous course on AngularJS with ASP.Net MVC.

Your feedback is important to me as it will improve the contents in my upcoming posts. Have a nice day … Cheers!

Go to Beginning with TypeScript Tutorial Index page.

Published by

Anant Anand Gupta

Microsoft Technology Professional

Leave a Reply