TypeScript-opetusohjelma: Tieto TypeScriptin perusteista



TypeScript on vahvasti kirjoitettu JavaScriptin superset. Tässä TypeScript-oppaassa tutustumme syvyyteen ja ymmärrämme perusasiat.

TypeScript on vahvasti kirjoitettu superset joka kääntyy tavalliseen JavaScriptiin. Voit käyttää tätä kieltä sovellustason JavaScript-kehitykseen. Lisäksi se voidaan suorittaa missä tahansa selaimessa, missä tahansa isännässä ja missä tahansa käyttöjärjestelmässä. Tässä TypeScript-opetusohjelmassa käsittelemme TypeScriptin syvyyttä ja ymmärrämme perusasiat seuraavassa järjestyksessä:

TypeScriptin esittely

TypeScript on kirjoitettu JavaScriptin superset, joka kääntyy tavalliseksi JavaScriptiksi. TypeScript on puhdas olio-suuntautunut luokkiin, rajapintoihin ja staattisesti kirjoitettuihin ohjelmointikieliin, kuten C # tai . Se vaatii kääntäjän kääntämään ja luomaan JavaScript-tiedostossa. Pohjimmiltaan TypeScript on JavaScriptin ES6-versio, jossa on joitain lisäominaisuuksia.





TypeScript-koodi kirjoitetaan tiedostoon, jossa on .ts-laajennus ja sitten käännetty JavaScriptiksi kääntäjän avulla. Voit kirjoittaa tiedoston mihin tahansa koodieditoriin, ja kääntäjä on asennettava käyttöjärjestelmällesi. Asennuksen jälkeen komento tsc .ts kääntää TypeScript-koodin tavalliseksi JavaScript-tiedostoksi.

Syntaksi:



var message: string = 'Tervetuloa Edurekaan!' console.log (viesti)

Käännettäessä se luo seuraavan JavaScript-koodin:

// Luonut konekirjoitus 1.8.10 var message = 'Tervetuloa Edurekaan!' console.log (viesti)

TypeScriptin ominaisuudet

ominaisuudet - konekirjoituksen opas - edureka

  • Alustojen välinen: TypeScript-kääntäjä voidaan asentaa mihin tahansa käyttöjärjestelmään, kuten Windows, MacOS ja Linux.



  • Kohdekeskeinen kieli : TypeScript tarjoaa ominaisuuksia, kuten Luokat , Liitännät ja moduulit. Siten se voi kirjoittaa objektipohjaista koodia sekä asiakas- että palvelinpuolen kehitykseen.

  • Staattinen tyyppitarkistus : TypeScript käyttää staattista kirjoittamista ja auttaa tyyppitarkistusta kääntöhetkellä. Näin voit löytää virheitä kirjoittaessasi koodia suorittamatta komentosarjaa.

  • Valinnainen staattinen kirjoittaminen : TypeScript sallii myös valinnaisen staattisen kirjoittamisen, jos käytät dynaamista JavaScript-kirjoittamista.

  • DOM-manipulointi : Voit käyttää TypeScript-tiedostoa DOM: n manipulointiin elementtien lisäämiseen tai poistamiseen.

  • ES 6 Ominaisuudet : TypeScript sisältää suurimman osan suunnitellun ECMAScript 2015: n (ES 6, 7) ominaisuuksista, kuten luokka, käyttöliittymä, nuolitoiminnot jne.

TypeScriptin käytön edut

  • TypeScript on nopea, yksinkertainen, helppo oppia ja toimii millä tahansa selaimella tai JavaScript-moottorilla.

  • se on samanlainen että JavaScript ja käyttää samaa syntaksia ja semantiikkaa.

  • Tämä auttaa taustakehittäjiä kirjoittamaan käyttöliittymän koodaa nopeammin .

  • TypeScript-koodia voidaan kutsua olemassa oleva JavaScript-koodi . Se toimii myös olemassa olevien JavaScript-kehysten ja kirjastojen kanssa ilman ongelmia.

  • Definition-tiedosto .d.ts-laajennuksella tukee olemassa olevia JavaScript-kirjastoja, kuten Jquery, D3.js Joten, TypeScript-koodi voi lisätä JavaScript-kirjastot käyttämällä tyyppimäärityksiä hyödyntämään tyyppitarkistuksen, koodin automaattisen täydennyksen ja dokumentaation etuja olemassa olevissa dynaamisesti kirjoitetuissa JavaScript-kirjastoissa.

  • Se sisältää ominaisuuksia ES6 ja ES7 joita voidaan käyttää ES5-tason JavaScript-moottoreissa, kuten Node.js .

Nyt kun olet ymmärtänyt, mikä on TypeScript, siirrymme eteenpäin tällä TypeScript-oppaalla ja katsomme erilaisia ​​tyyppejä.

TypeScript-tyypit

Tyyppijärjestelmä edustaa kielen tukemia erityyppisiä arvoja. Se tarkistaa pätevyys mukana toimitetusta arvot ennen kuin ohjelma tallentaa tai käsittelee niitä.

Se voidaan luokitella kahteen tyyppiin, kuten:

  • Sisäänrakennettu : Tähän sisältyy numero, merkkijono, totuusarvo, void, null ja undefined.
  • Käyttäjän määrittelemä : Se sisältää luettelot (luettelot), luokat, rajapinnat, taulukot ja kaksinkertaisen.

Siirrytään nyt tähän TypeScript-oppaaseen ja ymmärretään lisää muuttujista.

TypeScript-opas: Muuttujat

Muuttuja on nimetty tila muistissa, jota käytetään arvojen tallentamiseen.

Tyyppisyntaksi muuttujan julistamiseksi TypeScript sisältää kaksoispisteen (:) muuttujan nimen jälkeen, jota seuraa sen tyyppi. Samanlainen kuin JavaScript, käytämme var avainsana ilmoittaaksesi muuttujan.

Muuttujaa ilmoitettaessa on neljä vaihtoehtoa:

var [tunniste]: [type-annotation] = arvo
var [tunniste]: [tyyppimerkintä]
var [tunniste] = arvo
var [tunnistaa]

Esimerkki:

var nimi: string = 'Päivänkakkara' var empid: numero = 1001 console.log ('nimi' + nimi) console.log ('työntekijän tunnus' + empid)

Käännettäessä se luo seuraavan JavaScript-koodin:

// Luotu konekirjoituksella 1.8.10 var name = 'Päivänkakkara' var empid = 1001 console.log ('nimi' + nimi) console.log ('työntekijän tunnus:' + empid)

Tuotos:

nimi: Daisy
työntekijän tunnus: 1001

Siirrytään nyt TypeScript-opetusohjelmamme seuraavaan aiheeseen.

Operaattorit

Operaattoria käytetään määrittelemään toiminnot, jotka suoritetaan tiedoille. Tietoja, joilla operaattorit työskentelevät, kutsutaan operandeiksi. On olemassa erilaisia operaattorit TypeScript-muodossa, kuten:

  • Aritmeettiset operaattorit
  • Loogiset operaattorit
  • Suhteelliset operaattorit
  • Bit-operaattorit
  • Tehtäväoperaattorit

Aritmeettiset operaattorit

Operaattorit Kuvaus

Lisäys (+)

palauttaa operandien summan

Vähennyslasku (-)

palauttaa arvojen eron

Kertolasku (*)

palauttaa arvojen tulon

Jaosto (/)

suorittaa jako-operaation ja palauttaa osamäärän

Moduuli (%)

suorittaa jako-operaation ja palauttaa loput

Lisäys (++)

Lisää muuttujan arvoa yhdellä

Vähennys (-)

Vähentää muuttujan arvoa yhdellä

Esimerkki:

var num1: numero = 10 var num2: numero = 2 var res: numero = 0 res = num1 + num2 console.log ('Summa:' + res) res = num1 - num2 console.log ('Ero:' + res) res = num1 * num2 console.log ('Tuote:' + res)

Tuotos:

Summa: 12
Ero: 8
Tuote: 20

Loogiset operaattorit

Operaattorit Kuvaus

JA (&&)

Se palauttaa tosi vain, jos kaikki määritetyt lausekkeet palauttavat tosi

TAI (||)

Tämä palauttaa arvon tosi, jos ainakin yksi määritetyistä lausekkeista palaa tosi

EI (!)

Se palauttaa lausekkeen tuloksen käänteisen arvon.

Esimerkki:

var avg: numero = 20 var percent: numero = 90 console.log ('Keskiarvon arvo:' + avg + ', prosentin arvo:' + prosenttiosuus) var res: looginen = ((keskiarvo> 50) && (prosenttiosuus> 80) )) console.log ('(keskiarvo> 50) && (prosenttiosuus> 80):', res)

Tuotos:

Keskiarvon arvo: 20, prosenttiosuuden arvo: 90
(keskiarvo> 50) && (prosenttiosuus> 80): väärä

Suhteelliset operaattorit

Operaattorit Kuvaus

>

Suurempi kuin

<

Vähemmän kuin

kuinka perustaa php

> =

Suurempi tai yhtä suuri kuin

<=

Pienempi tai yhtä suuri kuin

==

Tasa-arvo

! =

Ei tasa-arvoinen

Esimerkki:

var num1: numero = 10 var num2: numero = 7 console.log ('num1: n arvo:' + num1) console.log ('num2: n arvo:' + num2) var res = num1> num2 konsoli.log ('num1 suurempi kuin num2: '+ res) res = num1

Tuotos:

Numeron1 arvo: 10
Numero2: 7
num1 suurempi kuin num2: tosi
num1 pienempi kuin num2: väärä

Bit-operaattorit

Operaattorit Kuvaus

Bittikohtaisesti JA (&)

suorittaa loogisen JA-operaation kullekin sen kokonaislukuargumentin bitille.

Bittiä TAI (|)

Se suorittaa Boolen TAI -operaation kullekin kokonaislukuargumenttin bitille.

Bitteittäin XOR (^)

Se suorittaa Boolen yksinoikeuden TAI-operaation kullekin kokonaisluvun argumenttinsa bitille.

Bittikohtaisesti EI (~)

Tämä on unaarinen operaattori ja toimii kääntämällä kaikki bitit operandissa.

Vasen vaihtonäppäin (<<)

Se siirtää kaikki ensimmäisen operandin bitit vasemmalle toisessa operandissa määritetyn paikkamäärän verran.

Oikea vaihto (>>)

Vasemman operandin arvoa siirretään oikealle oikean operandin määrittämällä bittimäärä.

Oikea vaihto nollalla (>>>)

Se on samanlainen kuin >> -operaattori, paitsi että vasemmalla siirretyt bitit ovat aina nollia.

Esimerkki:

var a: numero = 2 // Bittiesitys 10 var b: numero = 3 // Bittiesitys 11 var-tuloksen tulos = (a & b) konsoli.log ('(a & b) =>', tulos) tulos = ( a | b) console.log ('(a | b) =>', tulos)

Tuotos:

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

Tehtäväoperaattorit

Operaattorit Kuvaus

Yksinkertainen tehtävä (=)

Määrittää arvot oikeanpuoleisesta operandista vasemmanpuoleiseen operandiin

Lisää ja määritä (+ =)

Se lisää oikean operandin vasempaan operandiin ja osoittaa tuloksen vasempaan operandiin.

Vähennä ja määritä (- =)

Se vähentää oikean operandin vasemmasta operandista ja osoittaa tuloksen vasempaan operandiin.

Kertominen ja osoittaminen (* =)

Se kertoo oikean operandin vasemman operandin kanssa ja osoittaa tuloksen vasemmalle operandille.

Jaa ja määritä (/ =)

Se jakaa vasemman operandin oikeaan operandiin ja osoittaa tuloksen vasempaan operandiin.

Esimerkki:

var a: numero = 12 var b: numero = 10 a = b konsoli.log ('a = b:' + a) a + = b konsoli.log ('a + = b:' + a) a - = b konsoli .log ('a- = b:' + a)

Tuotos:

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

Nämä olivat eri toimijoita. Siirrytään nyt TypeScript-opetusohjelmamme kanssa ja opitaan silmukoista.

Silmukat

Joissakin tilanteissa koodilohko on suoritettava useita kertoja. A silmukka lause antaa meille mahdollisuuden suorittaa lause tai lausekeryhmä useita kertoja.

TypeScript-silmukat voidaan luokitella seuraavasti:

Loopille

silmukalle on tietyn silmukan toteutus.

Syntaksi:

for (ensimmäinen lauseke toinen lauseke kolmas lauseke) {// käskyt suoritetaan toistuvasti}

Tässä ensimmäinen lauseke suoritetaan ennen silmukan alkua. Toinen lauseke on silmukan suorituksen ehto. Ja kolmas lauseke suoritetaan jokaisen koodilohkon suorittamisen jälkeen.

Esimerkki:

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

Tuotos:

Suorita lohkolauseke 0
Suorita lohkolauseke 1

Vaikka silmukka

While-silmukka suorittaa ohjeet joka kerta, kun määritetty ehto arvioi tosi.

Syntaksi:

while (ehto lauseke) {// suoritettava koodilohko}

Esimerkki:

olkoon i: luku = 1 kun (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

Tuotos:

Lausekkeen toteutus nro 1
Lausekkeen toteutus nro 2

Tee..Silmukan aikana

Do & hellipwhile -silmukka on samanlainen kuin while-silmukka, paitsi että se ei arvioi ehtoa ensimmäistä kertaa, kun silmukka suoritetaan.

Syntaksi:

tee {// koodilohko suoritettavaksi} while (ehto lauseke)

Esimerkki:

anna i: numero = 1 tee {console.log ('Estä käskyn suoritusnumero' + i) i ++} kun (i<3)

Tuotos:

Lausekkeen toteutus nro 1
Lausekkeen toteutus nro 2

Näiden lisäksi on olemassa keskeytys- ja jatko-lauseita TypeScriptissä, joita käytetään silmukassa.

Tauko-ilmoitus

Break-lauseketta käytetään hallinnan poistamiseen konstruktista. Break-lauseen käyttö silmukassa auttaa ohjelmaa poistumaan silmukasta.

Esimerkki:

var i: luku = 1 kun (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

Tuotos:

Ensimmäisen viiden kerrannaiset välillä 1 ja 10 ovat: 5

Jatka lausuntoa

Jatka-lause ohittaa nykyisen iteraation seuraavat lauseet ja vie ohjauksen takaisin silmukan alkuun.

Esimerkki:

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

Tuotos:

Parittomien arvojen 0 ja 10 välillä on: 5

Nämä olivat tyypin eri piirit. Siirrytään nyt TypeScript-opetusohjelmamme eteenpäin ja ymmärretään toiminnot.

Toiminnot

JavaScriptissä toimintoja ovat tärkeimpiä osia, koska se on toimiva ohjelmointikieli. Toiminnot varmistavat, että ohjelma on ylläpidettävä ja uudelleenkäytettävä ja järjestetty luettaviksi lohkoiksi. Vaikka TypeScript tarjoaa luokkien ja moduulien käsitteen, toiminnot ovat silti olennainen osa kieltä.

Nimetyt toiminnot

Nimettyä funktiota käytetään funktion ilmoittamiseen ja kutsumiseen sen etunimellä.

Esimerkki:

toimintonäyttö () {console.log ('TypeScript-toiminto')} näyttö ()

Tuotos:

TypeScript-toiminto

Nimetön toiminto

Anonyymi toiminto on funktio, joka määritellään lausekkeeksi. Tämä lauseke on tallennettu muuttujaan. Nämä toiminnot kutsutaan muuttujan nimellä, johon toiminto on tallennettu.

Esimerkki:

anna tervehdys = function () {console.log ('TypeScript-toiminto')} tervehdys ()

Tuotos:

TypeScript-toiminto

Nuolitoiminto

Rasvanuolen merkintöjä käytetään nimettömiin toimintoihin, so. Funktiolausekkeisiin. Niitä kutsutaan myös lambda-funktioksi muilla kielillä.

Syntaksi:

(param1, param2, ..., paramN) => lauseke

Rasvanuolen (=>) käyttäminen poistaa funktion avainsanan tarpeen. Parametrit välitetään kulmasulkeissa, ja funktion lauseke suljetaan kiharasulkeisiin {}.

Esimerkki:

anna summa = (x: luku, y: luku): luku => {palauta x + y} summa (10, 30) // palauttaa 40

Toiminto Ylikuormitus

TypeScript tarjoaa toimintojen ylikuormituksen käsitteen. Siksi sinulla voi olla useita toimintoja samalla nimellä, mutta erilaiset parametrityypit ja palautustyyppi.

Esimerkki:

funktio add (a: merkkijono, b: merkkijono): merkkijonofunktio add (a: numero, b: numero): numero palauttaa a + b} lisää ('Hei', 'Edureka') // palauttaa 'Hei Edureka' lisää ( 10, 10) // palauttaa arvon 20

Yllä olevassa esimerkissä meillä on sama toiminto add (), jossa on kaksi toimintodeklarointia ja yksi funktion toteutus. Ensimmäisessä allekirjoituksessa on kaksi tyyppimerkkijonoa, kun taas toisessa allekirjoituksessa on kaksi tyyppinumeron parametria.

Nämä ovat erityyppisiä toimintoja. Siirrytään nyt TypeScript-opetusohjelmaamme ja ymmärretään merkkijonot TypeScriptissä.

TypeScript-opetusohjelma: Merkkijonot

on toinen primitiivinen tietotyyppi, jota käytetään tekstidatan tallentamiseen. Merkkijonoarvoja ympäröivät yksittäiset lainausmerkit tai kaksoislainausmerkit.

Syntaksi:

var var_name = uusi merkkijono (merkkijono)

String-objektissa on käytettävissä erilaisia ​​menetelmiä, kuten:

  • Rakentaja - Se palauttaa viitteen String-funktioon, joka loi objektin
  • Pituus - Tämä palauttaa merkkijonon pituuden
  • Prototyyppi - Tämän ominaisuuden avulla voit lisätä ominaisuuksia ja menetelmiä objektiin

Esimerkki:

anna nimi = uusi merkkijono ('Tervetuloa Edurekaan!') console.log ('Viesti:' + nimi) console.log ('Pituus:' + nimi.pituus)

Tuotos:

Viesti: Tervetuloa Edurekaan!
Pituus: 19

Merkkijonomenetelmät

Merkkijono-objektin menetelmien luettelo sisältää:

Menetelmä Kuvaus

charAt ()

Se palauttaa merkin määritettyyn hakemistoon

charCodeAt ()

Se palauttaa numeron, joka osoittaa merkin Unicode-arvon annetussa hakemistossa

konkat ()

Yhdistää kahden merkkijonon tekstin ja palauttaa uuden merkkijonon

sisällysluettelo()

Palauttaa kutsuvan merkkijono-objektin indeksin määritetyn arvon ensimmäisestä esiintymisestä

lastIndexOf ()

Se palauttaa määritetyn arvon viimeisen esiintymisen kutsuvan merkkijono-objektin indeksin

ottelu()

Käytetään vastaamaan säännöllistä lausetta merkkijonoon

vertaa ()

Palauttaa luvun, joka ilmoittaa, tuleeko viittausmerkkijono ennen tai jälkeen vai onko se sama kuin annettu merkkijono lajittelujärjestyksessä

Hae()

Tämä etsii vastaavuutta säännöllisen lausekkeen ja määritetyn merkkijonon välillä

korvata()

Käytetään säännöllisen lausekkeen ja merkkijonon välisen vastaavuuden löytämiseen ja sovitetun alimerkinnän korvaamiseen uudella alimerkillä

viipale()

Se purkaa merkkijonon osan ja palauttaa uuden merkkijonon

jakaa()

Jakaa merkkijono-objektin joukoksi merkkijonoja erottamalla merkkijono alaosiksi

substraatti ()

Palauttaa merkkijonon merkit määritetystä sijainnista määritetyn merkkimäärän kautta

substing ()

Se palauttaa merkit merkkijonossa kahden hakemiston välillä merkkijonoon

toLocaleLowerCase ()

Merkkijonon merkit muunnetaan pieniksi, kunnioittaen nykyistä aluetta

toLocaleUpperCase ()

Merkkijonon merkit muunnetaan isoin kirjaimin samalla kun noudatetaan nykyistä aluetta

toLowerCase ()

Se palauttaa kutsuvan merkkijonon arvon muunnettuna pieniksi kirjaimiksi

toUpperCase ()

Se palauttaa kutsuvan merkkijonon arvon muunnettuna isoksi

toString ()

Palauttaa merkkijonon, joka edustaa määritettyä objektia

jonkin arvo()

Palauttaa määritetyn objektin primitiivisen arvon

Esimerkki:

let str: string = 'Tervetuloa Edurekaan' str.charAt (0) // palauttaa 'w' str.charAt (2) // palauttaa 'l' 'Tervetuloa Edurekaan'. charAt (2) palauttaa 'l' let str1 : string = 'welcome' anna str2: string = 'Edureka' str1.concat (str2) // palauttaa 'welcomeEdureka' str1.concat ('', str2) // palauttaa 'welcome Edureka' str1.concat ('' - '' ') // palauttaa tervetuloa

Nyt kun tiedät merkkijonoista, siirrymme tämän TypeScript-opetusohjelman kanssa ja ymmärrämme taulukoita.

Taulukot TypeScript-muodossa

An taulukko on erityistyyppinen tietotyyppi, joka tallentaa useita arvoja eri tietotyypeistä peräkkäin käyttämällä erityistä syntaksia. Taulukkoelementit tunnistetaan yksilöllisellä kokonaisluvulla, jota kutsutaan elementin alaindeksiksi tai hakemistoksi.

Syntaksi:

var array_name [: tietotyyppi] // ilmoitus array_name = [val1, val2, valn ..] // alustus

Esimerkki:

anna nimet: Taulukon nimet = ['John', 'Daisy', 'Rachel'] anna tunnukset: Taulukon tunnukset = [101, 700, 321]

Matriisimenetelmät

Tässä on luettelo erilaisista Array-menetelmistä, joita voidaan käyttää eri tarkoituksiin:

Menetelmä Kuvaus

suodattaa()

Luo uuden taulukon, jossa on kaikki tämän ryhmän elementit, joille annettu suodatustoiminto palauttaa arvon true

joka()

Palauttaa arvon tosi, jos kaikki tämän ryhmän elementit täyttävät toimitetun testaustoiminnon

konkat ()

Palauttaa uuden taulukon, joka koostuu tästä taulukosta yhdistettynä muihin matriiseihin

sisällysluettelo()

Palauttaa matriisin elementin ensimmäisen tai pienimmän indeksin, joka on sama kuin määritetty arvo

jokaiselle()

Kutsuu funktion jokaiselle matriisin elementille

liittyä seuraan()

Yhdistää kaikki matriisin elementit merkkijonoksi

lastIndexOf ()

Palauttaa matriisin elementin viimeisen tai suurimman indeksin, joka on yhtä suuri kuin määritetty arvo

kartta()

Luo uuden taulukon, jossa on tulokset kutsutun toiminnon kullekin tämän ryhmän elementille

työntää()

Lisää yhden tai useamman elementin matriisin loppuun ja palauttaa matriisin uuden pituuden

pop ()

Poistaa viimeisen elementin matriisista ja palauttaa kyseisen elementin

vähentää()

Käytä funktiota samanaikaisesti matriisin kahta arvoa vastaan ​​vasemmalta oikealle, jolloin se pienennetään yhdeksi arvoksi

reducRight ()

Käytä funktiota samanaikaisesti taulukon kahta arvoa vastaan ​​oikealta vasemmalle pienentääkseen sitä yhdeksi arvoksi

käänteinen()

Kääntää matriisin elementtien järjestyksen

siirtää()

Poistaa ensimmäisen elementin taulukosta ja palauttaa kyseisen elementin

viipale()

Pura taulukon osa ja palauttaa uuden taulukon

jonkin verran()

Se palauttaa arvon tosi, jos ainakin yksi tämän ryhmän elementti täyttää tarjotun testaustoiminnon

järjestellä()

Se lajittelee taulukon elementit

toString ()

Palauttaa jonon, joka edustaa taulukkoa ja sen elementtejä

liitos ()

Se lisää ja / tai poistaa elementtejä taulukosta

unshift ()

Lisää yhden tai useamman elementin matriisin eteen ja palauttaa matriisin uuden pituuden

Esimerkki:

muuttujan nimi: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // output: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // output: Taran nimi.push ('Rachel') console.log (name) // output: ['John', 'Daisy', 'Rachel']

Siirrytään nyt eteenpäin tämän TypeScript-opetusohjelman avulla ja opitaan käyttöliittymistä.

TypeScript-liitännät

Käyttöliittymä on rakenne, joka määrittelee sopimuksen sovelluksessasi. Se määrittelee syntaksin luokille, joita noudatetaan. Se sisältää vain jäsenten ilmoituksen, ja jäsenten määrittely on johdetun luokan vastuulla.

Esimerkki:

käyttöliittymä Työntekijä {empID: numero empName: merkkijono getSalary: (numero) => numero // nuolitoiminto getManagerName (numero): merkkijono}

Yllä olevassa esimerkissä Työntekijä käyttöliittymä sisältää kaksi ominaisuutta tyhjennä ja empName . Se sisältää myös menetelmäilmoituksen getSalaray käyttämällä nuolitoiminto joka sisältää yhden numeroparametrin ja luvun palautustyypin. getManagerName menetelmä ilmoitetaan käyttämällä normaalia toimintoa.

TypeScript Luokat

TypeScript esitteli luokkia voidakseen hyödyntää olio-tekniikoiden, kuten kapseloinnin ja abstraktion, etuja. TypeScript-kääntäjä kokoaa TypeScript-luokan tavallisiin JavaScript-toimintoihin toimimaan alustoilla ja selaimissa.

Luokka sisältää seuraavat:

  • Rakentaja
  • Ominaisuudet
  • Menetelmät

Esimerkki:

luokka Työntekijä {empID: numero empName: merkkijonorakentaja (ID: numero, nimi: merkkijono) {this.empName = nimi this.empID = ID} getSalary (): numero {return 40000}}

Perintö

TypeScript tukee Perintö koska se on ohjelman kyky luoda uusia luokkia olemassa olevasta luokasta. Luokkaa, jota laajennetaan luomaan uudempia luokkia, kutsutaan pääluokaksi tai superluokaksi. Uusia luokkia kutsutaan lapsi- tai alaluokiksi.

Luokka perii toisen luokan käyttämällä avainsanaa ”jatkuu”. Alaluokat perivät kaikki ominaisuudet ja menetelmät paitsi yksityiset jäsenet ja rakentajat vanhempaluokasta. Mutta TypeScript ei tue useita perintöjä.

Syntaksi:

luokan lapsen_luokan_nimi laajentaa vanhemman_luokan_nimi

Esimerkki:

luokka Henkilö {nimi: merkkijonorakentaja (nimi: merkkijono) {tämä.nimi = nimi}} luokka Työntekijä laajentaa henkilöä {empID: numerorakentaja (empID: numero, nimi: merkkijono) {super (nimi) this.empID = empid} displayName (): void {console.log ('Nimi =' + tämä.nimi + ', työntekijän tunnus =' + tämä.empID)}} anna emp = uusi työntekijä (701, 'Jason') emp.displayName () // Nimi = Jason, työntekijän tunnus = 701

Nyt kun tiedät luokista, siirrymme eteenpäin tämän TypeScript-opetusohjelman avulla ja oppia objekteista.

Objektit TypeScriptissä

Objekti on ilmentymä, joka sisältää erilaiset avainarvoparit. Arvot voivat olla skalaariarvoja tai funktioita tai jopa joukko muita objekteja.

Syntaksi:

var objektin_nimi = {avain1: 'arvo1', // skalaariarvon avain2: 'arvo', avain3: toiminto () {// toiminnot}, avain4: ['sisältö1', 'sisältö2']

Kohde voi sisältää skalaariarvoja, funktioita ja rakenteita, kuten taulukot ja joukot.

Esimerkki:

var person = {etunimi: 'Danny', sukunimi: 'Green'} // käyttää objektiarvoja konsoli.log (henkilö.sukunimi) konsoli.log (henkilö.sukunimi)

Käännettäessä se luo saman koodin JavaScriptiin.

Tuotos:

Danny
Vihreä

Nämä olivat TypeScriptin tärkeitä elementtejä. Siirrytään nyt tähän TypeScript-oppaaseen ja tarkastellaan esimerkkiä käyttötapauksen ymmärtämiseksi.

TypeScript-opetusohjelma: Käytä tapausta

Täällä opit muuntamaan olemassa olevan TypeScript-tiedostoon.

Kun käännämme TypeScript-tiedoston, se tuottaa vastaavan JavaScript-tiedoston samalla nimellä. Tässä meidän on varmistettava, että alkuperäinen JavaScript-tiedosto, joka toimii syötteenä, ei voi olla samassa hakemistossa, jotta TypeScript ei korvaa niitä.

Prosessi, joka siirtyy JavaScriptistä TypeScriptiin, sisältää seuraavat vaiheet:

1. Lisää tsconfig.json-tiedosto projektiin

Sinun on lisättävä tsconfig.json-tiedosto projektiin. TypeScript käyttää tsconfig.json-tiedostoa hallita projektin kokoamisasetuksia, kuten mitä tiedostoja haluat sisällyttää ja sulkea pois.

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

2. Integroi koontityökalu

Useimmissa JavaScript-projekteissa on integroitu rakennustyökalu, kuten gulp tai webpack. Voit integroida projektit webpackiin seuraavilla tavoilla:

  • Suorita seuraava komento terminaalissa:
$ npm asenna mahtava-typcript-loader source-map-loader

Verkkopaketin integroinnissa käytetään mahtavaa-typewriter-loader-ohjelmaa yhdessä source-map-loader-ohjelmiston kanssa lähdekoodin virheenkorjauksen helpottamiseksi.

  • Toiseksi, yhdistä moduulin config -ominaisuus webpack.config.js-tiedostoon kuormaajien sisällyttämiseksi.

3. Siirrä kaikki .js-tiedostot .ts-tiedostoihin

Tässä vaiheessa sinun on nimettävä .js-tiedosto uudelleen .ts-tiedostoksi. Vastaavasti, jos tiedosto käyttää JSX: tä, sinun on nimettävä se uudelleen .tsx: ksi. Jos nyt avaat kyseisen tiedoston editorissa, joka tukee TypeScript-tiedostoa, jotkut koodit saattavat alkaa antaa kokoamisvirheitä. Joten tiedostojen muuntaminen yksitellen sallii kokoamisvirheiden helpomman käsittelyn. Jos TypeScript löytää muunnoksen aikana kääntövirheitä, se pystyy edelleen kääntämään koodin.

4. Tarkista virheet

Kun olet siirtänyt js-tiedoston ts-tiedostoon, TypeScript aloittaa koodin tyypin tarkistuksen välittömästi. Joten saatat saada diagnostisia virheitä JavaScript-koodissa.

aws käynnistää instanssin tilannekuvasta

5. Käytä kolmannen osapuolen JavaScript-kirjastoja

JavaScript-projektit käyttävät kolmannen osapuolen kirjastoja, kuten tai Lodash. Tiedostojen kokoamiseksi TypeScriptin on tiedettävä näiden kirjastojen kaikkien objektien tyypit. JavaScript-kirjastojen TypeScript-tyypin määritystiedostot ovat jo saatavilla DefinitelyTypedissä. Joten, ei tarvitse asentaa tätä tyyppiä ulkoisesti. Asenna vain ne tyypit, joita käytetään projektissamme.

JQuerylle voit asentaa määritelmän:

$ npm install @ type / jquery

Tee tämän jälkeen muutokset JavaScript-projektiin, suorita koontityökalu. Sinun pitäisi nyt kääntää TypeScript-projekti tavalliseen JavaScriptiin, joka voidaan suorittaa selaimessa.

Tämän avulla olemme päässeet tämän TypeScript-opetusohjelman loppuun. Toivon, että ymmärrät kaikki TypeScriptin tärkeät elementit.

Katso kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.

Onko sinulla kysymys meille? Mainitse se ”TypeScript Tutorial” -kommenttiosassa ja palaamme sinuun.