1.15. TypeScript development using various IDEs

There are various IDEs you can use for TypeScript development but we are going to learn only about the followings:

  • Microsoft Visual Studio 2017 provides inbuilt TypeScript support but for earlier versions, you require few additional tools.
  • Microsoft Visual Studio Code is a light weight version of visual studio that can be used on Windows, OSX and Linux.
  • Atom is an editor written with web technologies. The best thing about atom is that it is highly customizable and extendible and there is a really large list of available plugins for it including a TypeScript plugin.
  • Sublime Text is a popular editor. Microsoft has developed and released an open source TypeScript plugin for it also.

Getting ready

If you are using earlier version of visual studio, you need to download few extra packages that can be found at http://vswebessentials.com/download.
If you are using Visual Studio Code download its installer from https://code.visualstudio.com/
If you are using Atom text editor Please visit https://github.com/atom/atom/releases/ to download the latest version of Atom.
If you are using Sublime Text editor, please visit http://www.sublimetext.com/ to download the latest version of the Sublime Text editor.

How to do it…

Now, we are going to learn how to do the TypeScript development environment setup and create a TypeScript app in above IDEs.

Visual Studio 2017 (or VS2015 / VS2013):
After installation of Visual Studio and Web Essentials (if applicable) you should be able to perform following tasks.

  1. Create a new project, select “typescript” in “other languages” and specify “HTML Application with TypeScript” as the type of the application.
  2. Visual Studio will then create a local web server, compile the TypeScript file to JavaScript and load the index.html when you press the run button.
  3. If you want to see the generated JavaScript file in the project explorer, you will need to select the project explorer and click the button that says, "Show All Files".

Fig.2

Visual Studio Code:
Visual Studio Code comes with very good support for TypeScript and requires zero configuration. The main difference between Visual Studio 2017 and Visual Studio Code is that because VS Code was designed to work on OSX and Linux some of the tasks like creating a new project must be done using a command line interface. You can learn more about the command line interface at https://github.com/Microsoft/vscode-generator-code.

Fig.3

ATOM Text Editor:
After installation of Atom Text Editor, you should be able to perform the following steps:

  1. Navigate to the “edit” tab and navigate to the “preferences” page.
  2. In the preference screen, you should be able to find a section called “packages”. Navigate to the packages page and search for a package named atom-typescript to install it.
  3. You can also install atom packages from the command line interface using the following command:
    $ apm install atom-typescript
    

    The atom-typescript plugin includes many useful features that you can access by navigating to “View” and selecting “toggle command palate”. You will then be able to type a command. All the typescript commands start with “typescript” and the command editor has auto-complete features so you should be able to find the command that you are trying to find with ease.

Fig.4

Sublime Text:
After installation of Sublime Text, you need to perform the following steps:

  1. You can install the Sublime Text TypeScript plugging by navigating to “Package Control”, “Install Package” and select “TypeScript”.

    The plugin has some very important features like build system to compile TypeScript into JavaScript and code completion options support.

  2. Once you have the plugin installed, create folder and open it in Sublime. Create a new TypeScript file and press Ctrl+B to see the resulting JavaScript in the output window.

Fig.5

See also


Shiv Kushwaha

Author/Programmer