Building End to-End Web Apps Using TypeScript

Gil FinkSenior Architect

SELA

Building End-to-End Web Apps

Using TypeScript

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

AGENDA

The Why Introduction to TypeScript Building a Simple App with TypeScript Q&A Summary

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

GETTING STARTED

JavaScript can feel messy We want a maintainable code We want to use familiar JavaScript

patterns

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

THE ALTERNATIVES

We have several alternatives: Hard core JavaScript development

CoffeeScript – http://coffeescript.org

Dart – http://dartlang.org

Script# - http://scriptsharp.com/

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

WHAT IS TYPESCRIPT?

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org

5

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

DEMO

Hello TypeScript

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

TYPESCRIPT IS FLEXIBLE

7

Any Browser Any Host

Any OS Tool Support

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

TYPESCRIPT KEY FEATURES

8

Support standard JavaScript code with

static typing

Encapsulation

through classes

and modules

Support for

constructors,

properties and

functions

Interfaces and enums

support

Lambda support => and generics

Intellisense and syntax

checking

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

FROM TYPESCRIPT TO JAVASCRIPT

9

class Greeter {

greeting: string;

constructor(message: string) {

this.greeting = message;

}

greet() {

return “Hi," + this.greeting;

}

}

TypeScript Code JavaScript CodeTypeScri

pt Compiler

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

tsc

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

DEMO

Building a Simple App with TypeScript

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

QUESTIONS

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

SUMMARY

• Open source language that compiles into JavaScript

• Key features:• Code encapsulation

• Maintainable code

• Tooling support

• Learn TypeScript today!

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

RESOURCES

Session slide deck and demos – http://sdrv.ms/1eGoSUM

TypeScript – http://www.typescriptlang.org

My Website – http://www.gilfink.net Follow me on Twitter – @gilfink

www.devconnections.com

BUILDING END-TO-END WEB APPS USING TYPESCRIPT

THANK YOUGil FinkSenior Architect gilf@sela.co.il@gilfinkhttp://www.gilfink.net