Building End to-End Web Apps Using TypeScript session was delivered in DevConnections 2013

1. Gil Fink
Senior Architect
SELA
Building End-to-End
Web Apps
Using TypeScript

2. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
AGENDA
 The Why
 Introduction to TypeScript
 Building a Simple App with TypeScript
 Q&A
 Summary

3. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
GETTING STARTED
 JavaScript can feel messy
 We want a maintainable code
 We want to use familiar JavaScript
patterns

4. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
THE ALTERNATIVES
 We have several alternatives:
 Hard core JavaScript development
 CoffeeScript – http://coffeescript.org
 Dart – http://dartlang.org
 Script# - http://scriptsharp.com/

5. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
WHAT IS TYPESCRIPT?
 “TypeScript is a typed superset of
JavaScript that compiles to plain
JavaScript” ~typescriptlang.org
5

6. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
DEMO
Hello TypeScript

7. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
TYPESCRIPT IS FLEXIBLE
7
Any Browser Any Host
Any OS Tool Support

8. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
TYPESCRIPT KEY FEATURES
8
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

9. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
FROM TYPESCRIPT TO JAVASCRIPT
9
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

10. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
DEMO
Building a Simple App with TypeScript

11. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
QUESTIONS

12. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
SUMMARY
• Open source language that compiles into
JavaScript
• Key features:
• Code encapsulation
• Maintainable code
• Tooling support
• Learn TypeScript today!

13. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
RESOURCES
 Session slide deck and demos –
http://sdrv.ms/1eGoSUM
 TypeScript –
http://www.typescriptlang.org
 My Website – http://www.gilfink.net
 Follow me on Twitter – @gilfink

14. www.devconnections.com
BUILDING END-TO-END WEB APPS USING TYPESCRIPT
THANK YOU
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net