Getting Started with TypeScript

meetup.com/javascript-israel

SUBMIT YOUR LECTURE:

facebook.com/groups/jsisrae

l

http://bit.ly/jsil-apply

Thanks To Our Sponsors:

SUPPORT THE COMMUNITY:

http://bit.ly/jsil-sponsor

INTRO TO TYPESCRIPT

LANGUAGE

Gil Fink

sparXys CEO

About Me • sparXys CEO and senior consultant

• ASP.NET/IIS Microsoft MVP in the last 7 years

• Pro Single Page Application Development (Apress)

co-author

• 4 Microsoft Official Courses (MOCs) co-author

• GDG Rashlatz and ng-conf Israel co-organizer

Agenda • The Why

• TypeScript Language Features

• Summary

"JavaScript is the assembly language of the Web"

Erik Meijer

“You can write large programs in JavaScript. You

just can’t maintain them”

Anders Hejlsberg

JavaScript isn’t Really Bad • JavaScript is really a powerful language:

o Functional

o Dynamic

o Can run everywhere

• Huge community

• Libraries

• Tools

o IDEs

o Debuggers

o Test tools

Some Alternatives • We have several alternatives:

• Hard core JavaScript development – my Stockholm syndrome

• JavaScript preprocessors/transpilers

• CoffeeScript – http://coffeescript.org

• Dart – http://dartlang.org

• Clojurescript - https://github.com/clojure/clojurescript

• Script# - http://scriptsharp.com/

What is TypeScript? “TypeScript is a typed superset of JavaScript that

compiles to plain JavaScript” ~typescriptlang.org

Hello TypeScript

Demo

TypeScript is Very Flexible

Any Browser Any Host

Any OS Tools Support

Some TypeScript Key Features

Support standard

JavaScript code with

static typing

Encapsulation through classes

and modules

Support for constructors,

properties and functions

Interfaces and enums support

Lambda and generics support

Intellisense and syntax checking

• Modules

• Classes

• Arrow functions

• Default parameters

• Destructuring

• Spread and rest

• Let and const

• for...of

• Object literal

methods

• Shorthand

properties

• Computed

properties

• Octal / binary literals

• Symbols

• Template strings

Features from the near Future of

the Web (ES2015/6), Today

Choose your compilation scenario.

It is up to you!

From TypeScript to JavaScript

15

class Greeter {

greeting: string;

constructor(message: string) {

this.greeting = message;

}

greet() {

return “Hi," + this.greeting;

}

}

TypeScript Code JavaScript Code

TypeScript Compiler

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return “Hi," + this.greeting; }; return Greeter; })();

tsc.js

How Good is TypeScript’s Output?

Some Important Side Notes

• All JavaScript code IS TypeScript code

• All JavaScript libraries work with TypeScript

Defintely Typed https://github.com/DefinitelyTyped/DefinitelyTyped

Demo

TypeScript Type Annotations

• You can add type annotations to variables and

functions

var str: string = ‘hello’; // str is annotated as string

function foo(name: string) : string { // parameter and function annotated

return ‘hello’ + name;

}

TypeScript Types

Classes and Interfaces • You can define classes

• You can define interfaces o And implement them later or use to infer typing

interface IGreeter {

greet(): void;

}

class Greeter implements IGreeter{

greeting: string;

greet() {

console.log(this.greeting);

}

}

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

console.log(this.greeting);

};

return Greeter;

})();

Modules • You define modules to wrap classes, interfaces and

functions

• Use import and export keywords

• module app {

export interface IGreeter {

greet(): void;

}

export class Greeter implements IGreeter {

greeting: string;

greet() {

console.log(this.greeting);

}

}

}

var app;

(function (app) {

var Greeter = (function () {

function Greeter() {

}

Greeter.prototype.greet = function () {

console.log(this.greeting);

};

return Greeter;

})();

app.Greeter = Greeter;

})(app || (app = {}));

Classes, Modules and Interfaces

Demo

Angular 2: Built with TypeScript

• http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx

• http://blogs.msdn.com/b/visualstudio/archive/2015/03/12/a-preview-of-angular-2-and-typescript-in-visual-studio.aspx

TypeScript Versions • TypeScript 1.0 – 1.6

• TypeScript 1.7 o Async/Await for ES6 targets

o Polymorphic this Typing

o ES6 Module Emitting

o ES7 Exponentiation

• Current version: TypeScript 1.8 o Released two days ago (22.2)

Questions?

Summary • Open source language that compiles into

JavaScript

• Key features: • Code encapsulation

• Maintainable code

• Tooling support

• Learn TypeScript today!

Resources • TypeScript – http://www.typescriptlang.org

• TypeScript Source Code -

https://github.com/Microsoft/TypeScript

• Definitely Typed –

https://github.com/borisyankov/DefinitelyTyped

• My Website – http://www.gilfink.net

• Follow me on Twitter – @gilfink

Thank You!