Building End-to-End Apps Using Typescript

Building End-to-End Apps Using Typescript

• 1.
  Gil Fink Senior Consultant sparXys BuildingEnd-to-End Apps Using TypeScript
• 2.
  Agenda Introduction to TypeScript Buildinga Simple App with TypeScript Summary
• 3.
  Wait! JavaScript Endto 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.
  The Alternatives We haveseveral alternatives: Hard core JavaScript development JavaScript preprocessors CoffeeScript – http://coffeescript.org Dart – http://dartlang.org Clojurescript - https://github.com/clojure/clojurescript Script# - http://scriptsharp.com/
• 5.
  What is TypeScript? “TypeScriptis a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org 5
• 6.
  Demo Hello TypeScript
• 7.
  TypeScript Key Features 7 Support standard JavaScriptcode 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.
  From TypeScript toJavaScript 8 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.exe
• 9.
  TypeScript Type Annotations Youcan add type annotations to variables and functions 9 var str : string = ‘hello’; // str is annotated as string function foo(name: string) : string { // both parameter and function annotated return ‘hello’ + name; }
• 10.
  Classes and Interfaces Youcan define classes You can define interfaces And implement them later 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; })();
• 11.
  Modules You define modulesto wrap classes, interfaces and functionality 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 = {}));
• 12.
  Demo Classes, Modules andInterfaces
• 13.
  Demo Building a SimpleEnd-to-End App with TypeScript
• 14.
  Questions
• 15.
  Summary • Open sourcelanguage that compiles into JavaScript • Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
• 16.
  Resources Session slide deckand demos – TypeScript – http://www.typescriptlang.org Definitely Typed – https://github.com/borisyankov/DefinitelyTyped My Website – http://www.gilfink.net Follow me on Twitter – @gilfink
• 17.
  THANK YOU Gil Fink @gilfink http://www.gilfink.net