October 23, 2016 javascript Typescript 0

You might be just starting out in the mysterious world of TypeScript, and you are wondering what the heck should I do with this? Where to start with TypeScript? How do I compile it to Javascript code that browsers can actually understand?

typescript-2-0-awesomeness-image

Just like you, I was once a beginner with TypeScript, and  I know very well how it feels to have no idea what the next steps are. In this short tutorial I’ll show you how to get started with TypeScript, and we’ll be using Koala as a compiler. Don’t worry, Koala is not another complicated piece of software, you simply download it just like any other program, click on the icon in your desktop and it will be running, presenting you a nice interface to manage all your automated compiling tasks  for most popular pre-processors such as SASS, LESS, CoffeeScript, and now TypeScript.

Koala comes with 6 pre-installed features:

  • LESS Sass
  • Compass
  • CoffeeScriptbg-koala
  • JavaScript
  • CSS

Now, we’ll be adding the7th feature, which is TypeScript.

Here are the steps to follow, please note that at installation you’ll be prompted with an error message, but don’t worry I’ve got the solution for this right belw, where you’ll have to replace some code and delete a line of code. You’ll see these actions below in my tutorial. At the end of the day, we are web developers, and we can sort out any errors and problems, don’t we? 🙂

Here are the steps to get started with TypeScript and Koala:

  • Install Koala
  • Install Node.js
  • Open up your terminal in the default folder (cd /)
  • Type in your terminal: npm install -g typescript
  • Open up Koala
  • Click on the settings icon in Koala
  • Select the Advanced tab
  • Click on the Browse extensions tab, it will take you to the folder where we’ll be copy-pasting the 3 files that will make Koala compile the TypeScript into JavaScript
  • Create a new folder here called TypeScript
  • Copy and paste the 3 files from here into the newly created folder (TypeScript folder)
  • Open up the TypeScriptCompiler.js file in your favourite code editor
  • You will see the code:
  • var fs = require(‘fs-extra’)
    , path = require(‘path’)
    , util = require(‘../util.js’)
    , FileManager = global.getFileManager()
    , Compiler = require(FileManager.appScriptsDir + ‘/Compiler.js’);
  • Replace it with:
  •  var FileManager = global.getFileManager()
    , path = require(‘path’)
    , fs = require(FileManager.appRootDir + ‘/node_modules/fs-extra’)
    , util = require(FileManager.appScriptsDir + ‘/util.js’)
    , Compiler = require(FileManager.appScriptsDir + ‘/Compiler.js’);
  • Search and remove this line: argv.push(‘–compile’); 
  • Save the js file
  • Restart Koala
  • And you’re ready to go with Koala and TypeScript
  • Make sure you add the relevant extension to your code editor that supports TypeScript language, for example I had to add the TypeScript Brackets extension to my Brackets code editor.
  • To see it in action, go to any folder/directory and create 2 files: script.ts, and script.js
  • Open up Koala, and click on the big PLUS (+) sign to add a new folder to be watched
  • Select the folder where you saved the script.ts and script.js file
  • Koala will detect the scripts and will add the  to the right side of the Koala window
  • Click on the script.ts on the right side, a sidebar will appear
  • Select the Autocompile option – this way, Koala will automatically compile your ts file into the js file when you save the ts file
  • To test it, open up your script.ts file and add a piece of code to it ( you can copy/paste from the playground)
  • When you save the script.ts file, you should see the compiled JavaScript code in the script.js file

I hope this helps with quickly setting up Koala for compiling TypeScript intio JavaScript, and if you have any issues with the installation, feel free to leave a comment below and I’ll help you as much as I can. Happy TypeScripting!