Typescript - why it's awesome

TypeScript
and why it's so awesome !!!
by polishdeveloper

Agenda
a bit about myself
getting started with TS
types and generics
classes and inheritance
DefinitelyTyped
real code example
pros and cons
other projects like TS

A bit about me

Hides under PolishDeveloper nick

Software dev for over 8yr

Reads CleanCoding for good sleep

Loves car racing, drifter for 3yr

When no one is looking plays minecraft

Another language – why ?

Slow shift to frontend

JS codebase gets bigger everyday

OO is very popular

JS getting more complex

Prototyping is like battleaxe

Everyone wants to write JS

There is ES6 already

Story time
Look, I've found a typed Javascript

Getting there

Strict superset of Javascript

First public version in October 2012

Created by Anders Hejlsberg

It's a transpiler

Types,Generics,Classes,Modules,Interfaces o/

Types
enum MessageTypes {'New', 'Read', 'Archived'};
var message: string|string[] = 'abc',
count: number = 123,
isAvailable: boolean = false,
recipientIds: Array<number> = [10, 11, 12],
type:MessageTypes = MessageTypes.New,
tmp:any;

Functions
function triggerError(message:string):void {
alert('Error ' + message);
}
function square(value:number):number {
return value*value;
}

Interfaces
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
var myObj = <LabelledValue>{};
var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

Function types
interface SearchFunc {
(source: string, subString: string): boolean;
}
var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
var result = source.search(subString);
return result == -1 ? false : true;
};

Extending interfaces
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
var square = <Square>{
color: 'blue',
sideLength: 10,
penWidth: 5.0
};

Optional properties
interface MyObject {
name: string;
size?: number;
}
function printMyObject(object:MyObject) {
var msg:string = 'Element ' + object.name;
if (object.size)
msg += '(' + object.size + ')';
console.log(msg);
}
var sofa = {name:'sofa'};
printMyObject(sofa);

Classes
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");

Extending classes
class Animal {
private name:string;
constructor(x:Person);
constructor(n: string) { this.name = n; }
}
class Rhino extends Animal {
constructor() { super("Rhino"); }
}
class Employee {
private firstname:string;
constructor(n: string) { this.name = n; }
}
var animal:Animal = new Animal("Kiwi");
var rhino = new Rhino();
var employee = new Employee("Bob");

Classes cdn
var animal:Animal = new Animal("Kiwi");
var rhino = new Rhino();
var employee = new Employee("Bob");
animal = rhino;
animal = employee; //fail

Mixins
class Disposable {
isDisposed: boolean;
dispose() { this.isDisposed = true; }
}
class Activatable {
isActive: boolean;
activate() { this.isActive = true; }
deactivate() { this.isActive = false; }
}
class MyObject implements Disposable, Activatable {
...
}
var x = new MyObject();
x.activate();

Some Extras
function log(message:string, ...args:string[]) {
console.log(message, args);
}
setTimeout(()=>{console.log('hello');}, 500);
callback(seconds=>{
console.log('done in ' + seconds + 's')
});

DefinitelyTyped
npm install tsd -g
tsd query angular
tsd install mocha –save
in app point to it :
/// <reference path='typing/tsd.d.ts' />

Lets see some real code
Ready ?

Boundary interface
export interface IGetMeterpointStructureResponse {
id: number;
identifier: string;
type: string;
supplyStartDate: Date;
meters: Array<IMeter>;
isEconomy7: boolean;
supplyAddress: IAddress;
}

Service with promise
getMeterPoints(account: Project.IAccount)
:ng.IPromise<Project.IGetMeterpointsResponse> {
var deferred = this.$q.defer(),
link = this.config.getAPILink('id', {id: account.id});
this.$http.get(link).success(function(response){
deferred.resolve(response);
}).error(function(reason:Error) {
deferred.reject(new Error(reason.message));
});
return deferred.promise;
}

Stats directive
export class StatsOn implements ng.IDirective {
public restrict: string = 'A';
public replace: boolean = false;
public link: (s: ng.IScope, e: ng.IAugmentedJQuery, a: ng.IAttributes) => void;
constructor(statsService:StatsService) {
StatsOn.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
if (typeof attrs['statsOn'] == 'undefined')
return;
element.on(attrs['statsOn'], function () {
var statName = attrs['statsEvent'];
if (statName == false)
statName = 'User '+attrs['statsOn']+'ed on "'+element.text() + '"';
var data = ...;
statsService.track(statName, data);
});
};
}
public static Factory(): ng.IDirectiveFactory {
var directive: ng.IDirectiveFactory =
(ss:StatsService) => new StatsOn(ss);
directive['$inject'] = ['StatsService'];
return directive;
}
}

Provider
export class UUIDProvider implements ng.IServiceProvider
{
private EXPIRATION = 7200000; //lets do two hours
private FORMAT = 'xxxxxxxx-xxxx-4xxx-yxxx';
private storage:IUUIDStorage;
private uuid:string;
// Provider's factory function
public $get($cookies) : IUUIDService {
this.uuid = this.warmup($cookies);
return {
get: () => { return this.uuid; },
prolong: () => { this.storage.set(this.uuid, this.calculateExpiration(new Date())); }
};
...
}

Controller
export class ErrorModalController {
public static $inject:Array<string> = ['$rootScope'];
constructor(private $rootScope:IRootScope) {
$rootScope.errorModal = {
visible: false,
message: null
};
$rootScope.throwError = function(message:string) {
$rootScope.errorModal.visible = true;
$rootScope.errorModal.message = message;
};
}
}

Why not ES6 ?
It's still dynamically typed...
Not supported in old browsers (Babel ?)
ES5 – Dec 2009
ES6 – June 2015
ES7 - ???
TS1.4 – January 2014
TS1.5 – July 2015
TS1.6 – Sept 2015
TS1.7 - ???

Pros&Cons

Works everywhere

Static Typing (if you like it)

Defensive programming

Real OO approach

Much easier to write UnitTests

Autocomplete in supported IDEs

Learning curve

Extra compilation stage

Requires bindings – Sometimes you have to write your

Other projects like TS

ATScript

Flow

JSX

Dart

Resources
http://www.typescriptlang.org/Handbook
http://definitelytyped.org/

Hugs time
Thank you!
o/
Twitter:polishdeveloper
Skype:polishdeveloper
GitHub:polishdeveloper

Typescript - why it's awesome

More Related Content

What's hot (20)

Viewers also liked (12)

Similar to Typescript - why it's awesome (20)

Recently uploaded (20)

Typescript - why it's awesome

Editor's Notes