TypeScript - bringing order to JavaScript with @herkommer #devsum13

Speaker deck: http://www.slideshare.net/herkommer/ts-devsum2013

Michael has a background as a back-end developer. He's previously been against the idea of JavaScript because of its appeared lack of structure. What caught his interest with TypeScript, was that it introduces structure and order to JavaScript, making it look appealing to a C# developer. More and more well structured frameworks such as jQuery and Knockout also lowered the barrier to entry to the JavaScript world. The fact that all of these frameworks also is maintained as open source projects, makes it easier to absorb and to contribute to.

Node.js contributed to my interest in JavaScript. It's a very impressive project where you run JavaScript on the server side in a well structured and highly scalable manner. Michael is heavily pushing Knockout, a prominent MVVM library for JavaScript.

CommonJS, RequireJS and AMD are three modules we use heavily in TypeScript to manage type dependencies.

All browsers interprets JavaScript. It's an approachable, loosely-typed dynamic language and very hard to manage when you have a lot of it.

- TypeScript is a language for application-scale JavaScript development.

- TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. 

- Any browser. Any host. Any OS. Open Source.

TypeScript assists us in writing better JavaScript by using the added type system. This means better intellisense, type checking. When it compiles to JavaScript, it doesn't add any type information, however - it compiles to plain JavaScript and it's a one-way trip.

The great benefit of TypeScript - compared to JS tools like jsLint - is the intellisense support (via the TS LanguageService) in a variety of tools, including Visual Studio 2012. It helps you, not only check your JavaScript, but write correct code from the start. You can get intellisense definition files (d.ts) from http://github.org/borisyankov/definitelytyped.

There's a VS2012 project template for TypeScript. If you're using Node, use NPM.

Features of TypeScript:

- Optional Type System (Type Inference)

- Modules (like .NET namespaces)

- Interfaces

- Classes

- Inheritance

- Lambdas (arrow-syntax)

- Static Checking

- Code Refactoring

The TypeScript compiler produces a .js-file and an optional type definition file (.d.ts). It produces EcmaScript5 JavaScript or, optionally EcmaScript 3. Note, however, that it includes some EC6-statements (in the 5-option?).

The project template available from Microsoft, is called HTML Application with TypeScript. It creates a default.htm file which references the app.js file generated by the included app.ts, featuring a Greeter class, which is a wrapped timer that updates the UI.

Example TypeScript:

var foo; // type is any

var bar: string;

var x: number = 100;

foo = 10; // This is OK - foo's an any

bar = 20; // Compiler error - bar's a string.

function double(i: number) {

     return i * 2;

}

double(100); // all good

double("foo"); // Compiler error - function expects a number.

// Downloaded jQuery Definitely Typed (d.ts) from NuGet.

// Reference the jQuery type library

///

$("a").click …. // <--- have="" information.="" intellisense="" now="" p="" type="" we="" with="">

module myModule {

     class Person {

          constructor(public firstName: string, public lastName: string) { // auto-initialized properties just like C#, but with a different syntax

          }

          FullName() { // property syntax

               return this.firstName + " " + this.lastName;

          }

     }

     export class Customer extends Person { // Inheritance

    

          customerId: number;

          constructor(first: string, last: string, customerId: number, public vip: bool = true) { // default values 

               super(first, last);

               this.customerId = customerId; // private variable assignment

          }

     }

}

var person = myModule.Person; // Not available.

var customer = myModule.Customer; // All good - Customer was exported. 

(Next version of TypeScript will feature Generics. You can follow its progress on GitHub.)