Download - Typescript - Object Oriented Approach in JS
![Page 1: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/1.jpg)
TypeScriptOO approach in JS
Piotr Miazga
![Page 2: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/2.jpg)
Agenda• Jak rozpocząłem przygodę z TS• Wprowadzenie do TS• Typy proste, Szablony• Klasy, Interfejsy, Dziedziczenie• Typings/DefinitelyTyped• Przykłady użycia• Za i przeciw• Inne projekty• Q\A
![Page 3: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/3.jpg)
Dwa słowa o mnie Ukrywa się jako PolishDeveloper Programista od 9 lat Przed snem zamiast dobranocki czytam CleanCode
Rajdy to moja pasja Gdy nikt nie patrzy gram w Minecrafta
![Page 4: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/4.jpg)
artytmetyka JSconsole.log(1 + 1); // 2console.log(1 + '1'); // '11'console.log('1' + 1); // '11'console.log('1' + '1'); // '11'
![Page 5: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/5.jpg)
artytmetyka JSconsole.log(1 + 1); // 2console.log(1 + '1'); // '11'console.log('1' + 1); // '11'console.log('1' + '1'); // '11'
console.log(1 - 1); // 0console.log(1 - '1'); // 0console.log('1' - 1); // 0console.log('1' - '1'); // 0
![Page 6: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/6.jpg)
artytmetyka JSconsole.log(1 + 1); // 2console.log(1 + '1'); // '11'console.log('1' + 1); // '11'console.log('1' + '1'); // '11'
console.log(1 - 1); // 0console.log(1 - '1'); // 0console.log('1' - 1); // 0console.log('1' - '1'); // 0
console.log('2' - '1' + '1') => ??console.log('2' - ('1' + '1')) => ??
![Page 7: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/7.jpg)
artytmetyka JSconsole.log(1 + 1); // 2console.log(1 + '1'); // '11'console.log('1' + 1); // '11'console.log('1' + '1'); // '11'
console.log(1 - 1); // 0console.log(1 - '1'); // 0console.log('1' - 1); // 0console.log('1' - '1'); // 0
console.log('2' - '1' + '1') => 11console.log('2' - ('1' + '1')) => -9
![Page 8: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/8.jpg)
WTF cdnconsole.log([4] * [4]); //16console.log([4, 4] * [4, 4]); //Nan
console.log([] * []); //0console.log([] + []); //""
console.log([] * {}); //NaNconsole.log([] + {}); //"[object Object]"
console.log(Array(3) == ',,'); //true
var x = [0];console.log(x == x); //trueconsole.log(x == !x); //true
![Page 9: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/9.jpg)
Czas na historyjkę
a wszystko zaczęło się od….
Ty, patrz - typowany JS, wow
![Page 10: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/10.jpg)
Kolejny język ?! Powolne przejście na Front-end Kod JS robi się coraz większy Kod JS robi się coraz bardziej skomplikowany
OO jest popularne, ES6 też to ma Prototypowanie jest jak battle-axe Ale przecież jest już ES6
![Page 11: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/11.jpg)
TS - czym jesteś Strict superset of Javascript Pierwsza wersja 2012 Jednym z autorów jest Anders Hejlsberg Transpilator Typy,Szablony,Klasy,Moduły,Interfejsy \o/
![Page 12: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/12.jpg)
Instalacja/użycie
npm install -g tsc
tsc file.tstsc —watch file.ts
![Page 13: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/13.jpg)
Let’s code!
Ready ??
![Page 14: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/14.jpg)
Typy proste
enum MessageTypes {'New', 'Read', 'Archived'}
let message: string|string[] = 'abc', count: number = 123, isAvailable: boolean = false, recipientIds: Array<number> = [10, 11, 12], messageIds: number[], type:MessageTypes = MessageTypes.New, transition: 'ease'|'ease-in'|'ease-out', tmp:any;
![Page 15: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/15.jpg)
Funkcje
function triggerError(message:string):void { alert('Error ' + message);}
function add(a:number, b:number):number { return a+b;}//Error:(20, 20) TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
function double(value:number) { return value*2;}
![Page 16: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/16.jpg)
Interfejsyinterface LabelledValue { label: string;}
function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label);}
let obj:LabelledValue;obj = {size: 10, label: "Size 10 Object"};
printLabel(obj);
![Page 17: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/17.jpg)
Parametry opcjonalneinterface MyObject { name: string; size?: number;}
function printMyObject(object:MyObject) { let msg:string = 'Element ' + object.name; if (object.hasOwnProperty('size')) { msg += '(' + object.size + ')'; } console.log(msg);}
let sofa = { name: 'sofa' };printMyObject(sofa);
![Page 18: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/18.jpg)
Klasyclass Greeter {
constructor(private name:string) {} greet() { return `Hello ${this.name}`; }
}
let greeter = new Greeter('world');greeter.greet();
![Page 19: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/19.jpg)
Klasy cdn…class Animal { constructor(protected name: string) {}}
class Rhino extends Animal { constructor() { super("Rhino"); } } class Employee { constructor(private firstName: string) {}}
let animal:Animal = new Animal("Kiwi");let rhino = new Rhino();let employee = new Employee("Bob");
![Page 20: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/20.jpg)
Klasy cdn 2let animal:Animal = new Animal("Kiwi");let rhino = new Rhino();let employee = new Employee("Bob");
animal = rhino;
animal = employee; //main.ts(40,1): error TS2322: Type 'Employee' is not assignable to type 'Animal'.
![Page 21: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/21.jpg)
Real code
Ready ??
![Page 22: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/22.jpg)
Boundary interface
export interface IGetMeterpointStructureResponse {
id: number; identifier: string; type: string; supplyStartDate: Date; meters: Array<IMeter>; isEconomy7: boolean; supplyAddress: IAddress;}
![Page 23: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/23.jpg)
PromisesgetMeterPoints(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((response) => { deferred.resolve(JSON.parse(response)); }).error((reason:Error) => { deferred.reject(reason); }); return deferred.promise;}
![Page 24: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/24.jpg)
RootScopeexport interface IRootScope extends ng.IRootScopeService{ userAccount: UserProfile; juniferAccount : Project.IAccount; errorModal: { visible:boolean; message:string; }; throwError(message:string):void;}
![Page 25: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/25.jpg)
Controllerexport class ErrorModalController {
public static $inject:string[] =[‘$rootScope’];
constructor(private $rootScope:IRootScope) { $rootScope.errorModal = { visible: false, message: null }; $rootScope.throwError = function(msg:string) { $rootScope.errorModal.visible = true; $rootScope.errorModal.message = msg; }; }}
![Page 26: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/26.jpg)
Typings# Install Typings CLI utility.npm install typings --global
# Search for definitions.typings search angular
# Find an available definition (by name).typings search --name react
# Install typingstypings install stripe --save
![Page 27: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/27.jpg)
Czemu nie ES6Wciąż dynamicznie typowany..Brak supportu dla nowych przeglądarek(Babel ?)
ES5 – Grudzień 2009ES6 – Czerwiec 2015ES7 - WIP
TS1.4 – Styczeń 2014TS1.5 – Lipiec 2015TS1.6 – Wrzesień 2015 TS1.7 - Grudzień 2015TS1.8 - Luty 2016
![Page 28: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/28.jpg)
Za i przeciw Działa wszędzie Statyczne typowanie Programowanie defensywne Podejście OO Łatwiejsze UnitTesty Podpowiadanie składni
Learning curve Dodatkowy proces kompilacji Wymaga bindigów które nie zawsze są
![Page 29: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/29.jpg)
Podobne projekty
ATScript Flow (Babel Typecheck) JSX Dart
![Page 30: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/30.jpg)
Linki
http://www.typescriptlang.org/docs/tutorial.html
https://github.com/typings/typings
![Page 31: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/31.jpg)
Q\A
Czas na pytania
![Page 32: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/32.jpg)
Dziękuję za uwagę
Twitter:polishdeveloperSkype:polishdeveloperGitHub:polishdeveloper
![Page 33: Typescript - Object Oriented Approach in JS](https://reader035.vdocuments.pub/reader035/viewer/2022062820/58adeadd1a28abeb2e8b5c7f/html5/thumbnails/33.jpg)