Building End to-End Web Apps Using TypeScript
-
Upload
gil-fink -
Category
Technology
-
view
1.094 -
download
3
description
Transcript of Building End to-End Web Apps Using TypeScript
![Page 1: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/1.jpg)
Gil Fink Senior Architect
SELA
Building End-to-End
Web Apps
Using TypeScript
![Page 2: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/2.jpg)
Agenda
The Why
Introduction to TypeScript
Building a Simple App with TypeScript
Q&A
Summary
![Page 3: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/3.jpg)
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
![Page 4: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/4.jpg)
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
![Page 5: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/5.jpg)
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/
![Page 6: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/6.jpg)
What is TypeScript?
“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” ~typescriptlang.org
6
![Page 7: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/7.jpg)
Demo
Hello TypeScript
![Page 8: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/8.jpg)
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
![Page 9: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/9.jpg)
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
![Page 10: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/10.jpg)
TypeScript Type Annotations
You can add type annotations to variables and functions
10
var str : string = ‘hello’; // str is annotated as string
function foo(name: string) : string { // both parameter and function annotated
return ‘hello’ + name;
}
![Page 11: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/11.jpg)
Classes and Interfaces
You can 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;
})();
![Page 12: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/12.jpg)
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);
}
}
}
var app;
(function (app) {
var Greeter = (function () {
function Greeter() {
}
Greeter.prototype.greet = function () {
console.log(this.greeting);
};
return Greeter;
})();
app.Greeter = Greeter;
})(app || (app = {}));
![Page 13: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/13.jpg)
Demo
Building a Simple End-to-End App with TypeScript
![Page 14: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/14.jpg)
Questions
![Page 15: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/15.jpg)
Summary
• Open source language that compiles into JavaScript
• Key features:
• Code encapsulation
• Maintainable code
• Tooling support
• Learn TypeScript today!
![Page 16: Building End to-End Web Apps Using TypeScript](https://reader033.fdocuments.net/reader033/viewer/2022042700/554cc2b5b4c905a5208b4722/html5/thumbnails/16.jpg)
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