In this post i will be walking through the process of setting up TypeScript on jetBrains WebStorm IDE.
Step 2. If you haven’t already, download and install the WebStorm IDE from the Jet Brains website
Step 3. Open Webstorm and select File > new project
Select HTML5 Boilerplate, this give us a nice versitile starting project structure.
Create a folder inside the js folder to contain your TypeScript files. I have named mine ‘scripts’ .
Then right click on your folder and create your first TypeScript file by right clicking and selecting New > TypeScript File
Name your file what ever you like, but give it the extension .ts, I have named mine main.ts
If this is your first time using Webstorm on your computer, it will likely give you a prompt about file watchers.
Click the ‘Add watcher’ link, and you should see the following panel open. Click on the ‘…’ button circled in red.
Navigate to your TypeScript SDK
The path is indicated in the image below, however it might vary depening if your OS is 32 or 64 bit.
To run a quick test, open the main.ts file you creates and type
Save the file and you will notice that there is a drop down available on your main.ts file in the explorer panel. Click it and you will see that a js file has been compiled based on your TypeScript file. Pretty cool
You must import the main.js file into your index.html file (before closing </body> tag is good). DO NOT import the .ts file as this will not work
Time to run it and see what happens.
Right click the index.html file in your explorer and select ‘Open in Browser’
If all goes well you should a “hello world” popup box
Stay tuned for more posts on TypeScript…