• Like
Building End to-End Web Apps Using TypeScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Building End to-End Web Apps Using TypeScript

  • 1,024 views
Published

A session that was delivered in Oredev 2013

A session that was delivered in Oredev 2013

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building End-to-End Web Apps Using TypeScript Gil Fink Senior Architect SELA
  • 2. Agenda The Why Introduction to TypeScript Building a Simple App with TypeScript Q&A Summary
  • 3. Wait! JavaScript End to End? "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
  • 4. JavaScript Benefits Powerful language: Functional Object oriented Dynamic Great runtimes Huge community Tons of libraries Tools But it also includes a lot of bad parts
  • 5. The Alternatives We have several alternatives: Hard core JavaScript development CoffeeScript – http://coffeescript.org Dart – http://dartlang.org Clojurescript https://github.com/clojure/clojurescript Script# - http://scriptsharp.com/
  • 6. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org 6
  • 7. Hello TypeScript Demo
  • 8. 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 support => and generics Intellisense and syntax checking 8
  • 9. From TypeScript to JavaScript TypeScript Code JavaScript Code TypeScript Compiler class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } tsc greet() { return “Hi," + this.greeting; } var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return “Hi," + this.greeting; }; return Greeter; })(); } 9
  • 10. 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 { // both parameter and function annotated return ‘hello’ + name; } 10
  • 11. Classes and Interfaces You can define classes You can define interfaces and implement them later interface IGreeter { greet(): void; } var Greeter = (function () { function Greeter() { } class Greeter implements IGreeter{ greeting: string; Greeter.prototype.greet = function () { console.log(this.greeting); greet() { console.log(this.greeting); } } }; return Greeter; })();
  • 12. Modules You define modules to wrap classes, interfaces and functionality module app { export interface IGreeter { greet(): void; export class Greeter implements IGreeter { greeting: string; greet() { console.log(this.greeting); } } (function (app) { var Greeter = (function () { function Greeter() { } } var app; } Greeter.prototype.greet = function () { console.log(this.greeting); }; return Greeter; })(); app.Greeter = Greeter; })(app || (app = {}));
  • 13. Building a Simple End-to-End App with TypeScript Demo
  • 14. Questions
  • 15. Summary • • Open source language that compiles into JavaScript Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
  • 16. Resources Session slide deck and demos – http://sdrv.ms/18SDF8r TypeScript – http://www.typescriptlang.org My Website – http://www.gilfink.net Follow me on Twitter – @gilfink
  • 17. THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net