ionic framework and typescript

THE SILVER BULLET FOR IONIC1

David Hohl www.fishme.de@fishme2010

Meetup 08.12.2016

http://www.fishme.de/

Technology Evangelist

Meetup 08.12.2016 The Silver Bullet for Ionic1 – David Hohl - www.fishme.de

• Since 1998 web developer• Evangelist for…• Cordova with Ionic• PHP for CMS

• Clients: NDR, Boston Consulting Group, Miele, Blick, Intersport, Update CRM, SPD, Adidas, Atomic, Comscore, Voest Alpine, Asus and more;

#RC – 03/1981

David Hohl

Yes, but not for you!


We want to talk about …


Why we should use Typescript?


• Clean Code• Readable• Better reusable• Less bugs•OOP

I’m not your bug

Clean Code?


• Good Structure• Ease to understand• Codebase• Readable• Class/Function/Var Naming• No scope soup• No root scope soup

I will write Typescript!

I will write Typescript!I will write Typescript!I will write Typescript!

Where can I use Typescript?


• Service• Controller•Directive• Filter

Most common

ngModule.controller(Controller.ID, Controller);

ngModule.directive(Directive.ID, Directive);

ngModule = angular.module(’MobileApp.Application', ['ui.router', 'ionic', 'templates', 'ngMockE2E', 'pascalprecht.translate', 'ngSanitize', 'toastr', 'ngAnimate’]

ngModule.filter(Filter.ID, Filter);

ngModule.service(Service.ID, Service);

Where can I use Typescript?


• Project•Helper

ngModule.run(…)ngModule.config(..)

Angular.run(…)Angular.config(..)

Automate it!


namespace MyProject.Servicenamespace MyProject.Controllernamespace MyProject.Directivenamespace MyProject.Filter

Example with a service_.each(Services, (Service: any) => { ngModule.service(ID, Service);}

TSD – Definition


tsd install angulartics

tsd update –s –o

tsd.json (config)

TSD – Holl(rr)ow(r) Bible?


• Interfaces•Definition

• Important!

private $http: angular.IHttpService,private $location: ng.ILocationService,private $state: ng.ui.IStateService,private $rootScope: ng.IRootScopeService

this.$http(this.requestConfig).then((response: ng.IHttpPromiseCallbackArg<any>) => {….}));

https://palantir.github.io/tslint

TSD – Holl(rr)ow(r) Bible?


•Way out? /* tslint:disable */ - Disable all rules for the rest of the file

/* tslint:enable */ - Enable all rules for the rest of the file

/* tslint:disable:rule1 rule2 rule3... */

/* tslint:disable:semicon, qutemark */

Object not define -> use instead as Array

https://palantir.github.io/tslint

Controller and viewModels 1/3


• Readable•OOP

export class AppController<T> { public scope: ng.IScope; public viewModel: T;

constructor(scope: ng.IScope, ModelType: { new (): T; }) { this.scope = scope; this.viewModel = new ModelType(); this.scope["controller"] = this; this.scope.$on("$ionicView.loaded", _.bind(this.view_loaded, this));this.scope.$on("$ionicView.enter", _.bind(this.view_enter, this));

export class AnimalController extends AppController<ViewModels.AnimalViewModel>{….}



• Readable•OOP

export class AnimalViewModel {

public name: string;public age: number;

public YouNowOlder() { this.age++;}}

Controller… (same like $scope.name = ‘dog’;this.viewModel.name = ’dog’;



ViewModel Animal

Controller Dog Controller Cat

viewModel.YouNowOlder() viewModel.YouNowOlder()



ViewModel Animal

Controller Snake

viewModel.YouNowOlder()

ViewModel Reptile extend ViewModel.Animal



• Create Models with functions•Reuseable! Clean Code! Enjoy it!

<button ng-click=”controller.viewModel.animalYouNowOlder()”> I’m {{viewModel.age}}</button>

Injection?


public static get $inject(): string[] { return [ '$scope', '$rootScope', '$stateParams', Services.Tracking.ID ];}

constructor( $scope: ng.IScope, private $rootScope: IRootScopeService, private $stateParams: ISearchStateParams, private Tracking: Services.Tracking) { super($scope, ViewModels.SearchViewModel);}

Better Code


1) exampleif (animal === ‘dog’)

2) Declare where ever you can!

3) no return? public myAnimal(): void instead of any

4) Example don’t use >any<public myAnimal() : string | boolean { if (myVar) return ‘dog’; If (myVar) return true;}

Some Tipps and Tricks


• Use WebStorm• Use Getters & Setters• Don’t define functions in an interface• Use interface for JSONs or Objects• Use namespaces• Use let instead of var• Create for each Class a new File• Use Static instead of Public if it is possible• Callbacks: use “response => {}” instead of function(response) then

you can use this inside otherwise you have to copy the instance

Beginner Problems


•Which Type?•Where I can find it?•How to include Angular Code in Typescript?•Object not defined like

animal.name use animal[‘name’]

Documentation


THE SILVER BULLET FOR IONIC1

David Hohl www.fishme.de@fishme2010

Meetup 08.12.2016

THANK YOU – ENJOY TYPESCRIPT!

http://www.fishme.de/