Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building End to-End Web Apps Using TypeScript

1,643 views

Published on

A session that was delivered in Oredev 2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building End to-End Web Apps Using TypeScript

  1. 1. Building End-to-End Web Apps Using TypeScript Gil Fink Senior Architect SELA
  2. 2. Agenda The Why Introduction to TypeScript Building a Simple App with TypeScript Q&A Summary
  3. 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. 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. 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. 6. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org 6
  7. 7. Hello TypeScript Demo
  8. 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. 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. 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. 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. 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. 13. Building a Simple End-to-End App with TypeScript Demo
  14. 14. Questions
  15. 15. Summary • • Open source language that compiles into JavaScript Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
  16. 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. 17. THANK YOU Gil Fink Senior Architect gilf@sela.co.il @gilfink http://www.gilfink.net

×