As you might know, Cloud9 IDE uses Ace for its online code editor. Recently, we built a tool for Ace that transforms tmlanguage files into a construct that Ace can use. In fact, Ace’s syntax highlighting rules were modeled very heavily on TextMate’s original grammar. You can find out more about using this tool on Ace’s How-to Guide. Microsoft provided a tmlanguage specifically for its new Typescript language, so converting it was easy as cake.
npm install typescript. This downloads the NPM package, and places the
tsc command at your disposal.
Voila! Cloud9 now supports Typescript.
If you want to try out some example code yourself, log into c9.io and then click here to clone the Typescript repo into your Cloud9 account (yes, you must be logged in or the link won’t work!). Alternatively, you can clone the following GitHub URL into a new workspace manually, from your Cloud9 dashboard:
When it’s finished cloning, click Start Editing. When the workspace loads up, go to the console input area at the bottom and run the following commands:
npm install typescript -g --force
(Normally, you don’t need the
--force tag, but since we’re actually within the Typescript module, we need it here so that npm does not complain.)
After expanding the samples/todomvc/js folder, you’ll see the compiled todos.js file. If you want to test the “todomvc” app , open todomvc/index.html and click the Preview button at the top of the IDE. The static assets in the demo .html files are not https-based, so your browser will balk with some errors (we run c9.io over https). Those .html files can be updated with a quick search-and-replace.
Up and running with Typescript in just a few minutes? We think that’s awesome.