19 October 2012

RaphaëlJS + TypeScript = RaphaëlTS

RaphaëlJS is a library, written in JavaScript, for creating vector graphics on the web. It's commonly used because it supports all web browsers, including the good ones (which use SVG) and Internet Explorer (which uses VML). Among other things, it's the rendering engine of the ExtJS and Sencha frameworks.

TypeScript is a new web language that extends JavaScript, adding optional strict typing. This is a big improvement on JavaScript because it allows more errors to be caught at compile-time rather than at run-time (for example, if you pass a number to a function that expects an array). However it's not as obnoxious as some strictly-typed languages, because the typing is optional and often implicit.

I've spent some time recently playing around with TypeScript and my verdict: it's wonderful. I only want to use this from now on (at least for large projects). It's a great language, and, since it's an extension (or superset) of JavaScript, all existing JavaScript code works just fine in it. (This is a big advantage it has over Dart, an otherwise excellent language as well.)

But while you can just include a JavaScript library in your TypeScript projects, you don't get the full benefit of the compile-time checking (or the code-hinting) unless that library's entities have been declared. TypeScript allows for ambient declarations: defining or partially defining an entity (class, interface, method, variable, etc.) without actually creating it. As an example (and a very useful one at that), here is a TypeScript declaration file for jQuery: jQuery.d.ts

Today I wondered if anyone had made something like this for RaphaëlJS. I wasn't able to find one, so ... I made one. Here you go: https://bitbucket.org/keesey/raphaelts/src

If you're using the Visual Studio plugin or the TypeScript playground (other editors are bound to come out soon), you can now program type-safe RaphaëlJS code with auto-complete (=IntelliSense).

I've verified that it compiles, but I haven't fully tested it—if anyone experiences issues please let me know. (Or feel free to fork the project).

Hope someone else finds it useful ... I know I will!

7 comments:

  1. If you find TypeScript wonderful, why haven't you used JavaScript++ (http://jspp.javascript.am), which also extends JavaScript but was established long before TypeScript. Microsoft didn't revolutionize anything.

    ReplyDelete
    Replies
    1. Because I'd never heard of it! Checking it out now. Already see some pluses (protected fields) and some minuses (no interfaces).

      Delete
  2. Awesome work with this, I am using it with my hacks! Works beautifull!

    ReplyDelete
  3. Thanks for the work on the Raphael TS definition file! I was searching for one as well. The one here is horribly broken and does not even compile -> https://github.com/borisyankov/DefinitelyTyped

    Keep up the good work, cheers.

    ReplyDelete
    Replies
    1. Thanks -- yeah I saw that one. Maybe I should fork that project....

      Delete
  4. You sir are my favourite person of the week. Saved me hours!

    ReplyDelete