Svjetska mreža u osnovi radi na JavaScript, HTML i CSS. Nažalost, JavaScript nema nekoliko značajki koje bi programerima pomogle da ga koriste za velike programe. Unesite TypeScript.
Što je JavaScript?
JavaScript je započeo kao skriptni jezik za web preglednik Netscape Navigator; Brendan Eich napisao je prototip tijekom 10 dana 1995. godine. Ime JavaScript nagovještava Java jezik Sun Microsystema, premda se ta dva jezika prilično razlikuju, a sličnost imena dovela je do značajne zabune tijekom godina. JavaScript, koji se značajno razvio, sada je podržan u svim modernim web preglednicima.
Uvođenje JavaScript-a na strani klijenta u Netscape Navigator brzo je praćeno uvođenjem JavaScript-a na poslužitelju u web poslužitelje Netscape Enterprise Server i Microsoft IIS. Nekih 13 godina kasnije, Ryan Dahl predstavio je Node.js kao otvoreno, višeplatformsko, JavaScript runtime okruženje neovisno o bilo kojem pregledniku ili web poslužitelju.
JavaScript jezik
JavaScript je jezik s više paradigmi. Ima kovrčavu zagradu u sintaksi i zarezima, poput C jezika jezika. Ima slabo, dinamično tipkanje i interpretira se ili (češće) pravovremeno sastavlja. Općenito, JavaScript je jednonitni, iako postoji API za web radnike koji radi višestruko uvođenje niti, a postoje događaji, asinkroni pozivi funkcija i povratni pozivi.
JavaScript podržava objektno orijentirano programiranje pomoću prototipova, a ne nasljeđivanja klasa korištenih u C ++, Java i C #, iako je classsintaksa dodana JavaScript ES6 u 2015. JavaScript također podržava funkcionalno programiranje, uključujući zatvaranje, rekurziju i lambde (anonimne funkcije).
Prije JavaScript ES6 jezik nije imao optimizaciju rep poziva; sada to čini, iako morate uključiti strogi način ( 'use strict') da biste to omogućili, a implementacija se razlikuje od preglednika do preglednika. Strogi način rada također mijenja semantiku JavaScript-a i mijenja neke obično tihe pogreške kako bi se izbacile pogreške.
Što je s oznakom "ES6"? Naziv standardiziranog jezika JavaScript je ECMAScript (ES), prema ECMA International standard body; ES6 se naziva i ECMAScript 2015 (ES2015). ES2020 trenutno je nacrt standarda.
Kao jednostavan primjer koji vam daje okus jezika JavaScript, evo nekoliko koda koji će odlučiti je li dan ili večer i dinamički staviti odgovarajući pozdrav u imenovani web element koji se nalazi u dokumentu objekta preglednika:
var sat = novi datum (). getHours ();var pozdrav;
ako (sat <18) {
pozdrav = "Dobar dan";
} ostalo {
pozdrav = "Dobra večer";
}
document.getElementById ("demo"). innerHTML = pozdrav;
JavaScript ekosustav
Postoje brojni JavaScript API-ji. Neke dobavlja preglednik, poput documentAPI-ja u kodu prikazanom gore, a neke pružaju treće strane. Neki se API-ji primjenjuju na upotrebu na strani klijenta, neki na upotrebu na strani poslužitelja, neki na upotrebu na radnoj površini, a neki na više od jednog okruženja.
API-ji preglednika uključuju objektni model dokumenta (DOM) i objektni model preglednika (BOM), Geolocation, Canvas (grafika), WebGL (GPU-ubrzana grafika), HTMLMediaElement (audio i video) i WebRTC (komunikacija u stvarnom vremenu).
API-ja treće strane ima na pretek. Neki su sučelja punih aplikacija, poput Google Mapsa. Drugi su uslužni programi koji olakšavaju programiranje JavaScript HTML5 i CSS, poput jQuery. Neki su, poput Expressa, programski okviri za određene svrhe; za Express je svrha izgradnja web i mobilnih poslužitelja aplikacija na Node.js. Brojni su drugi okviri izgrađeni na vrhu Expressa. 2016. raspravljao sam o 22 JavaScript okvira nastojeći shvatiti što postaje nešto kao zoološki vrt; mnogi od ovih okvira još uvijek postoje u jednom ili drugom obliku, ali nekoliko ih je pošlo za rukom.
Postoji mnogo više JavaScript modula, preko 300 000. Da bismo se nosili s tim, koristimo upravitelje paketa , kao što je npm, zadani upravitelj paketa za Node.js.
Jedna od alternativa npm je Yarn, koja je došla s Facebooka i koja tvrdi prednost determinističkih instalacija. Slični alati uključuju Bower (s Twittera), koji upravlja front-end komponentama, a ne Node modulima; Ender, koja sebe naziva npm-ovom mlađom sestrom; i jspm, koji koristi ES module (noviji ECMA standard za module), a ne CommonJS module, stariji de-facto standard podržan od npm.
Webpack grupira JavaScript module u statička sredstva za preglednik. Browserify omogućuje programerima da napišu module u stilu Node.js koji se kompajliraju za upotrebu u pregledniku. Grunt je JavaScript pokretač zadataka orijentiran na datoteke, a gulp je sustav za izradu streaminga i pokretač JavaScript zadataka. Izbor između gunđanja i gutljaja nije presudan. Instalirao sam i koristim onaj koji je postavljen za dati projekt.
Da bi JavaScript kod bio pouzdaniji u odsustvu kompilacije, koristimo lintere. Pojam potječe od alata za uvlačenje jezika na jeziku C, koji je bio standardni uslužni program Unix. JavaScript linteri uključuju JSLint, JSHint i ESLint. Možete pokrenuti lintere nakon promjena koda pomoću pokretača zadataka ili vašeg IDE-a. Opet, izbor među linterima nije jednoznačan i koristim onaj koji je postavljen za određeni projekt.
Govoreći o urednicima i IDE-ima, pregledao sam 6 JavaScript IDE-ova i 10 JavaScript uređivača, posljednji put 2019. Moj najbolji izbor bili su Sublime Text (vrlo brzi editor), Visual Studio Code (podesivi editor / IDE) i WebStorm (IDE).
Transpileri vam omogućuju prevođenje nekih drugih jezika kao što su CoffeeScript ili TypeScript u JavaScript i prevođenje modernog JavaScript-a (poput ES2015 koda) u osnovni JavaScript koji se pokreće u (gotovo) bilo kojem pregledniku. (Sve su oklade isključene za rane verzije Internet Explorera.) Najčešći transpiler za moderni JavaScript je Babel.
Što je TypeScript?
TypeScript je otkucani nabor JavaScripta koji se kompajlira u obični JavaScript (ES3 ili noviji; može se konfigurirati). Kompajler naredbenog retka otvorenog koda TypeScript može se instalirati kao paket Node.js. Podrška za TypeScript dolazi s Visual Studio 2017 i Visual Studio 2019, Visual Studio Code i WebStorm, a može se dodati u Sublime Text, Atom, Eclipse, Emacs i Vim. Kompajler / transpiler TypeScript tsc napisan je na TypeScript-u.
TypeScript dodaje neobavezne vrste, klase i module u JavaScript i podržava alate za velike JavaScript aplikacije za bilo koji preglednik, za bilo koji domaćin i na bilo kojem OS-u. Između mnogih drugih pobjeda za TypeScript, popularni je Angular framework prepravljen u TypeScriptu.
Tipovi omogućuju programerima JavaScript-a da koriste vrlo produktivne razvojne alate i prakse poput statičke provjere i refaktoriranja koda prilikom razvijanja JavaScript aplikacija.
Vrste su neobavezne, a zaključivanje tipa omogućuje nekoliko napomena o tipu da uvelike razlikuju u statičkoj provjeri vašeg koda. Tipovi vam omogućuju definiranje sučelja između softverskih komponenata i stjecanje uvida u ponašanje postojećih JavaScript knjižnica.
TypeScript nudi podršku za najnovije i nove JavaScript značajke, uključujući one iz ECMAScripta 2015 i buduće prijedloge, kao što su asinkrne funkcije i dekoratori, koji pomažu u izgradnji robusnih komponenata.
Jezik TypeScript
Jezik TypeScript prihvaća JavaScript kao valjan, ali nudi dodatne mogućnosti napomena o tipovima, provjere tipa u vrijeme sastavljanja, klasa i modula. Sve su to izuzetno korisne kada pokušavate proizvesti robustan softver. Obični JavaScript generira pogreške samo tijekom izvođenja, i to samo ako slučajno vaš program dođe do puta s pogreškama.
Vodič za TypeScript za 5 minuta čini prednosti jasnima. Polazna točka je čisti JavaScript s .ts nastavkom:
funkcija pozdravi (osoba) { return "Hello", + osoba;
}
neka korisnik = "Jane User";
document.body.textContent = pozdrav (korisnik);
Ako ovo kompajlirate s tsc, stvorit će identičnu datoteku s nastavkom .js.
U vodiču ćete postupno mijenjati ovaj kôd, dodavanjem oznake tipa person:stringu definiciji funkcije, kompajliranjem, testiranjem provjere tipa od strane prevoditelja, dodavanjem sučelja za persontip i na kraju dodavanjem klase za Student. Konačni kod je:
razred Student { puno ime: string;
konstruktor (javni firstName: string, public middleInitial: string,
javno prezime: string) {
this.fullName = firstName + "" + middleInitial + "" + lastName;
}
}
sučelje Osoba {
firstName: string;
lastName: string;
}
funkcija pozdravljanja (osoba: osoba) {
return "Hello," + person.firstName + "" + person.lastName;
}
neka korisnik = novi student ("Jane", "M.", "Korisnik");
document.body.textContent = pozdrav (korisnik);
Kad ovo kompajlirate i pogledate emitirani JavaScript, vidjet ćete da su klase u TypeScriptu samo skraćenica za isto nasljeđivanje temeljeno na prototipu koje se koristi u običnom JavaScript ES3. Imajte na umu da prevoditelj svojstva person.firstNamei person.lastNameautomatski generira kad vidi njihove publicatribute u Studentkonstruktoru klase, a također se prenosi na Personsučelje. Jedna od najljepših prednosti napomena o tipovima u TypeScript-u je ta što ih prepoznaju alati, poput Visual Studio Code:
Ako u kodu postoje pogreške dok uređujete u VS Code, vidjet ćete poruke o pogreškama na kartici Problemi, na primjer sljedeće ako izbrišete kraj retka s instancijom Student:
Vodič za migraciju s JavaScript-a detaljno opisuje kako nadograditi postojeći JavaScript projekt. Preskačući korake postavljanja, srž metode je u preimenovanju datoteka .js u .ts jednu po jednu. (Ako vaša datoteka koristi JSX, ekstenziju koju koristi React, morat ćete je preimenovati u .tsx, a ne .ts.) Zatim pojačajte provjeru pogrešaka i ispravite pogreške.
Između ostalog, morat ćete promijeniti postavke temeljene na modulima require()ili define()izjave u TypeScript izjave za uvoz i dodati datoteke deklaracije za sve bibliotečke module koje koristite. Također biste trebali prepisati izvoz modula pomoću TypeScript exportizraza. TypeScript podržava CommonJS module, poput Node.js.
Ako dobijete pogreške u vezi s pogrešnim brojem argumenata, možete napisati potpise preopterećenja funkcije TypeScript. To je važna značajka kojoj JavaScript nedostaje. Napokon, trebali biste dodati tipove vlastitim funkcijama i po potrebi koristiti sučelja ili klase.
Obično ne trebate pisati vlastite datoteke deklaracije za JavaScript knjižnice u javnoj domeni. DefinitelyTyped je spremište datoteka deklaracija, koje su sve dostupne pomoću npm. Izjave možete pronaći pomoću stranice TypeSearch.
Nakon što pretvorite sve svoje JavaScript datoteke u TypeScript, pojačate vrste i uklonite pogreške, imat ćete mnogo robusniju bazu koda. Umjesto da stalno popravljate pogreške u izvođenju koje prijavljuju testeri ili korisnici, moći ćete statički otkriti najčešće greške.
Vrijedno je gledati Andersa Hejlsberga kako raspravlja o TypeScriptu. Kao što ćete čuti od njega, TypeScript je JavaScript koji se mjeri.
