{"id":514,"date":"2012-12-04T17:34:18","date_gmt":"2012-12-04T15:34:18","guid":{"rendered":"https:\/\/esimov.com\/blog\/?p=514"},"modified":"2014-11-10T10:35:52","modified_gmt":"2014-11-10T08:35:52","slug":"typescript-first-impressions","status":"publish","type":"post","link":"https:\/\/esimov.com\/blog\/2012\/12\/04\/typescript-first-impressions\/","title":{"rendered":"First impressions about Typescript, the new authoring tool from Microsoft"},"content":{"rendered":"

In this blog post i want to share my first impression about Typescript, the new programming language from Microsoft.<\/p>\n

The background<\/h2>\n

Coming from Flash\/Actionscript, and having done almost all my experiments in AS3, facing the loose typing nature of JavaScript was a bit daunting for me. Over the time I got familiarized\u00a0myself with all the mystical parts of JavaScript, with it’s prototyping nature, with the strange fact that JS hasn’t a type interface, and you can declare a variable without declaring the type of that variable. In fact all the declared variables can take any type of value, and assigning a different type of value to the variable wont make the compiler to trow an exception (only if we force to do so). This proved to be the weakness of JavaScript and the most acclaimed factor which stand in front of developing highly scalable applications.<\/p>\n

wo<\/p>\n

The first question that may arise is what is Typescript? The answer is: Typescript is a superset of JavaScript which compiles to JavaScript at runtime, all while maintaining your existing code and using the existing libraries. And why Typescript? The short answer: because Typescript is awesome. The long answer will follow.<\/p>\n

One of the main benefits using typescript is code validation at compile time and compilation to native Javascript file at the runtime.<\/p>\n

This differentiate Typescript from other competitors, nominating mainly two contenders: DART<\/a>\u00a0( which is a very heavy assault initiative from Google meant to\u00a0eliminate\u00a0all the weakness and flawless of JavaScript, introducing a completely new language, having as target not less than being the web native language), and Coffescript<\/a> which is a\u00a0syntactic\u00a0sugar of Javascript, which compile to Javascript. Typescript somehow break in the middle of the two, because DART is a fundamentally and completely different language than Javascript, with strong typing, traditional class \u00a0structures, modules etc. On the other hand Coffescript embraced the new ECMA-6 (Harmony) features like classes, \u00a0import\u00a0modules (only when\u00a0required) etc, but it’s weakness is the same as of Javascript: the absence of type annotation and a very limited or almost completely absent feedback response and lack of debugging tools. This got managed by TypeScript.<\/p>\n

Getting started<\/h2>\n

I won’t go into much details how to get started with Typescript. You can download the source from the official page of the language:\u00a0http:\/\/www.typescriptlang.org\/<\/a>, then if you are a Windows 8 or at least Windows 7 user and preferably (not my case) .NET developer you’ll have a very easy time to get started with coding. There is a plugin for Microsoft Visual Studio 2012 downloadable from the same source. I’ve tried installing on Vista, after too many trials and errors finally got working, unfortunately without code highlighting and code completion. So in the end decided to write a plugin<\/a> for Sublime Text 2 editor (my editor of choice). Here<\/a> is the Stackoverflow thread explaining the process to automate the code transcription from TS to JS. The only weakness is\u00a0– at the time of this writing – \u00a0there isn’t a code completion and live time error checking plugin implemented. A good news is that Webstorm 6.0 is already offering support for Typescript. This article summarize in a few words the capabilities of Typescript in Webstorm perspective:\u00a0http:\/\/joeriks.com\/2012\/11\/20\/a-first-look-at-the-typescript-support-in-webstorm-6-eap\/<\/a>.<\/p>\n

There is a live playground available for online experimentation with a few samples at disposal:\u00a0http:\/\/www.typescriptlang.org\/Playground\/<\/a><\/p>\n

<\/p>\n

Things I liked in Typescript<\/h2>\n

<\/p>\n

Static value declaration<\/h3>\n

As i said earlier declaring a variable in JS is simply assigning a value to it, the rest of internal operations are up to the JIT compiler. This is the root of many unwanted errors which happens when we unconsciously\u00a0 messing up different types of values with the originally declared variable. Typescript helps to resolve this issue by allowing to statically declare the variable type. If no type has been specified the type any<\/kbd> is inferred.<\/p>\n

var num<\/span>:<\/span> number = 20;<\/span><\/code><\/pre>\n
which compiles to JS as:<\/p>\n
var<\/span> num =<\/span> 20<\/span>;<\/span><\/code><\/pre>\n
The only chance in JS to get feedback about the errors is to use test cases by covering all the possible errors you might expect:<\/p>\n
if<\/span> typeof<\/span> num !<\/span>==<\/span> \"number\"<\/span> {<\/span>\r\n   throw new<\/span> Error(<\/span>num,<\/span> \" is not a number\"<\/span>)<\/span>;<\/span>\r\n}<\/span><\/code><\/pre>\n
On the other hand TS informs instantly about the errors as you type.<\/p>\n
Arrow function expression<\/h3>\n
Another great feature is the addition of the so called arrow function expression. These are useful on situations when we need to preserve the scope of the outer execution context. A common practice widespread among JS developers is to bind this<\/kbd> to a variable self<\/kbd> which we place outside the inner function.
\nA function expression using the function<\/kbd> keyword introduces a new dynamically bound this<\/kbd>, whereas an arrow function expression preserves the this<\/kbd> of its enclosing context. These are particularly useful in situation when we need to write callbacks<\/kbd> like in the following example.<\/p>\n
function<\/span> sayHello(<\/span>message:<\/span>string,<\/span> callback:<\/span>(<\/span>)<\/span>=><\/span>any)<\/span> {<\/span>\r\n\talert(<\/span>message)<\/span>;<\/span>\r\n\tsetTimeout(<\/span>callback,<\/span> 2000<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nsayHello(<\/span>\"Welcome visitor\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\r\n\talert(<\/span>\"thank you\"<\/span>)<\/span>;<\/span>\t\r\n}<\/span>)<\/span>;<\/span><\/code><\/pre>\n
<\/p>\n
Classes, modules, interfaces<\/h3>\n
Probably the greatest addition of Typescript is the possibility to work with classes<\/kbd>, modules<\/kbd> and interfaces<\/kbd>.<\/p>\n
Interfaces<\/h4>\n
Let’s start with interfaces<\/strong>. In Typescript interfaces have only a contextual scope, they haven’t any runtime representations of the compiled code. Their role is only to create a syntactic structure, a shell which is particular useful for object properties validation, in other words for documenting and validating the required shape of properties, objects passed as parameters, and objects returned from functions. In TS, interfaces are actually object types. While in Actionscript you have to have a class to implement the interface, in TS a simple object can implement it. Here is how you declare interfaces in TS:<\/p>\n
interface Person {<\/span>\r\n\tname:<\/span> string;<\/span>\r\n\tage?<\/span>:<\/span> number;<\/span>\r\n}<\/span>\r\n\r\nfunction<\/span> print(<\/span>person:<\/span> Person)<\/span> {<\/span>\r\n\tif<\/span> (<\/span>person.<\/span>age)<\/span> {<\/span>\r\n\t\talert(<\/span>\"Welcome \"<\/span> +<\/span> person.<\/span>name +<\/span> \" you are \"<\/span> +<\/span> person.<\/span>age +<\/span> \" age\"<\/span>)<\/span>;<\/span>\t\r\n\t}<\/span> else<\/span> {<\/span>\r\n\t\talert(<\/span>\"Welcome \"<\/span> +<\/span> person.<\/span>name)<\/span>;<\/span>\r\n\t}<\/span>\r\n\t\r\n}<\/span>\r\n\r\nprint(<\/span>{<\/span>name:<\/span> \"George\"<\/span>,<\/span> age:<\/span>22<\/span>}<\/span>)<\/span>;<\/span><\/code><\/pre>\n
Furthermore interfaces have function overloading features which means that you can pass two identical functions on the same interface and let the user decide at the implementation phase which function wants to implement:<\/p>\n
interface Overload {<\/span>\r\n\tfoo(<\/span>s:<\/span>string)<\/span>:<\/span> string;<\/span>\r\n\tfoo(<\/span>n:<\/span>number)<\/span>:<\/span> number;<\/span>\r\n}<\/span>\r\n\r\nfunction<\/span> process(<\/span>o:<\/span>Overload)<\/span> {<\/span>\r\n\to.<\/span>foo(<\/span>\"string\"<\/span>)<\/span>;<\/span>\r\n\to.<\/span>foo(<\/span>23<\/span>)<\/span>;<\/span>\r\n}<\/span><\/code><\/pre>\n
Another very interesting particularity of Typescript is that above the support offered for overloading functions, this is applicable for constructors too. This way we can redefine multiple constructor only by changing the way we implement it.<\/p>\n
var<\/span> canvas =<\/span> document.<\/span>createElement(<\/span>\"canvas\"<\/span>)<\/span>;<\/span>\r\ndocument.<\/span>body.<\/span>appendChild(<\/span>canvas)<\/span>;<\/span>\r\nvar<\/span> ctx =<\/span> canvas.<\/span>getContext(<\/span>'2d'<\/span>)<\/span>;<\/span>\r\n\r\ninterface ICircle {<\/span>\r\n\tx:<\/span> number;<\/span>\r\n\ty:<\/span> number;<\/span>\r\n\tradius:<\/span> number;<\/span>\r\n\tcolor?<\/span>:<\/span> string;<\/span>\r\n}<\/span>\r\n\r\nclass Circle {<\/span>\r\n\tpublic x:<\/span> number;<\/span>\r\n\tpublic y:<\/span> number;<\/span>\r\n\tpublic radius:<\/span> number;<\/span>\r\n\tpublic color:<\/span> string =<\/span> \"#000\"<\/span>;<\/span>\r\n\t\r\n\tconstructor (<\/span>)<\/span> {<\/span>}<\/span>\t\t\r\n\t\r\n\tconstructor (<\/span>)<\/span> {<\/span> \r\n\t\tthis.<\/span>x =<\/span> Math.<\/span>random(<\/span>)<\/span> *<\/span> canvas.<\/span>width;<\/span>\r\n\t\tthis.<\/span>y =<\/span> Math.<\/span>random(<\/span>)<\/span> *<\/span> canvas.<\/span>height;<\/span>\r\n\t\tthis.<\/span>radius =<\/span> 40<\/span>;<\/span>\r\n\t}<\/span>\t\t \t\t\r\n\t\r\n\tconstructor (<\/span>circle:<\/span> ICircle =<\/span> {<\/span>x:<\/span>Math.<\/span>random(<\/span>)<\/span> *<\/span> canvas.<\/span>width,<\/span> y:<\/span>Math.<\/span>random(<\/span>)<\/span> *<\/span> canvas.<\/span>height,<\/span> radius:<\/span>20<\/span>}<\/span>)<\/span> {<\/span>\r\n\t\tthis.<\/span>x =<\/span> circle.<\/span>x;<\/span>\r\n\t\tthis.<\/span>y =<\/span> circle.<\/span>y;<\/span>\r\n\t\tthis.<\/span>radius =<\/span> circle.<\/span>radius;<\/span>\r\n\t}<\/span>\r\n}<\/span>\r\n\r\nvar<\/span> c =<\/span> new<\/span> Circle(<\/span>)<\/span>;<\/span>\r\nctx.<\/span>fillStyle =<\/span> c.<\/span>color;<\/span>\r\nctx.<\/span>beginPath(<\/span>)<\/span>;<\/span>\r\nctx.<\/span>arc(<\/span>c.<\/span>x,<\/span> c.<\/span>y,<\/span> c.<\/span>radius,<\/span> 0<\/span>,<\/span> Math.<\/span>PI *<\/span> 2<\/span>,<\/span> true<\/span>)<\/span>;<\/span>\r\nctx.<\/span>closePath(<\/span>)<\/span>;<\/span>\r\nctx.<\/span>fill(<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/p>\n
Classes<\/h4>\n
The most advanced feature of Typescript (from my point of view) is the addition of the more traditional class structure with all the hotness like inheritance, polymorphism, constructor functions etc. In Typescript we are declaring the class in the following way:<\/p>\n
class Point {<\/span>\r\n\tx:<\/span> number;<\/span>\r\n\ty:<\/span> number;<\/span>\r\n\t\r\n\tconstructor(<\/span>x:<\/span> number,<\/span> y:<\/span> number)<\/span> {<\/span>\r\n\t\tthis.<\/span>x =<\/span> x;<\/span>\r\n\t\tthis.<\/span>y =<\/span> y;<\/span>\r\n\t}<\/span>\r\n\t\r\n\tsqrt(<\/span>)<\/span> {<\/span>\r\n\r\n\t\treturn<\/span> Math.<\/span>sqrt(<\/span>this.<\/span>x *<\/span> this.<\/span>x +<\/span> this.<\/span>y *<\/span> this.<\/span>y)<\/span> \r\n\t}<\/span>\r\n\t\r\n\tprint(<\/span>callback?<\/span>)<\/span> {<\/span>\t\t \r\n\t\tsetTimeout(<\/span>callback,<\/span> 3000<\/span>)<\/span>;<\/span>\r\n\t\t\r\n\t}<\/span>\r\n}<\/span>\r\n\r\nclass Point3D extends Point {<\/span>\t\r\n\tz :<\/span> number;<\/span>\r\n\t\r\n\tconstructor (<\/span> x:<\/span>number,<\/span>  y:<\/span> number,<\/span> z:<\/span> number)<\/span> {<\/span>\r\n\t\tsuper(<\/span>x,<\/span> y)<\/span>;<\/span>\r\n\t}<\/span>\r\n\t\r\n\tsqrt(<\/span>)<\/span> {<\/span>\r\n\t\tvar<\/span> d =<\/span> super.<\/span>sqrt(<\/span>)<\/span>;<\/span>\r\n\t\treturn<\/span> Math.<\/span>sqrt(<\/span>d *<\/span> d +<\/span> this.<\/span>z *<\/span> this.<\/span>z)<\/span>;<\/span>\r\n\t}<\/span>\r\n}<\/span>\r\n\r\nvar<\/span> p =<\/span> new<\/span> Point(<\/span>20<\/span>,<\/span> 20<\/span>)<\/span>;<\/span>\r\np.<\/span>print(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> alert (<\/span>p.<\/span>sqrt(<\/span>)<\/span>)<\/span>;<\/span> }<\/span>)<\/span>;<\/span><\/code><\/pre>\n
<\/p>\n
… which in Javascript compiles to:<\/p>\n
<\/p>\n
var<\/span> __extends =<\/span> this.<\/span>__extends ||<\/span> function<\/span> (<\/span>d,<\/span> b)<\/span> {<\/span>\r\n    function<\/span> __(<\/span>)<\/span> {<\/span> this.<\/span>constructor =<\/span> d;<\/span> }<\/span>\r\n    __.<\/span>prototype =<\/span> b.<\/span>prototype;<\/span>\r\n    d.<\/span>prototype =<\/span> new<\/span> __(<\/span>)<\/span>;<\/span>\r\n}<\/span>;<\/span>\r\nvar<\/span> Point =<\/span> (<\/span>function<\/span> (<\/span>)<\/span> {<\/span>\r\n    function<\/span> Point(<\/span>x,<\/span> y)<\/span> {<\/span>\r\n        this.<\/span>x =<\/span> x;<\/span>\r\n        this.<\/span>y =<\/span> y;<\/span>\r\n    }<\/span>\r\n    Point.<\/span>prototype.<\/span>sqrt =<\/span> function<\/span> (<\/span>)<\/span> {<\/span>\r\n        return<\/span> Math.<\/span>sqrt(<\/span>this.<\/span>x *<\/span> this.<\/span>x +<\/span> this.<\/span>y *<\/span> this.<\/span>y)<\/span>;<\/span>\r\n    }<\/span>;<\/span>\r\n    Point.<\/span>prototype.<\/span>print =<\/span> function<\/span> (<\/span>callback)<\/span> {<\/span>\r\n        setTimeout(<\/span>callback,<\/span> 3000<\/span>)<\/span>;<\/span>\r\n    }<\/span>;<\/span>\r\n    return<\/span> Point;<\/span>\r\n}<\/span>)<\/span>(<\/span>)<\/span>;<\/span>\r\nvar<\/span> Point3D =<\/span> (<\/span>function<\/span> (<\/span>_super)<\/span> {<\/span>\r\n    __extends(<\/span>Point3D,<\/span> _super)<\/span>;<\/span>\r\n    function<\/span> Point3D(<\/span>x,<\/span> y,<\/span> z)<\/span> {<\/span>\r\n        _super.<\/span>call(<\/span>this,<\/span> x,<\/span> y)<\/span>;<\/span>\r\n    }<\/span>\r\n    Point3D.<\/span>prototype.<\/span>sqrt =<\/span> function<\/span> (<\/span>)<\/span> {<\/span>\r\n        var<\/span> d =<\/span> _super.<\/span>prototype.<\/span>sqrt.<\/span>call(<\/span>this)<\/span>;<\/span>\r\n        return<\/span> Math.<\/span>sqrt(<\/span>d *<\/span> d +<\/span> this.<\/span>z *<\/span> this.<\/span>z)<\/span>;<\/span>\r\n    }<\/span>;<\/span>\r\n    return<\/span> Point3D;<\/span>\r\n}<\/span>)<\/span>(<\/span>Point)<\/span>;<\/span>\r\nvar<\/span> p =<\/span> new<\/span> Point(<\/span>20<\/span>,<\/span> 20<\/span>)<\/span>;<\/span>\r\np.<\/span>print(<\/span>function<\/span> (<\/span>)<\/span> {<\/span>\r\n    alert(<\/span>p.<\/span>sqrt(<\/span>)<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span><\/code><\/pre>\n
<\/p>\n
Analyzing the code we observe that it share almost the same principle like any other static type language. We declare the class, it’s variables and functions, which can be static<\/kbd>, private<\/kbd> and public<\/kbd>. By default the declared functions and variables are public, but we can make them private or static, by placing the private<\/kbd> or static<\/kbd> keyword in front of them. TS supports the constructor functions, which we declare in the following format:<\/p>\n
var1:<\/span>type;<\/span>\r\nvar2:<\/span>type;<\/span>\r\nconstructor (<\/span>var1:<\/span>type,<\/span> var2:<\/span>type.<\/span>.<\/span>.<\/span>varn:<\/span>type)<\/span> {<\/span>\r\n       this.<\/span>var1 =<\/span> var1;<\/span>\r\n       this.<\/span>var2 =<\/span> var2;<\/span>\r\n       .<\/span>\r\n       .<\/span>\r\n       .<\/span>\r\n       this.<\/span>varn =<\/span> varn;<\/span>\r\n}<\/span><\/code><\/pre>\n
It’s possible to declare the constructor arguments type as public and then we can eliminate to assign the constructor function parameters to constructor’s variables.<\/p>\n
Typescript facilitates the working with classes by introducing another two great features commonly used in OOP, namely the inheritance and class extension. I rewrite the above code sample to show with a few simple changes we can extend the existing code to embrace some advanced polymorphism methods:<\/p>\n
class Point {<\/span>\r\n\tx:<\/span> number;<\/span>\r\n\ty:<\/span> number;<\/span>\r\n\t\r\n\tconstructor(<\/span>x:<\/span> number,<\/span> y:<\/span> number)<\/span> {<\/span>\r\n\t\tthis.<\/span>x =<\/span> x;<\/span>\r\n\t\tthis.<\/span>y =<\/span> y;<\/span>\r\n\t}<\/span>\r\n\t\r\n\tsqrt(<\/span>x:<\/span>number,<\/span> y:<\/span>number)<\/span>:<\/span>number {<\/span>\t\t\r\n\t\treturn<\/span> Math.<\/span>sqrt(<\/span>x *<\/span> x +<\/span> y *<\/span> y)<\/span>;<\/span> \r\n\t}<\/span>\r\n\t\r\n\tdist(<\/span>p:<\/span>Point)<\/span>:<\/span>number {<\/span>\r\n\t\tvar<\/span> dx:<\/span> number =<\/span> this.<\/span>x -<\/span> p.<\/span>x;<\/span>\r\n\t\tvar<\/span> dy:<\/span> number =<\/span> this.<\/span>y -<\/span> p.<\/span>y;<\/span>\r\n\t\t\r\n\t\treturn<\/span> this.<\/span>sqrt(<\/span>dx,<\/span> dy)<\/span>;<\/span>\r\n\t}<\/span>\r\n\t\r\n\tprint(<\/span>callback?<\/span>)<\/span> {<\/span>\t\t \r\n\t\tsetTimeout(<\/span>callback,<\/span> 3000<\/span>)<\/span>;<\/span>\r\n\t\t\r\n\t}<\/span>\r\n}<\/span>\r\n\r\nclass Point3D extends Point {<\/span>\t\r\n\tz :<\/span> number;<\/span>\r\n\t\r\n\tconstructor (<\/span> x:<\/span>number,<\/span>  y:<\/span> number,<\/span> z:<\/span> number)<\/span> {<\/span>\r\n\t\tsuper(<\/span>x,<\/span> y)<\/span>;<\/span>\r\n\t}<\/span>\r\n\t\r\n\tsqrt3(<\/span>z:<\/span>number)<\/span> {<\/span>\r\n\t\tvar<\/span> s =<\/span> super.<\/span>sqrt(<\/span>this.<\/span>x,<\/span> this.<\/span>y)<\/span>;<\/span>\r\n\t\treturn<\/span> Math.<\/span>sqrt(<\/span>s *<\/span> s +<\/span> this.<\/span>z *<\/span> this.<\/span>z)<\/span>;<\/span>\t\t\r\n\t}<\/span>\t\r\n\t\t\r\n\tdist(<\/span>p:<\/span>Point3D)<\/span>:<\/span>number {<\/span>\r\n\t\tvar<\/span> d =<\/span> super.<\/span>dist(<\/span>p)<\/span>;<\/span>\t\t\r\n\t\tvar<\/span> dz:<\/span> number =<\/span> this.<\/span>z -<\/span> p.<\/span>z;<\/span>\t\t\t\t\t\t\t\t\t\t\r\n\t\treturn<\/span> this.<\/span>sqrt3(<\/span>dz)<\/span>;<\/span>\r\n\t}<\/span>\r\n}<\/span>\r\n\r\nvar<\/span> p =<\/span> new<\/span> Point3D(<\/span>19<\/span>,<\/span> 20<\/span>,<\/span> 20<\/span>)<\/span>;<\/span>\r\np.<\/span>print(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> alert (<\/span>p.<\/span>dist(<\/span>new<\/span> Point3D(<\/span>2<\/span>,<\/span>2<\/span>,<\/span>20<\/span>)<\/span>)<\/span>)<\/span>;<\/span> }<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/p>\n
Modules<\/h4>\n
The last topic i want to discuss is about modules<\/em>. Typescript module implementation is closely aligned with ECMAScript 6 proposal and supports code generation, targeting AMD and CommonJS modules. There are two types of source files<\/em> Typescript is supporting: implementation source files<\/strong> and declaration source files<\/strong>. The difference between the two is that the first one contains statements and declarations, on the other hand the second contains only declarations. These can be used to declare static type information associated with existing javascript code. By default, a JavaScript output file is generated for each implementation source file in a compilation, but no output is generated from declaration source files.<\/p>\n
The scope of modules is to maintain a clean structure in our code and to prevent the global namespace pollution. If suppose i have to create a global function Main<\/code> the way i do in Javascript without to override the function at a later stage is to assure that the Main<\/code> function get initialized only once. This is a common technique widespread among JS developers. In TS we do in the following way:<\/p>\n
module net.<\/span>esimov.<\/span>core {<\/span>\r\n\texport class Main {<\/span>\r\n\t\tpublic name:<\/span> string;<\/span>\r\n\t\tpublic interest:<\/span> string;<\/span>\r\n\t\t\r\n\t\tconstructor(<\/span>)<\/span> {<\/span>\r\n\t\t\tthis.<\/span>name =<\/span> \"esimov\"<\/span>;<\/span>\r\n\t\t\tthis.<\/span>interest =<\/span> \"web technology\"<\/span>;<\/span>\r\n\t\t}<\/span>\r\n\t\t\r\n\t\tputs(<\/span>)<\/span> {<\/span>\r\n\t\t\tconsole.<\/span>log(<\/span>this.<\/span>name,<\/span> \" like\"<\/span>,<\/span> this.<\/span>interest)<\/span>;<\/span>\r\n\t\t}<\/span>\r\n\t}<\/span>\r\n}<\/span><\/code><\/pre>\n
Importing the declaration files is simple as placing the following statement on the top of our code: \/\/\/ <reference path=\"...\";\/><\/code>. Then with a simple import<\/kbd> statement we’ll import the modules needed at one specific moment.<\/p>\n
import Core =<\/span> net.<\/span>esimov.<\/span>core;<\/span>\r\nvar<\/span> c =<\/span> new<\/span> Core.<\/span>Main(<\/span>)<\/span>;<\/span><\/code><\/pre>\n<\/p>\n
Final thoughts<\/h2>\n
Typescript is a language that is definitely worth to try it. Unfortunately it has one main disadvantage, namely to benefit from it’s strong typing features we need to declare and construct declaration files for libraries we want to include in our projects. There are predefined declaration files for jQuery<\/code>, node.js<\/code> and d3.js<\/code>, just to mention a few, but hopefully as the community will grow this list will get bigger and bigger.<\/p>\n
Another weak point is the lack of support from IDE’s other than MS Visual Studio, but fortunately Webstorm 6 has in perspective to include full type support for Typescript too.<\/p>\n<\/p>\n
What’s next?<\/h2>\n
With this introduction done, my intention is to put into real usage all the information and learning accumulated and trying to create some canvas experiments but this time using Typescript. So check out soon.<\/p>\n
 Other resources to check<\/h2>\n<\/p>\n