Building End-to-End
Web Apps
Using TypeScript
Gil Fink

Senior Architect
SELA
Agenda
The Why
Introduction to TypeScript
Building a Simple App with TypeScript
Q&A
Summary
Wait! JavaScript End to End?
"JavaScript is the Assembly Language of the
Web"
- Erik Meijer
“you can write large programs ...
JavaScript Benefits
Powerful language:
Functional
Object oriented
Dynamic
Great runtimes
Huge community
Tons of libraries
...
The Alternatives
We have several alternatives:
Hard core JavaScript development
CoffeeScript – http://coffeescript.org
Dar...
What is TypeScript?
“TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript”
~typescriptlang.org

...
Hello TypeScript

Demo
TypeScript Key Features

Support
standard
JavaScript code
with static
typing

Encapsulation
through classes
and modules

S...
From TypeScript to JavaScript
TypeScript Code

JavaScript Code
TypeScript
Compiler

class Greeter {
greeting: string;
cons...
TypeScript Type Annotations
You can add type annotations to variables and
functions

var str : string = ‘hello’; // str is...
Classes and Interfaces
You can define classes
You can define interfaces and implement them
later
interface IGreeter {
gree...
Modules
You define modules to wrap classes, interfaces
and functionality
module app {
export interface IGreeter {
greet():...
Building a Simple End-to-End App with TypeScript

Demo
Questions
Summary
•

•

Open source language that compiles into
JavaScript
Key features:
• Code encapsulation
• Maintainable code
• ...
Resources
Session slide deck and demos –
http://sdrv.ms/18SDF8r
TypeScript – http://www.typescriptlang.org
My Website – ht...
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net
Upcoming SlideShare
Loading in...5
×

Building End to-End Web Apps Using TypeScript

1,141

Published on

A session that was delivered in Oredev 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,141
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×