TypeScript oktatóanyag: Tudjon meg többet a TypeScript alapjairól

A TypeScript egy erősen tipizált JavaScript szuperkészlet. Ebben a TypeScript oktatóanyagban elmélyülünk és megértjük az alapokat.

A TypeScript egy erősen tipizált szuperhalmaz amely egyszerű JavaScript-re fordít. Használhatja ezt a nyelvet az alkalmazás szintű JavaScript fejlesztéshez. Ez is végrehajtható bármely böngészőben, bármilyen gazdagépen és bármely operációs rendszeren. Ebben a TypeScript oktatóanyagban a következő sorrendben ismerkedünk meg a TypeScript mélységével és megértjük az alapokat:



Bevezetés a TypeScript-be

A TypeScript egy tipikus JavaScript-készlet, amely egyszerű JavaScript-re áll össze. A TypeScript tiszta objektum-orientált osztályokkal, interfészekkel és statikusan beírt programozási nyelvekkel, például C # vagy . Fordítóra van szükség a JavaScript-fájlok összeállításához és létrehozásához. Alapvetően a TypeScript a JavaScript ES6 verziója, néhány további funkcióval.



A TypeScript kódot a fájlba írja be a .ts kiterjesztés majd a fordító segítségével JavaScript-be fordította. Bármelyik kódszerkesztőbe beírhatja a fájlt, és a fordítót telepíteni kell a platformjára. A telepítés után a parancs tsc .ts a TypeScript kódot sima JavaScript fájlba fordítja.

Szintaxis:



var message: string = 'Üdvözlünk az Edurekában!' console.log (üzenet)

Fordításkor a következő JavaScript kódot generálja:

// Gépelõ géppel 1.8.10 var message = 'Üdvözöljük az Edureka-ban!' console.log (üzenet)

A TypeScript jellemzői

jellemzők - gépírás bemutató - edureka

  • Platformok közötti: A TypeScript fordító bármilyen operációs rendszerre telepíthető, mint például Windows, MacOS és Linux.



  • Tárgy-orientált nyelv : A TypeScript olyan szolgáltatásokat nyújt, mint például Osztályok , Interfészek és modulok. Így képes objektum-orientált kódot írni kliens- és szerveroldali fejlesztésre.

  • Statikus típusellenőrzés : A TypeScript statikus gépelést használ, és segíti a típusellenőrzést fordításkor. Így hibákat találhat a kód írása közben a parancsfájl futtatása nélkül.

  • Opcionális statikus gépelés : A TypeScript opcionális statikus gépelést is engedélyez, ha a JavaScript dinamikus gépelését használja.

  • DOM manipuláció : A TypeScript segítségével manipulálhatja a DOM-ot elemek hozzáadásához vagy eltávolításához.

  • ES 6 Jellemzők : A TypeScript tartalmazza a tervezett ECMAScript 2015 (ES 6, 7) legtöbb funkcióját, például osztályt, interfészt, nyílfunkciókat stb.

A TypeScript használatának előnyei

  • A TypeScript az gyors, egyszerű, könnyen megtanulható és bármely böngészőn vagy JavaScript-motoron fut.

  • Ez hasonló nak nek JavaScript és ugyanazt a szintaxist és szemantikát használja.

  • Ez segít a háttér-fejlesztőknek a front-end írásában kód gyorsabban .

  • A TypeScript kód meghívható egy meglévő JavaScript kódot . Emellett a meglévő JavaScript keretrendszerekkel és könyvtárakkal probléma nélkül működik.

  • A Definition fájl .d.ts kiterjesztéssel támogatja a meglévő JavaScript könyvtárakat, például Jquery, D3.js stb. Tehát a TypeScript kód hozzáadható JavaScript könyvtárak típusdefiníciók használata a típusellenőrzés, a kód automatikus kiegészítés és a meglévő dinamikusan beírt JavaScript könyvtárak dokumentációjának előnyeinek kihasználására.

  • Tartalmazza a ES6 és ES7 amelyek olyan ES5 szintű JavaScript motorokban futtathatók, mint a Node.js .

Most, hogy megértette, mi a TypeScript, lépjünk tovább ezzel a TypeScript oktatóanyaggal, és nézzük meg a különböző típusokat.

TypeScript típusok

A Type System a nyelv által támogatott különböző típusú értékeket képviseli. Ellenőrzi a érvényesség a szállított értékek mielőtt tárolják vagy manipulálják őket a program.

Két típusba sorolható, például:

  • Beépített : Ez magában foglalja a számot, a karakterláncot, a logikai értéket, a void-ot, a null-ot és a undefined-et.
  • Felhasználó által meghatározott : Magában foglalja a felsorolásokat (felsorolásokat), osztályokat, interfészeket, tömböket és duplákat.

Most lépjünk tovább ezzel a TypeScript oktatóanyaggal, és tudjunk meg többet a változókról.

TypeScript oktatóanyag: Változók

A változó egy megnevezett hely a memóriában, amelyet értékek tárolására használnak.

A típusú szintaxis a változó deklarálásához a TypeScript-ben tartalmaz egy kettőspontot (:) a változó neve után, amelyet a típus követ. A JavaScripthez hasonlóan a var kulcsszó változó deklarálásához.

Négy lehetőség van, amikor deklarálunk egy változót:

var [azonosító]: [type-annotation] = érték
var [azonosító]: [type-annotation]
var [azonosító] = érték
var [azonosítani]

Példa:

var név: string = 'Százszorszép' var empid: szám = 1001 console.log ('név' + név) console.log ('alkalmazott azonosítója' + empid)

Fordításkor a következő JavaScript kódot generálja:

// Gépelõ géppel 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('név' + név) console.log ('alkalmazott azonosító:' + empid)

Kimenet:

név: Százszorszép
alkalmazott azonosító: 1001

Most térjünk át a TypeScript oktatóanyag következő témájára.

Operátorok

Az operátor segítségével meghatározhatók az adatokon végrehajtandó funkciók. Az operátoroknak nevezett adatokat operandusoknak nevezzük. Különböző típusúak üzemeltetők a TypeScript-ben, például:

  • Számtani operátorok
  • Logikai operátorok
  • Relációs operátorok
  • Bitenkénti operátorok
  • Hozzárendelés operátorok

Számtani operátorok

Operátorok Leírás

Kiegészítés (+)

az operandusok összegét adja vissza

Kivonás (-)

az értékek különbségét adja eredményül

Szorzás (*)

microsoft sql server bemutató kezdőknek

az értékek szorzatát adja vissza

Osztály (/)

osztási műveletet hajt végre, és visszaadja a hányadost

Modulus (%)

osztási műveletet hajt végre, és a maradékot visszaadja

Növekmény (++)

Eggyel növeli a változó értékét

Csökkentés (-)

Csökkenti a változó értékét eggyel

Példa:

var num1: szám = 10 var num2: szám = 2 var res: szám = 0 res = num1 + num2 console.log ('Összeg:' + res) res = num1 - num2 console.log ('Különbség:' + res) res = num1 * num2 console.log ('Termék:' + res)

Kimenet:

Összeg: 12
Különbség: 8
Termék: 20

Logikai operátorok

Operátorok Leírás

ÉS (&&)

Csak akkor tér vissza igazra, ha az összes megadott kifejezés igaz

VAGY (||)

Ez akkor tér vissza igazra, ha a megadott kifejezések közül legalább az egyik igaz

NEM (!)

Visszaadja a kifejezés eredményének inverzét.

Példa:

var avg: szám = 20 var percent: szám = 90 console.log ('Átlag értéke:' + avg + ', százalék értéke:' + százalék) var res: logikai = ((átl.> 50) && (százalék> 80 )) console.log ('(átl.> 50) && (százalék> 80):', res)

Kimenet:

Átlag értéke: 20, százalékos érték: 90
(átl.> 50) && (százalék> 80): hamis

Relációs operátorok

Operátorok Leírás

>

Nagyobb, mint

<

Kevesebb mint

> =

Nagyobb vagy egyenlő

<=

Kisebb vagy egyenlő

==

Egyenlőség

! =

Nem egyenlő

Példa:

var num1: szám = 10 var num2: szám = 7 console.log ('num1 értéke:' + num1) console.log ('num2 értéke:' + num2) var res = num1> num2 console.log ('num1 nagyobb, mint num2: '+ res) res = num1

Kimenet:

A num1 értéke: 10
A num2 értéke: 7
a num1 nagyobb, mint a num2: true
a num1 kisebb, mint a num2: hamis

Bitenkénti operátorok

Operátorok Leírás

Bitenkénti ÉS (&)

logikai ÉS műveletet hajt végre egész argumentumainak mindegyik bitjén.

Bitenkénti VAGY (|)

Logikai VAGY műveletet hajt végre egész argumentumainak mindegyik bitjén.

Bitenként XOR (^)

Boole-féle kizárólagos VAGY műveletet hajt végre egész argumentumainak mindegyik bitjén.

Bitenként NEM (~)

Ez unárikus operátor, és az operandus összes bitjének megfordításával működik.

Bal Shift (<<)

Az első operandus összes bitjét balra mozgatja a második operandusban megadott helyek számával.

Jobb váltás (>>)

A bal operandus értékét jobbra mozgatja a jobb operandus által megadott bitek száma.

Jobb váltás nullával (>>>)

Hasonló a >> operátorhoz, azzal a különbséggel, hogy a bal oldalon eltolt bitek mindig nullaak.

Példa:

var a: szám = 2 // bites prezentáció 10 var b: szám = 3 // bites prezentáció 11 var eredmény eredménye = (a & b) console.log ('(a & b) =>', eredmény) eredmény = ( a | b) console.log ('(a | b) =>', eredmény)

Kimenet:

(a & b) => 2
(a | b) => 3

Feladatkezelők

Operátorok Leírás

Egyszerű hozzárendelés (=)

Értékeket rendel a jobb oldali operandustól a bal oldali operandusig

Hozzáadás és hozzárendelés (+ =)

Hozzáadja a jobb operandust a bal operandushoz, és az eredményt a bal operandushoz rendeli.

Kivonás és hozzárendelés (- =)

Kivonja a jobb operandust a bal operandusból, és az eredményt a bal operandushoz rendeli.

Szorzás és hozzárendelés (* =)

Megszorozza a jobb operandust a bal operandussal, és az eredményt a bal operandushoz rendeli.

Osztás és hozzárendelés (/ =)

Osztja a bal operandust a jobb operandussal, és az eredményt a bal operandushoz rendeli.

Példa:

var a: szám = 12 var b: szám = 10 a = b konzol.log ('a = b:' + a) a + = b konzol.log ('a + = b:' + a) a - = b konzol .log ('a- = b:' + a)

Kimenet:

a = b: 10
a + = b: 20
a - = b: 10

Ezek voltak a különböző üzemeltetők. Most lépjünk tovább a TypeScript bemutatónkkal, és ismerkedjünk meg a hurkokkal.

Hurkok

Előfordulhatnak olyan esetek, amikor egy kódblokkot többször kell végrehajtani. A hurok utasítás lehetővé teszi számunkra, hogy egy állítást vagy állításcsoportot többször is végrehajtsunk.

A TypeScript hurkok az alábbiakba sorolhatók:

A hurok számára

Az hurokhoz egy meghatározott hurok megvalósítása.

Szintaxis:

for (első kifejezés második kifejezés harmadik kifejezés) {// utasításokat többször kell végrehajtani}

Itt az első kifejezés a ciklus megkezdése előtt kerül végrehajtásra. A második kifejezés a ciklus végrehajtásának feltétele. A harmadik kifejezés pedig minden kódblokk végrehajtása után kerül végrehajtásra.

Példa:

for (legyen i = 0 i<2 i++) { console.log ('Execute block statement' + i) }

Kimenet:

Végezze el a 0 blokk utasítást
Végezze el az 1. blokk utasítást

Míg a hurok

A while ciklus minden alkalommal végrehajtja az utasításokat, amikor a megadott feltétel igaznak értékel.

Szintaxis:

while (feltétel kifejezés) {// végrehajtandó kódblokk}

Példa:

legyen i: szám = 1, míg (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Kimenet:

Blokk utasítás végrehajtása 1. sz
2. blokk utasítás végrehajtása

Csináld .. Miközben hurok

A do & hellipwhile ciklus hasonló a while ciklushoz, azzal az eltéréssel, hogy nem először értékeli a feltételt.

Szintaxis:

do {// végrehajtandó kódblokk}} (feltétel kifejezés)

Példa:

hagyd, hogy i: szám = 1 do {console.log ('Az utasítás végrehajtásának blokkolása' + i) i ++} while (i<3)

Kimenet:

Blokk utasítás végrehajtása 1. sz
2. blokk utasítás végrehajtása

Ezeken kívül vannak a break és folytatás utasítások a TypeScript-ben, amelyeket egy hurokban használnak.

Break Statement

A break utasítás arra szolgál, hogy kivegye az irányítást egy konstrukcióból. A break utasítás ciklusban történő használata segít a programnak kilépni a ciklusból.

Példa:

var i: szám = 1 while (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

Kimenet:

Az 5-nek az első többszöröse 1 és 10 között: 5

Nyilatkozat folytatása

A folytatás utasítás kihagyja a következő utasításokat az aktuális iterációban, és visszavezeti a vezérlést a ciklus elejére.

Példa:

var num: number = 0 var count: number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

Kimenet:

A 0 és 10 közötti páratlan értékek száma: 5

Ezek voltak a különböző hurkok a TypeScript-ben. Most lépjünk tovább a TypeScript bemutatónkkal, és értsük meg a funkciókat.

Funkciók

JavaScriptben funkciókat az egyik legfontosabb rész, mivel ez egy funkcionális programozási nyelv. A funkciók biztosítják, hogy a program fenntartható és újrafelhasználható legyen, és olvasható blokkokká szerveződjön. Míg a TypeScript az osztályok és modulok fogalmát biztosítja, a függvények továbbra is a nyelv szerves részét képezik.

Nevezett függvények

Egy megnevezett függvény a függvénynek a megadott néven történő deklarálására és meghívására szolgál.

Példa:

function display () {console.log ('TypeScript Function')} display ()

Kimenet:

TypeScript függvény

Névtelen funkció

Az anonim függvény az, amelyet kifejezésként definiálunk. Ezt a kifejezést egy változó tárolja. Ezeket a függvényeket a változó nevével hívjuk meg, amelyben a függvény tárolva van.

Példa:

let greeting = function () {console.log ('TypeScript Function')} üdvözlet ()

Kimenet:

TypeScript függvény

Nyíl funkció

A zsír nyíl jelöléseket anonim függvényekhez, azaz függvény-kifejezésekhez használják. Más nyelveken lambda-függvényeknek is nevezik őket.

Szintaxis:

(param1, param2, ..., paramN) => kifejezés

A kövér nyíl (=>) használatával nincs szükség a „function” kulcsszó használatára. A paramétereket a szögletes zárójelek adják át, és a függvény kifejezés a göndör zárójelek közé esik.

Példa:

legyen összeg = (x: szám, y: szám): szám => {visszatér x + y} összeg (10, 30) // 40-et ad vissza

Funkció Túlterhelés

A TypeScript a funkciók túlterhelésének koncepcióját adja. Így több funkciója lehet ugyanazzal a névvel, de különböző paramétertípusokkal és visszatérési típussal.

Példa:

függvény add (a: string, b: string): string függvény add (a: szám, b: szám): szám visszatér a + b} add ('Hello', 'Edureka') // visszatér a 'Hello Edureka' add ( 10, 10) // 20-at ad vissza

A fenti példában ugyanaz az add () függvény van két funkció deklarációval és egy függvény megvalósítással. Az első aláírásnak két karakterlánc-paramétere van, míg a második aláírásának két típus-paramétere van.

Ezek a különböző típusú funkciók. Most lépjünk tovább a TypeScript oktatóanyagunkra, és értsük meg a TypeScript karaktersorozatait.

TypeScript oktatóanyag: Karakterláncok

Az egy másik primitív adattípus, amelyet a szöveges adatok tárolására használnak. A karakterláncokat egyetlen idézőjel vagy dupla idézőjel veszi körül.

hogyan használjuk a c ++ sort

Szintaxis:

var var_name = új karakterlánc (karakterlánc)

A String objektumban különböző módszerek állnak rendelkezésre, például:

  • Építész - Visszaadja az objektumot létrehozó String függvényt
  • Hossz - Ez adja vissza a karakterlánc hosszát
  • Prototípus - Ez a tulajdonság lehetővé teszi tulajdonságok és módszerek hozzáadását egy objektumhoz

Példa:

let name = new karakterlánc ('Üdvözöljük az Edureka oldalán!') console.log ('Üzenet:' + név) console.log ('Hossz:' + név.hossz)

Kimenet:

Üzenet: Üdvözöljük az Edurekában!
Hossz: 19

Vonós módszerek

A String Object metódusainak listája a következőket tartalmazza:

Módszer Leírás

charAt ()

Visszaadja a karaktert a megadott indexen

charCodeAt ()

Visszaad egy számot, amely jelzi a karakter Unicode értékét az adott indexnél

concat ()

Két karakterlánc szövegét egyesíti, és új karakterláncot ad vissza

indexe()

Visszaadja az indexet a hívó karakterlánc objektumon belül a megadott érték első előfordulásakor

lastIndexOf ()

Visszaadja az indexet a megadott érték utolsó előfordulásának hívó String objektumán belül

mérkőzés()

Egy szabályos kifejezés és egy karaktersorozat illesztésére szolgál

localeCompare ()

Számot ad vissza, amely jelzi, hogy egy referencia karakterlánc rendezési sorrendben érkezik-e az előtte vagy utána, vagy megegyezik-e az adott karakterlánccal

keresés()

Ez egy szabályos kifejezés és egy megadott karakterlánc közötti egyezés keresését hajtja végre

cserélje ()

Használható a szabályos kifejezés és a karakterlánc közötti egyezés keresésére, és az illesztett alszöveg új alfejlettel való helyettesítésére

szelet()

Kivonja a karakterlánc egy szakaszát, és új karakterláncot ad vissza

hasított()

Felosztja a String objektumot stringek tömbjére azáltal, hogy elválasztja a karakterláncot alsávokká

szubsztrátum ()

Visszaadja a karakterláncokat a megadott helyen kezdődő karakterláncban a megadott számú karakteren keresztül

szubsztring ()

A karaktereket egy karakterláncban adja vissza két index között a karakterláncba

toLocaleLowerCase ()

A karakterláncon belüli karaktereket kisbetűvé konvertáljuk, miközben tiszteletben tartjuk az aktuális területi beállításokat

toLocaleUpperCase ()

A karakterláncon belüli karakterek nagybetűvé konvertálódnak, figyelembe véve az aktuális területi beállításokat

toLowerCase ()

Visszaadja a hívó karakterláncot kisbetűvé konvertálva

toUpperCase ()

Visszaadja a hívó karakterláncot nagybetűvé konvertálva

toString ()

A megadott objektumot reprezentáló karakterláncot ad vissza

értéke()

Visszaadja a megadott objektum primitív értékét

Példa:

let str: string = 'Welcome to Edureka' str.charAt (0) // return 'w' str.charAt (2) // return 'l' 'Welcome to Edureka'.charAt (2)' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // visszatér az 'welcomeEdureka' str1.concat ('', str2) // 'welcome Edureka' str1.concat-t adja vissza ('' ') // visszatér a' welcome to 'címre

Most, hogy ismeri a karakterláncokat, lépjünk tovább ezzel a TypeScript oktatóanyaggal és értsük meg a tömböket.

Tömbök TypeScript-ben

An sor egy speciális adattípus, amely különféle adattípusok több értékét tárolja egymás után egy speciális szintaxis segítségével. A tömb elemeket egy egyedi egész szám azonosítja, amelyet az elem indexének vagy indexének hívnak.

Szintaxis:

var array_name [: adattípus] // deklaráció array_name = [val1, val2, valn ..] // inicializálás

Példa:

let nevek: tömb nevek = ['John', 'Daisy', 'Rachel'] let azonosítók: tömb azonosítók = [101, 700, 321]

Tömb módszerek

Itt található a különféle Array módszerek listája, amelyek különböző célokra használhatók:

Módszer Leírás

szűrő()

Új tömböt hoz létre a tömb összes elemével, amelyre a megadott szűrési függvény igaz

minden()

Visszaadja az igaz értéket, ha a tömb minden eleme megfelel a megadott tesztfunkciónak

concat ()

Visszaad egy új tömböt, amely e tömbből áll, összekapcsolva más tömbökkel

indexe()

Visszaadja a tömbben lévő elem első vagy legkisebb indexét, amely megegyezik a megadott értékkel

az egyes()

Meghív egy függvényt a tömb minden eleméhez

csatlakozik()

A tömb összes elemét karaktersorozatba kapcsolja

lastIndexOf ()

Visszaadja a tömb egyik elemének utolsó vagy legnagyobb indexét, amely megegyezik a megadott értékkel

térkép()

Új tömböt hoz létre a kapott függvény meghívásának eredményeivel a tömb minden elemén

nyom()

Hozzáad egy vagy több elemet egy tömb végéhez, és visszaadja a tömb új hosszát

pop ()

Eltávolítja az utolsó elemet egy tömbből, és visszaadja azt

csökkenteni ()

Alkalmazzon egy függvényt egyszerre a tömb két értékével szemben balról jobbra, hogy egyetlen értékre redukáljuk

reducRight ()

Alkalmazzon egy függvényt egyszerre a tömb két értékével szemben jobbról balra, hogy egyetlen értékre redukáljuk

fordított()

Megfordítja a tömb elemeinek sorrendjét

váltás()

Eltávolítja az első elemet egy tömbből, és visszaadja azt

szelet()

Kivonat egy tömb egy részét és új tömböt ad vissza

néhány()

Visszaadja az igaz értéket, ha ennek a tömbnek legalább egy eleme megfelel a megadott tesztfunkciónak

fajta()

Rendezi egy tömb elemeit

toString ()

A tömböt és annak elemeit reprezentáló karakterláncot ad vissza

toldás ()

Elemeket ad hozzá és / vagy eltávolít egy tömbből

váltás ()

Hozzáad egy vagy több elemet egy tömb elejéhez, és visszaadja a tömb új hosszát

Példa:

var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( név.pop ()) // output: Tara név.push ('Rachel') konzol.log (név) // output: ['John', 'Daisy', 'Rachel']

Most lépjünk tovább ezzel a TypeScript oktatóanyaggal, és ismerkedjünk meg az interfészekkel.

TypeScript interfészek

Az interfész olyan struktúra, amely meghatározza a szerződést az alkalmazásban. Meghatározza a követendő osztályok szintaxisát. Csak a tagok nyilatkozatát tartalmazza, és a tagok meghatározása a levezetõ osztály feladata.

Példa:

felület Employee {empID: szám empName: karakterlánc getSalary: (szám) => szám // nyíl függvény getManagerName (szám): karakterlánc}

A fenti példában a Munkavállaló felület két tulajdonságot tartalmaz empID és empName . Tartalmaz egy módszer deklarációt is getSalaray egy an használatával nyíl funkció amely egy számparamétert és egy számvisszatérést tartalmaz. Az getManagerName metódust normál függvény használatával deklaráljuk.

Gépelt Osztályok

A TypeScript olyan osztályokat vezetett be, amelyek kihasználhatják az objektumorientált technikák előnyeit, mint például a beágyazás és az absztrakció. A TypeScript-osztályt a TypeScript-fordító egyszerű JavaScript-függvényekké állítja össze, hogy platformokon és böngészőkön keresztül működjön.

Egy osztály a következőket tartalmazza:

  • Építész
  • Tulajdonságok
  • Mód

Példa:

class Employee {empID: szám empName: karakterlánc-konstruktor (ID: szám, név: string) {this.empName = név this.empID = ID} getSalary (): szám {return 40000}}

Öröklés

A TypeScript támogatja Öröklés mivel egy program képessége új osztályok létrehozása egy meglévő osztályból. Az újabb osztályok létrehozására kibővített osztályt szülőosztálynak vagy szuperosztálynak nevezik. Az újonnan létrehozott osztályokat gyermek- vagy alosztályoknak hívják.

Egy osztály az „extends” kulcsszóval öröklik egy másik osztálytól. A gyermekosztályok az összes tulajdonságot és módszert öröklik, kivéve a magán tagokat és a konstruktorokat a szülő osztályból. De a TypeScript nem támogatja a többszörös öröklést.

Szintaxis:

osztály gyermek_osztály_neve kiterjeszti a szülő_osztály_nevét

Példa:

osztály Személy {név: karakterlánc-szerkesztő (név: karakterlánc) {this.name = név}} osztály Munkavállaló kiterjeszti Személy {empID: szám konstruktor (empID: szám, név: karakterlánc) {szuper (név) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Név = Jason, munkavállalói azonosító = 701

Most, hogy tud az osztályokról, lépjünk tovább ezzel a TypeScript oktatóanyaggal, és ismerkedjünk meg az objektumokkal.

Objektumok a TypeScript-ben

Az objektum olyan példány, amely más kulcs-érték párokat tartalmaz. Az értékek lehetnek skaláris értékek vagy függvények, vagy akár más objektumok tömbjei is.

Szintaxis:

var objektumnév = {kulcs1: 'érték1', // skaláris értékkulcs2: 'érték', kulcs3: függvény () {// függvények}, kulcs4: ['tartalom1', 'tartalom2']

Egy objektum tartalmazhat skaláris értékeket, függvényeket és struktúrákat, például tömböket és tömböket.

Példa:

var person = {keresztnév: 'Danny', vezetéknév: 'Zöld'} // hozzáférés az objektumértékekhez console.log (person.firstname) console.log (person.lastname)

Fordításkor ugyanazt a kódot generálja a JavaScript-ben.

Kimenet:

Danny
Zöld

Ezek voltak a TypeScript különböző fontos elemei. Most folytassuk ezt a TypeScript oktatóanyagot, és nézzünk meg egy példát a használati eset megértéséhez.

TypeScript oktatóanyag: Használat

Itt megtudhatjuk, hogyan lehet konvertálni egy létezőt a TypeScript-hez.

Amikor lefordítunk egy TypeScript fájlt, akkor az elkészíti a megfelelő JavaScript fájlt ugyanazzal a névvel. Itt meg kell győződnünk arról, hogy a bemenetként működő eredeti JavaScript fájlunk nem lehet ugyanabban a könyvtárban, hogy a TypeScript ne írja felül azokat.

A JavaScript-ről a TypeScript-re történő áttérés a következő lépéseket tartalmazza:

1. Adja hozzá a projekthez a tsconfig.json fájlt

Hozzá kell adnia egy tsconfig.json fájlt a projekthez. A TypeScript egy tsconfig.json fájlt használ a projekt fordítási beállításainak kezeléséhez, például hogy mely fájlokat szeretné felvenni és kizárni.

{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}

2. Integráljon egy build eszközzel

A legtöbb JavaScript-projekt integrált építési eszközzel rendelkezik, például gulp vagy webpack. A projekteket a webpack segítségével a következő módszerekkel integrálhatja:

  • Futtassa a következő parancsot a terminálon:
$ npm install awesome-typcript-loader source-map-loader

A webcsomag-integrációban a awesome-typcript-loader-t és a source-map-loader-t kombinálva használja a forráskód könnyebb hibakeresését.

  • Másodszor egyesítse a module config tulajdonságot a webpack.config.js fájlba a betöltők bevonásával.

3. Helyezze az összes .js fájlt .ts fájlokba

Ebben a lépésben át kell neveznie a .js fájlt .ts fájlra. Hasonlóképpen, ha a fájl JSX-t használ, át kell neveznie .tsx-re. Most, ha megnyitjuk azt a fájlt egy olyan szerkesztőben, amely támogatja a TypeScript-et, egyes kódok fordítási hibákat okozhatnak. Tehát a fájlok egyesével történő konvertálása lehetővé teszi a fordítási hibák könnyebb kezelését. Ha a TypeScript fordítási hibát talál az átalakítás során, akkor is képes lefordítani a kódot.

4. Ellenőrizze a hibákat

A js fájl ts fájlba történő áthelyezése után azonnal a TypeScript megkezdi a kód ellenőrzését. Tehát diagnosztikai hibákat kaphat a JavaScript-kódban.

5. Használjon harmadik féltől származó JavaScript könyvtárakat

A JavaScript projektek harmadik féltől származó könyvtárakat használnak vagy Lodash. A fájlok fordításához a TypeScript-nek ismernie kell a könyvtárakban található összes objektum típusát. A JavaScript könyvtárakhoz tartozó TypeScript típusdefiníciós fájlok már elérhetők a DefinitelyTyped oldalon. Tehát nincs szükség külső telepítésre. Csak azokat a típusokat kell telepítenie, amelyeket a projektünkben használnak.

A jQuery esetében telepítheti a definíciót:

$ npm install @ type / jquery

Ezután hajtsa végre a módosításokat a JavaScript-projekten, futtassa a build eszközt. Most meg kell fordítania a TypeScript projektet egyszerű JavaScript-be, amely a böngészőben futtatható.

Ezzel a TypeScript oktatóanyag végére értünk. Remélem, megértette a TypeScript összes fontos elemét.

Nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k segítségével, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.

Van egy kérdésünk? Kérjük, említse meg a „TypeScript Tutorial” megjegyzés szakaszában, és mi kapcsolatba lépünk Önnel.