3. About Me
⢠sparXys CEO and senior consultant
⢠ASP.NET/IIS Microsoft MVP in the last 7 years
⢠Pro Single Page Application Development (Apress)
co-author
⢠4 Microsoft Official Courses (MOCs) co-author
⢠GDG Rashlatz and ng-conf Israel co-organizer
7. âYou can write large
programs in JavaScript. You
just canât maintain themâ
Anders Hejlsberg
8. JavaScript isnât Really Bad
⢠JavaScript is really a powerful language:
o Functional
o Dynamic
o Can run everywhere
⢠Huge community
⢠Libraries
⢠Tools
o IDEs
o Debuggers
o Test tools
9. Some Alternatives
⢠We have several alternatives:
⢠Hard core JavaScript development â my Stockholm syndrome
⢠JavaScript preprocessors/transpilers
⢠CoffeeScript â http://coffeescript.org
⢠Dart â http://dartlang.org
⢠Clojurescript - https://github.com/clojure/clojurescript
⢠Script# - http://scriptsharp.com/
13. Some 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
14. ⢠Modules
⢠Classes
⢠Arrow functions
⢠Default parameters
⢠Destructuring
⢠Spread and rest
⢠Let and const
⢠for...of
⢠Object literal
methods
⢠Shorthand
properties
⢠Computed
properties
⢠Octal / binary
literals
⢠Symbols
⢠Template strings
Features from the near Future of
the Web (ES2015/6), Today
Choose your
compilation scenario.
It is up to you!
15. From TypeScript to
JavaScript
15
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
19. 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 { // parameter and function annotated
return âhelloâ + name;
}
21. Classes and Interfaces
⢠You can define classes
⢠You can define interfaces
o And implement them later or use to infer typing
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;
})();
22. Modules
⢠You define modules to wrap classes, interfaces and
functions
⢠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 = {}));
24. Angular 2: Built with
TypeScript
⢠http://blogs.msdn.com/b/typescript/archive/2015/03/05/ang
ular-2-0-built-on-typescript.aspx
⢠http://blogs.msdn.com/b/visualstudio/archive/2015/03/12/a
-preview-of-angular-2-and-typescript-in-visual-studio.aspx
25. TypeScript Versions
⢠TypeScript 1.0 â 1.6
⢠TypeScript 1.7
o Async/Await for ES6 targets
o Polymorphic this Typing
o ES6 Module Emitting
o ES7 Exponentiation
⢠Current version: TypeScript 1.8
o Released two days ago (22.2)