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.
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.
- Create a new project, select
“other languages”and specify
“HTML Application with TypeScript”as the type of the application.
index.htmlwhen you press the run button.
"Show All Files".
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.
ATOM Text Editor:
After installation of Atom Text Editor, you should be able to perform the following steps:
- Navigate to the
“edit”tab and navigate to the
- 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.
- 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
“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.
After installation of Sublime Text, you need to perform the following steps:
- You can install the Sublime Text TypeScript plugging by navigating to
“Install Package”and select
- If you are working with VS2013 or VS2015, you will need to install an additional plugin to add TypeScript support. The plugin can be found at https://marketplace.visualstudio.com
- If you wish to learn more about VS Code and TypeScript, please refer to the VS Code documentation for TypeScript projects at https://code.visualstudio.com/docs/languages/typescript
- Please refer to https://atom.io/packages/atom-typescript to learn more about the available atom-typescript features.
- Please refer to https://github.com/Microsoft/Typescript-Sublime-plugin to learn more about the official Sublime Text TypeScript plugin.