Cloud9 IDE - Online IDE

Show all articles

Typescript Support in Cloud9

By | 20 Comments

Yesterday, Microsoft announced Typescript, a new language designed to help avoid pitfalls associated with scaling JavaScript codebases. There’s already been a lot of talk about Typescript. The influence of its creator, Anders Hejlsberg — the mastermind behind such languages as Delphi and C# — highlights its significance even more.

At Cloud9, we’re not interested in getting involved with debates on Typescript, JavaScript, Coffeescript, or any other language. We only want to help you write better code. Our motto is “Make code, not war.” To that end, we’re happy to announce support for Typescript as of today. How were we able to do it so quickly?


Syntax Highlighting

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.



Next, we needed a way to compile Typescript into Javascript. This, too, is easily achieved by installing the “typescript” NPM package. Cloud9 comes with built-in NPM support, so all you have to do is go to the console at the bottom of the IDE and type 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 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 dashboardgit://

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:

  1. npm install typescript -g --force
  2. tsc samples/todomvc/js/todos.ts

(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.)

Preview Results

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 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.





* Required fields

  1. Paul says:

    Can we code dart as of yet? Your message seems to state that you are interested in it…

    I know I’d appreciate it and hopefully lots of others, thanks.

  2. Alex says:

    maybe support jade syntax highlighting as well, there are textmate bundles for jade too

    would be really useful :)

    • Matt Pardee says:

      We have support for Jade in ACE (Garen also converted that) but it will just be another update to to get the file extension recognized. Soon!

  3. Anon says:

    While it’s great that you support syntax highlighting so fast, real support would require using type information as shown by Microsoft in VS2012, imho. This would be Rallye great!

  4. kenjiru says:

    TypeScript is better than JavaScript because of the static type support. This in turn helps in detecting all kinds or mistakes and enables more advanced code refactoring. It would be nice if C9 editor would build on these features and go past syntax highlighting.

  5. Joe says:

    Echo the same comments – would be great if you could feed this info into your code completion logic. This would make C9 a real contender for me, as it would help author projects that really scale. Also, I could code on my iPad and (next week) my Surface !

  6. Holly says:

    Apprecaited this!

  7. David says:

    Watching this closely to see if someone implements code hinting/completing. Garen’s extension is very nice for validating. If the code completion gets in I am going to upgrade and use this for all my work.

  8. Pinal Bhatt says:

    Really Appreciate this!

  9. Basarat says:

    Just want to say thank you for such an awesome feature

  10. Tom says:

    Hello I have a questions. How to compile all files in my project using tsc command?
    Should I write my own script to do that or is it any command available to do it?

  11. Jirka says:

    I would have loved to try it, but I got an error message on the last command:

    $ npm install typescript -g –force
    npm WARN using –force I sure hope you know what you are doing.
    npm http GET
    npm http 200
    npm http GET
    npm http 200
    /var/lib/stickshift/52b7eaa4e0b8cd32e6000111/app-root/data/bin/tsc -> /var/lib/stickshift/52b7eaa4e0b8cd32e6000111/app-root/data/lib/node_modules/typescript/bin/tsc
    typescript@0.9.5 /var/lib/stickshift/52b7eaa4e0b8cd32e6000111/app-root/data/lib/node_modules/typescript

    $ tsc samples/todomvc/js/todos.ts
    /var/lib/stickshift/52b7eaa4e0b8cd32e6000111/app-root/data/718596/samples/todomvc/js/todos.ts(105,6): error TS1008: Unexpected token; ‘constructor, function, accessor or variable’ expected.

  12. Zack says:

    Had to make a couple adjustments to compile todos.ts:
    line 82: change bool to boolean
    line 105: remove the semicolon

    Probably related to the more strict TypeScript typing updates.

  13. TK says:

    I got the same exact messages as Jirka above. If TS is not supported anymore, it might be helpful to post as such; that was the primary reason I signed up with C9 so pretty disappointed.