End-to-End SPA Development using TypeScript
3 likes810 views
This document discusses building single page applications using TypeScript: - TypeScript is an open source language that compiles to JavaScript, adding support for static typing, classes, interfaces, and modules to improve code quality and maintainability. - Key features of TypeScript include code encapsulation, support for standard JavaScript as well as types, classes, interfaces, and modules. - The document demonstrates building a simple greeting card application with TypeScript, covering basic TypeScript syntax like type annotations, classes, interfaces, and modules. - Resources are provided for learning more about TypeScript and seeing it in use.
End-to-End SPA Development using TypeScript
- 1. BUILDING END-TO-END SPA USING TYPESCRIPT Gil Fink sparXys CEO
- 2. About Me • sparXys CEO and senior consultant • ASP.NET/IIS Microsoft MVP in the last 6 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rashlatz and ng-conf Israel co-organizer
- 3. Agenda • TypeScript? • Building a Simple App with TypeScript • Summary
- 4. Wait! End to end JavaScript? Are you nuts?
- 5. "JavaScript is the assembly language of the Web" Erik Meijer
- 6. “You can write large programs in JavaScript. You just can’t maintain them” Anders Hejlsberg
- 7. Some Alternatives • We have several 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/
- 8. What is TypeScript? “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
- 10. 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
- 11. From TypeScript to JavaScript 11 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
- 12. TypeScript Type Annotations • You can add type annotations to variables and functions 12 var str: string = ‘hello’; // str is annotated as string function foo(name: string) : string { // parameter and function annotated return ‘hello’ + name; }
- 13. Classes and Interfaces • You can define classes • You can define interfaces o 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; })();
- 14. Modules • You define modules to 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 = {}));
- 15. Classes, Modules and Interfaces Demo
- 16. Building a Simple End-to-End App with TypeScript Demo
- 17. Questions?
- 18. Summary • Open source language that compiles into JavaScript • Key features: • Code encapsulation • Maintainable code • Tooling support • Learn TypeScript today!
- 19. 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
- 20. Thank You!