The session was delivered in SDD conference

1. One language to rule them all:
TypeScript
Gil Fink
CEO and senior consultant, sparXys

2. About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer

3. Agenda
• The why
• TypeScript syntax and language features
• Building a simple end-to-end app with TypeScript
• Summary

4. Wait!
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. Let’s Be Serious
• JavaScript is really a powerful language:
o Functional
o Dynamic
o Can run everywhere
• Huge community
• Big eco-system
• Tools – IDEs, debuggers, test tools and etc.

8. The Alternatives
• We have several alternatives:
• Hard core vanilla JavaScript development
• JavaScript transpilers
• CoffeeScript – http://coffeescript.org
• Dart – http://dartlang.org
• Clojurescript - https://github.com/clojure/clojurescript
• Script# - http://scriptsharp.com/

9. What is TypeScript?
“TypeScript is a typed superset of JavaScript that compiles to
plain JavaScript” ~typescriptlang.org

10. Hello TypeScript
Demo

11. TypeScript is Very
Flexible
Any Browser Any Host
Any OS Tool Support

12. 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

13. • 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
• Async/Await
Features from the near Future of
the Web (ES2015/6/7), Today
Choose your
compilation scenario.
It is up to you!

14. From TypeScript to
JavaScript
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

15. How Good is TypeScript’s
Output?

16. tsconfig.json
• Enables to configure the compiler options:
o Target language (ES3, ES5, ES2015)
o Module system (AMD, ES2015, CommonJS and etc.)
o Source map generation
o Remove comments when compiling
o And more

17. tsconfig.json
Demo

18. Some Important Side
Notes
• All JavaScript code is TypeScript code
o Simply copy and paste
• All JavaScript libraries work with TypeScript
o You will need a declaration file to work with the library

19. @Types
Demo

20. 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. TypeScript Types

22. Type Annotations
Demo

23. Classes and Interfaces
• You can define classes (same as in ES2015)
• 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;
})();

24. Modules
• Uses ES2015 modules syntax
export interface IGreeter {
greet(): void;
}
export 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;
}());
exports.Greeter = Greeter;

25. Classes, Modules and
Interfaces
Demo

26. Building a Simple
End-to-End App with
TypeScript
Demo

27. TypeScript Versions
• TypeScript 1.0
• TypeScript 2.0
• Current version: TypeScript 2.3.2

28. What’s New in TypeScript
2?
• Generators and Iteration for ES5/ES3
• Type-checking for JavaScript files
• Null- and undefined-aware types
• ES2017 Spread and Rest
• Improved any inference
• Tagged union types
• And a lot more

29. Summary
• Open source language that compiles into
JavaScript
• Key features:
• Code encapsulation
• Maintainable code
• Tooling support
• Learn TypeScript today!

30. Resources
• TypeScript – http://www.typescriptlang.org
• TypeScript Source Code -
https://github.com/Microsoft/TypeScript
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink

31. Thank You!

32. Questions?