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-tyypit
- Muuttujat
- Operaattorit
- Silmukat
- Toiminnot
- Jouset
- Taulukot
- Liitännät
- Luokat
- Esineet
- TypeScript-käyttötapa
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
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 = num1Tuotos:
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 1Vaikka 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 2Tee..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 2Nä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 loopTuotos:
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) => lausekeRasvanuolen (=>) 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 40Toiminto 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 20Yllä 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 tervetuloaNyt 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 ..] // alustusEsimerkki:
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_nimiEsimerkki:
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 = 701Nyt 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-loaderVerkkopaketin 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 tilannekuvasta5. 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 / jqueryTee 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.