One language to rule them all type script

4/19/2016Footer Text 1Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
One language to rule them all:
TypeScript
Gil Fink
CEO and Senior Consultant, sparXys

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

Agenda
• The Why
• TypeScript Syntax and Language Features
• Building a Simple App with TypeScript
• Summary

Wait!
JavaScript?
Are you nuts?

"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

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

Some Alternatives
• We have several alternatives:
• Hard core JavaScript development – my Stockholm syndrome
• JavaScript transpilers/preprocessors
• CoffeeScript – http://coffeescript.org
• Dart – http://dartlang.org
• Clojurescript - https://github.com/clojure/clojurescript
• Script# - http://scriptsharp.com/

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

Hello TypeScript
Demo

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

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

• 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!

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

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

tsconfig.json
Demo
17

How Good is TypeScript’s
Output?

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

Definitely Typed + Typings
https://github.com/DefinitelyTyped/DefinitelyTyped
https://github.com/typings/typings
Demo

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;
}

TypeScript Types

Type Annotations
Demo

Classes and Interfaces
• You can define classes
• You can define interfaces
o And implement them later
interface IGreeter {
greet(): void;
}
class Greeter implements IGreeter{
greeting: string;
greet() {
console.log(this.greeting);
}
}
function Greeter() {
}
Greeter.prototype.greet = function () {
};
return Greeter;
})();

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() {
}
}
}
var app;
(function (app) {
}
Greeter.prototype.greet = function () {
};
return Greeter;
})();
app.Greeter = Greeter;
})(app || (app = {}));

Modules – cont.
• It is preferable to use ES2015 modules syntax
o No need to use the module keyword
26
export interface IGreeter {
greet(): void;
}
export class Greeter implements
IGreeter {
greeting: string;
greet() {
}
}
}
Greeter.prototype.greet = function ()
{
};
return Greeter;
}());
exports.Greeter = Greeter;

Classes, Modules and Interfaces
Demo

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

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
• TypeScript 2.0 (vNext no release in the near future)

Questions?

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

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

Thank You!

One language to rule them all type script

More Related Content

What's hot

Similar to One language to rule them all type script

More from Gil Fink

Recently uploaded

One language to rule them all type script