Svetovni splet v osnovi deluje na JavaScript, HTML in CSS. Na žalost JavaScript nima več funkcij, ki bi razvijalcem pomagale, da ga uporabljajo za obsežne aplikacije. Vnesite TypeScript.
Kaj je JavaScript?
JavaScript se je začel kot skriptni jezik za spletni brskalnik Netscape Navigator; Brendan Eich je prototip napisal v obdobju 10 dni leta 1995. Ime JavaScript je naklonjeno jeziku Java družbe Sun Microsystem, čeprav sta jezika precej različna, podobnost imen pa je v preteklih letih povzročila precejšnjo zmedo. JavaScript, ki se je znatno razvil, je zdaj podprt v vseh sodobnih spletnih brskalnikih.
Uvedbi odjemalskega JavaScript-a v Netscape Navigator je hitro sledila uvedba JavaScript-a na strežniškem spletnem strežniku Netscape Enterprise Server in Microsoft IIS. Približno 13 let kasneje je Ryan Dahl predstavil Node.js kot odprtokodno, večplastno in izvajalno okolje JavaScript, neodvisno od katerega koli brskalnika ali spletnega strežnika.
Jezik JavaScript
JavaScript je jezik z več paradigmami. Ima sintakso in podpičja v zavitem oklepaju, na primer družina jezikov C. Ima šibko, dinamično tipkanje in je bodisi interpretirano bodisi (pogosteje) pravočasno sestavljeno. Na splošno je JavaScript enonitni, čeprav obstaja API za spletne delavce, ki izvaja večnitnost, in obstajajo dogodki, klici asinhronih funkcij in povratni klici.
JavaScript podpira objektno usmerjeno programiranje s prototipi in ne z dedovanjem razredov, ki se uporablja v C ++, Java in C #, čeprav razred sintaksa je bila dodana JavaScript ES6 leta 2015. JavaScript podpira tudi funkcionalno programiranje, vključno z zaprtji, rekurzijo in lambdami (anonimne funkcije).
Pred JavaScriptom ES6 jezik ni imel optimizacije repnih klicev; zdaj se, čeprav morate vklopiti strog način ("uporabljaj strogo"), da jo omogočite, izvedba pa se od brskalnika do brskalnika razlikuje. Strogi način spreminja tudi semantiko JavaScripta in spreminja nekatere običajno tihe napake, da povzroči napake.
Kaj je z oznako "ES6"? Ime standardiziranega jezika JavaScript je ECMAScript (ES), po mednarodnem organu za standarde ECMA; ES6 se imenuje tudi ECMAScript 2015 (ES2015). ES2020 je trenutno osnutek standarda.
Kot preprost primer, ki vam daje okus jezika JavaScript, je tu nekaj kode, s katero se lahko odločite, ali je dan ali večer, in dinamično vstavite ustrezen pozdrav v imenovani spletni element, ki ga najdete v dokumentu brskalnika:
var ura = nov datum (). getHours ();var pozdrav;
če (ura <18) {
pozdrav = "Dober dan";
} še {
pozdrav = "Dober večer";
}
document.getElementById ("demo"). innerHTML = pozdrav;
JavaScript ekosistem
Obstajajo številni API-ji JavaScript. Nekatere dobite v brskalniku, na primer dokument API v zgornji kodi, nekatere pa dobavljajo tretje osebe. Nekateri API-ji veljajo za uporabo na strani odjemalca, nekateri za uporabo na strani strežnika, nekateri za uporabo na namizju in nekateri za več kot eno okolje.
API-ji brskalnika vključujejo objektni model dokumenta (DOM) in objektni model brskalnika (BOM), Geolocation, Canvas (grafika), WebGL (GPU-pospešena grafika), HTMLMediaElement (avdio in video) in WebRTC (komunikacije v realnem času).
API-jev tretjih oseb je na pretek. Nekateri so vmesniki do polnih aplikacij, na primer Google Maps. Drugi so pripomočki, ki olajšajo programiranje JavaScript HTML5 in CSS, na primer jQuery. Nekateri, kot je Express, so ogrodja aplikacij za posebne namene; namen Express-a je izdelava spletnih in mobilnih strežnikov aplikacij na Node.js. Na vrhu Expressa so bili zgrajeni številni drugi okviri. Leta 2016 sem razpravljal o 22 ogrodjih JavaScript, da bi razumel, kaj postaja nekaj kot živalski vrt; mnogi od teh okvirov še vedno obstajajo v takšni ali drugačni obliki, vendar jih je več šlo mimogrede.
Obstajajo veliko več modulov JavaScript, več kot 300.000. Za reševanje tega uporabljamo upravljavci paketov, kot je npm, privzeti upravitelj paketov za Node.js.
Alternativa npm je Yarn, ki je prišla s Facebooka in trdi, da je prednost determinističnih namestitev. Podobna orodja vključujejo Bower (iz Twitterja), ki upravlja namestitvene komponente namesto modulov Node; Ender, ki se imenuje npm-jeva sestrica; in jspm, ki uporablja module ES (novejši standard ECMA za module), namesto modulov CommonJS, starejši dejanski standard, ki ga podpira npm.
Webpack združi module JavaScript v statična sredstva za brskalnik. Browserify razvijalcem omogoča pisanje modulov v slogu Node.js, ki se prevedejo v brskalnik. Grunt je datotečno usmerjen izvajalec opravil JavaScript, gulp pa sistem za pretakanje in gradnik opravil JavaScript. Izbira med godrnjanjem in požiranjem ni odločilna. Oboje sem namestil in uporabljal tistega, ki je bil nastavljen za določen projekt.
Za povečanje zanesljivosti kode JavaScript v odsotnosti prevajanja uporabljamo linterje. Izraz izhaja iz orodja za lint v jeziku C, ki je bilo standardno orodje Unix. Povezave JavaScript vključujejo JSLint, JSHint in ESLint. Izvajalec opravil ali IDE lahko samodejno zaženete povezovalnike po spremembah kode. Tudi tokrat izbira med linterji ni jasna in uporabljam tistega, ki je bil določen za določen projekt.
Ko smo že pri urednikih in IDE-jih, sem pregledal 6 IDE-jev JavaScript in 10 urejevalnikov JavaScript, nazadnje leta 2019. Moja najboljša izbira so bili Sublime Text (zelo hiter urejevalnik), Visual Studio Code (nastavljiv urejevalnik / IDE) in WebStorm (IDE).
Prevajalniki omogočajo prevajanje nekaterih drugih jezikov, kot sta CoffeeScript ali TypeScript v JavaScript, in sodobni JavaScript (kot je koda ES2015) v osnovni JavaScript, ki deluje v (skoraj) katerem koli brskalniku. (Vse stave so izključene za zgodnje različice Internet Explorerja.) Najpogostejši prevajalnik za sodobni JavaScript je Babel.
Kaj je TypeScript?
TypeScript je tipkani nabor JavaScript, ki se prevede v navaden JavaScript (ES3 ali novejši; nastavljiv je). Odprtokodni prevajalnik ukazne vrstice TypeScript je mogoče namestiti kot paket Node.js. Podpora za TypeScript prihaja z Visual Studio 2017 in Visual Studio 2019, Visual Studio Code in WebStorm ter jo je mogoče dodati v Sublime Text, Atom, Eclipse, Emacs in Vim. Prevajalnik / prevajalnik TypeScript tsc je napisan v TypeScript.
TypeScript v JavaScript dodaja neobvezne vrste, razrede in module ter podpira orodja za obsežne aplikacije JavaScript za kateri koli brskalnik, kateri koli gostitelj in kateri koli OS. Med številnimi drugimi zmagami za TypeScript je bil v TypeScript prenovljen priljubljeni okvir Angular.
Tipi razvijalcem JavaScript omogočajo uporabo zelo produktivnih razvojnih orodij in praks, kot sta statično preverjanje in preoblikovanje kode pri razvoju aplikacij JavaScript.
Vrste niso obvezne, sklepanje o tipih pa omogoča, da nekaj pripisov vrst močno spremeni statično preverjanje kode. Vrste vam omogočajo, da definirate vmesnike med komponentami programske opreme in pridobite vpogled v vedenje obstoječih knjižnic JavaScript.
TypeScript ponuja podporo najnovejšim in razvijajočim se funkcijam JavaScript, vključno s tistimi iz ECMAScript 2015 in prihodnjimi predlogi, kot so funkcije asinhronizacije in okrasitelji, za pomoč pri izdelavi robustnih komponent.
Jezik TypeScript
Jezik TypeScript sprejema JavaScript kot veljaven, vendar ponuja dodatne možnosti pripisov vrst, preverjanje tipa v času prevajanja, razrede in module. Vse to je izjemno koristno, ko poskušate izdelati robustno programsko opremo. Navadni JavaScript generira napake samo med izvajanjem in šele, če vaš program doseže pot z napakami.
V vadnici TypeScript v 5 minutah so jasne prednosti. Izhodišče je čisti JavaScript s pripono .ts:
funkcija pozdravi (oseba) { vrnitev "Hello," + oseba;
}
naj user = "Jane User";
document.body.textContent = greeter (uporabnik);
Če to sestavite s tsc, bo ustvaril enako datoteko s pripono .js.
Vadnica vam omogoča, da to kodo spremenite postopoma in dodate pripis tipa oseba: niz v definiciji funkcije, prevajanje, preizkušanje preverjanja tipa s strani prevajalnika, dodajanje vmesnika za oseba type in na koncu dodamo razred za Študent. Končna koda je:
razred Študent { polnoime: niz;
konstruktor (public firstName: string, public middleInitial: string,
javno lastName: niz) {
this.fullName = firstName + "" + middleInitial + "" + lastName;
}
}
vmesnik Oseba {
firstName: niz;
lastName: niz;
}
funkcija pozdravi (oseba: oseba) {
vrni "Pozdravljeni," + person.firstName + "" + person.lastName;
}
naj uporabnik = novi študent ("Jane", "M.", "User");
document.body.textContent = greeter (uporabnik);
Ko to prevedete in si ogledate oddani JavaScript, boste videli, da so razredi v Typecriptu le okrajšava za isto dedovanje na osnovi prototipa, ki se uporablja v navadnem JavaScript ES3. Upoštevajte, da lastnosti person.firstName in person.lastName jih samodejno ustvari prevajalnik, ko vidi njihove javnosti atributi v Študent class constructor in ga tudi prenesel v Oseba vmesnik. Ena najlepših prednosti pripisov vrst v TypeScript je, da jih prepoznajo orodja, kot je Visual Studio Code:
Če so med urejanjem v kodo VS v kodi napake, bodo na zavihku Težave prikazana sporočila o napakah, na primer naslednje, če izbrišete konec vrstice z instanciranjem Študent:
Vadnica Migrating from JavaScript podrobno opisuje, kako nadgraditi obstoječi projekt JavaScript. Če preskočite korake namestitve, je bistvo metode preimenovanje datotek .js v .ts eno za drugo. (Če vaša datoteka uporablja končnico JSX, ki jo uporablja React, jo boste morali preimenovati v .tsx in ne .ts.) Nato poostrite preverjanje napak in odpravite napake.
Med drugim boste morali spremeniti modul zahtevaj () ali define () stavke v izjave za uvoz TypeScript in dodajte datoteke deklaracije za vse knjižnične module, ki jih uporabljate. Prav tako bi morali znova napisati izvoze modulov s TypeScriptom izvoz izjavo. TypeScript podpira module CommonJS, tako kot Node.js.
Če se prikažejo napake glede napačnega števila argumentov, lahko napišete podpise za preobremenitev funkcije TypeScript. To je pomembna lastnost, ki ji manjka JavaScript. Na koncu dodajte lastne funkcije vrste in po potrebi uporabite vmesnike ali razrede.
Običajno vam ni treba pisati lastnih datotek z izjavami za javne knjižnice JavaScript. DefinitelyTyped je repozitorij datotek z izjavami, ki so dostopne z uporabo npm. Izjave najdete na strani TypeSearch.
Ko pretvorite vse datoteke JavaScript v TypeScript, izboljšate vrste in odpravite napake, boste imeli veliko bolj trdno osnovo kode. Namesto da nenehno popravljate napake med izvajanjem, o katerih poročajo preizkuševalci ali uporabniki, boste najpogostejše napake lahko zaznali statično.
Vredno si je ogledati Andersa Hejlsberga, ki razpravlja o TypeScriptu. Kot boste slišali od njega, je TypeScript JavaScript, ki meri.
