Dr. Bilicki VilmosSzegedi TudományegyetemInformatikai TanszékcsoportSzoftverfejlesztés Tanszék 2. TypeScript/JavaScript

(1)

UNIVERSITY OF SZEGED Department of Software EngineeringSITAS SCIENTIARUM SZEGEDIENSIS

2. TypeScript/JavaScript

Dr. Bilicki Vilmos

Szegedi Tudományegyetem Informatikai Tanszékcsoport

(2)

UNIVERSITY OF SZEGED Department of Software EngineeringIVERSITAS SCIENTIARUM SZEGEDIENSIS

Összefoglaló

4JavaScript Fejlesztés 4Áttekintés

4ES5 4ES6

4TypeScript

(3)

(4)

ECMAscript Múlt

4http://en.wikipedia.org/wiki/ECMAScript

4ECMA: European Computer Manufacturers Association (1961)

4Netscape: Brendan Eich hozta létre 10 nap alatt

■ Mocha, LiveScript, JavaScript

4ECMAScript: ECMA-262 - 1999

4Egy szabvány, több implementáció (hasonló, mint az SQL szabvány és implementációi)

■ Ismert implementációi: JavaScript, Jscript (MS),

(5)

ES5

4Dinamikus programozási nyelv

4Jellemzően kliens-oldali programozásra szánták (pl böngésző)

4Főbb jellemzők:

■ Prototípus alapú

■ Dinamikus típuskezelés

■ First-class függvények (a = function(){})

■ Több paradigmát támogat: objektum-oritentált, imperatív és funkcionális

4Egyes szerkezetek nagyon hasonlítanak a java- hoz, de nem az!

(6)

Prototípus alapú öröklődés

(7)

Dinamikus típuskezelés

(8)

Példa

(9)

ES6, TypeScript

4http://es6-

features.org/#Constants

4https://github.com/lukehoban/

es6features 4ES7(2016)

■ Exp operator

4ES8 (2017)

■ Asynch Functions

4ES9 (2018)

(10)

Környezet

4git 4npm 4gulp 4babel 4eslint

(11)

GIT

4A mai legnépszerűbb verziókezelés

■ Nemlineáris fejlesztés (ágak)

■ Elosztott fejelsztés (saját repo)

■ Nyílt repók (pl.: GitHub)

4.gitingnore

(12)

NPM

4Node.JS csomagkezelő 4node_modules

4packages.json

(13)

GRUNT

4Kötegelt feladatok

(14)

BABEL

4ES5 van telepítve 4Transcompiler

(15)

ESLINT

4Kódolási szabályok betartása 4esLintrc

(16)

Read-Eval-Print-Loop (REPL)

4Node.JS

■ ctrl + c adott parancs

befejezése

■ 2 x ctrl + c Node:JS befejezése

■ …

(17)

JavaScript futtató környezet

(18)

ES5

4Szkóp

4Globális szkóp 4Blokk szkóp

4Változó deklarálás 4Modulok

4Névterek

4Függvények 4Zárványok

4Függvény emelés 4Függvény mint

objektum

4Függvény kifejezés 4This

4IIFE

(19)

Szkóp

4Hierarchikus egységbe zárás

4Láthatóságot, élettartamot szabályozza

■ Futtatási környezet

4Lexikus vs Dinamikus szkóp 4Lexikus szkóp

■ Globális szkóp

■ Blokk szkóp

■ Függvény szkóp

(20)

Globális szkóp

4A szkóp hierarchia alapja

4Amit itt deklarálunk az minden szkópban látszódik

■ Nem célszerű

(21)

Blokk szkóp

4let és const segítségével blokk szkópban deklarálunk változókat

4változók elfedése

(22)

Változó deklarálás

4lexical-scoping – block-scoping

■ let

■ const

4var

(23)

Deklarálás

4let – csak a deklarálás helyétől létezik 4var – adott szkópon belül bárhol létezik

■ emelés - hoisting

(24)

Modulok

4A modulok saját szkóppal bírnak

4Deklaratívak, export/ipmort segítségével kezeljük a függőségeket

4Az osztálybetöltő oldja fel a függőségeket

(25)

Modul feloldás

4A fordítónak meg kell állapítania, hogy az import-ban definiált elemeket honnan

töltse be

4Klasszikus stratégia (relatív) 4Node stratégia

(26)

Modul betöltő

4Értelmezés: Az megvalósítás megvizsgálja a kódot, hibaellenőrzés.

4Betöltés: Rekurzív módon betölti az össze hivatkozott modult

4Linkelés: Minden most betöltött modul a megvalósítás egy modul szkópot hoz létre és oda köti az összes a modulban megadott függőséget (itt jöhet az, hogy egy modulból olyan tagot kellene beimportálni ami ott

nincs exportálva)

4Futási idő: Lefuttatja a kifejezéseket a létrehoztt modulok belsejében

(27)

JS modul rendszer

4Nincs saját szabvány (ES5) 4CommonJS

■ Szinkron (nincs lazy loading)

■ Egy fájl/modul

4Asynchronous Module Definition (AMD)

■ Aszinkron betöltés

4SystemJS (CommonJS + AMD) 4ES2017

■ Szinkron és aszinkron

(28)

Névterek

4A belső modulokat névtereknek nevezzük

(29)

Függvények

4A JavaScript alapja

4Osztályok, információ elrejtés, modulok alapja

4Nevesített 4Anonyom

4Változó elkapás

(30)

Függvények, Zárványok

4 A függvények a definiálási helytől eltérő helyeken is futtathatóak 4 Egyszerű esetben minden függvény globális szkópú és nem

hivatkozik a globális szkópra

4 A modern JS megközelítésben bárhol definiálhatunk függvényeket és ezek változóknak is értékül adhatóak

4 Ilyen célra leginkább closure-t (zárványt) használnak 4 Ahol létrehoztuk ahhoz hozzáfér !!!!!

(31)

Függvény emelés

4Hasonlóan a var változókhoz a függvény

deklarációk is az adott szkóp elejére lesznek rendezve

4TDZ – Temporal Dead Zone

■ A let-tel deklarált változók csak a deklarálás helyétől élnek

■ Probléma a klasszikus van-e ilyen változó kereséssel

(32)

Függvények

4 Elsőosztályú elemek

■ Hivatkozhatunk rá

■ Meghívhatjuk

4 Primitív argumentumokat érték szerint adja át

4 Objektumokat referencia szerint (de egy új változót készít)

4 Nem különbözteti meg a

függvényeket az argumentum lista alapján (undefined ha nincs ilyen)

(33)

Függvények

4Argumentumok destruktúrálása 4Kiterjesztés

4Alapéretlmezett értékek

(34)

Függvény mint objektum paraméter

4Metódus

4This (ha ott hívjuk)

(35)

Függvény kifejezések

4Speciális THIS kezelés

■ call

■ apply

■ bind

(36)

this kontextus

(37)

IIFE

4Immediately Invoked Function Expressions 4A deklarálás helyén azonnal le is fut

4A benne deklarált változók nem láthatóak kívülről

(38)

4JavaScript OO

ES6

4Osztályok 4Objektumok 4Osztályok

függvények 4Prototípus

4Függvény kifejezés 4Objektumok

(39)

JavaScript OOP

4Objektumok – konténerek

■ Tulajdonság listázás

4Dinamikus tulajdonságok – hozzáférés vezérlés

(40)

Osztályok

4A JavaScript függvény és prototípus alapú öröklődéssel kezeli az

újrafelhasználható komponenseket

(41)

objektumok

4Komplex adastruktúrák

■ tulajdonságok (név/érték)

■ dinamikus

(42)

Az osztályok függvények

(43)

Prototípus

4Minden metódusnak van prototípus tulajdonsága 4Az osztály adott példányához tartozó

metódusokat prototípusnak nevezük 4Dinamikus kiosztás

■ A meghívott metódust/adattagot a hierarchia mentén próbálja megtalálni

(44)

Függvény kifejezések

4Nyíl jelölés

■ This mint környezeti változó is továbbadódik

■ Kihagyhatjuk a function szavat

■ Ha egy argumentuma van akkor kihagyhatjuk a

zárójelet

■ Ha a törzs egy kifejezés akkor kihagyhatjuk a kapcsos zárójelet és a return kifejezést

(45)

objektumok

4Number, String, Boolean

4Speciális értékeket tárolnak 4Segédfüggvényeket adnak

(46)

TypeScript

4Típus következtetés 4Interfészek

4Egyszerű típusok 4Számok

4Karekterláncok 4Null, undefined

4Tömbök

4Destruktúrálás 4Szimbólumok 4Mixin

(47)

Egyszerű típusok 1.

4Boolean 4Number 4String

■ Sablonok

(48)

Számok

4Ábrázolás (double)

■ „IEEE-764 double-precision floating-point”

■ 0.1 + 0.2 = 0.30000000000000004

(49)

Karakterláncok

4Többsoros karakterláncok

(50)

Számok és karakterláncok

4Automatikus konverzió

(51)

Karakterláncok

4Unicode szöveg

4Szöveg vs. utasítás

■ escape - \

■ speciális karakterek (\n, \t,\uXXXX…)

4Sablonok

■ Összefűzés

■ Interpoláció

(52)

Egyszerű típusok 2.

4Array 4Tuple

(53)

Egyszerű típusok 3.

4Enum 4Any 4Void

(54)

Egyszerű típusok 4.

4Null és Undefined 4Never

4Típus kényszerítés

(55)

null, undefined

4Speciális típusok

4Valaminek a hiányát jelzik

■ null a programozónak van szánva

■ Undefined a kereterendszernek szól

(56)

Tömbök

4Sorbarendezett elemek halmaza

■ Heterogén

■ Tetszőleges elekészlet

■ Nulla első indexű

(57)

Tömbök használata

4Adott metódusok az eredeti tömböt míg mások egy másolatot adnak vissza

(58)

Metódusok

(59)

Típus következtetés

4Alap következtetés

4Legjobb közös típus (Object) 4Kontextus alapú típus

(60)

Típus kompatibilitás

4A típus kompatbilitás a struktúrális, alak szerinti típusosságon alapul (Java

nominális)

4x akkor kompatibilis y-nal, ha y-nak van legalább az x tagjai is megvannak

(61)

Interfészek

4Typescript: legalább egy tulajdonság megvan (csak az alak számít)

(62)

Destruktúrálás

4Tömb destrúrálás

4Objektum destrúrálás 4Tulajdonság átnevezés 4Szétkenés

(63)

Szimbólumok

4Egyedi jelek

■ Amikor létrehozzuk egyedi

■ Primitív típus

4Jól ismert szimbólumok

(64)

Mixin

4Az OO paradigma mellett egy másik népszerű megközelítés az osztályok kombinálása

(65)

Szigorú mód

4ES5 megengedi az implicit globális változók használatát

■ Ha egy változót elfelejtettünk deklarálni, de használni szeretnénk akkor gyárt egy

globálisat!!!

4A szigorú mód nem engedi meg ezt

■ use strict (szkóp szintű)

(66)

Összefoglaló

4JavaScript Fejlesztés 4Áttekintés

4ES5

4ES6 - TypeScript