Ohjelmointi

TypeScript vs. JavaScript: Ymmärrä erot

Verkko toimii periaatteessa JavaScriptillä, HTML: llä ja CSS: llä. Valitettavasti JavaScriptiltä puuttuu useita ominaisuuksia, jotka auttaisivat kehittäjiä käyttämään sitä suurissa sovelluksissa. Kirjoita TypeScript.

Mikä on JavaScript?

JavaScript alkoi komentosarjakielenä Netscape Navigator -verkkoselaimelle; Brendan Eich kirjoitti prototyypin kymmenen päivän aikana vuonna 1995. Nimi JavaScript on nyökkäys Sun Microsystemin Java-kielelle, vaikka nämä kaksi kieltä ovatkin hyvin erilaisia, ja nimien samankaltaisuus on aiheuttanut huomattavaa sekaannusta vuosien varrella. Huomattavasti kehittynyttä JavaScriptiä tuetaan nyt kaikissa moderneissa selaimissa.

Asiakaspuolen JavaScriptin käyttöönottoa Netscape Navigatorissa seurasi nopeasti palvelinpuolen JavaScriptin käyttöönotto web-palvelimissa Netscape Enterprise Server ja Microsoft IIS. Noin 13 vuotta myöhemmin Ryan Dahl esitteli Node.js: n avoimen lähdekoodin, alustojen välisenä, JavaScript-ajonaikaisena ympäristöön riippumatta selaimista tai verkkopalvelimista.

JavaScript-kieli

JavaScript on moniparadigman kieli. Siinä on kihara-hakasulkujen syntaksit ja puolipisteet, kuten C-kieliperhe. Sillä on heikko, dynaaminen kirjoitus ja se joko tulkitaan tai (useammin) juuri ajoissa käännetään. Yleensä JavaScript on yksisäikeinen, vaikka on olemassa Web Workers -sovellusliittymä, joka suorittaa monisäikeisyyden, ja on tapahtumia, asynkronisia toimintokutsuja ja takaisinsoittoja.

JavaScript tukee olio-ohjelmointia käyttäen prototyyppejä C ++: ssa, Java: ssa ja C #: ssa käytetyn luokan perimisen sijaan, vaikka luokassa syntaksia lisättiin JavaScript ES6: een vuonna 2015. JavaScript tukee myös toiminnallista ohjelmointia, mukaan lukien sulkemiset, rekursio ja lambdas (anonyymit toiminnot).

Ennen JavaScript ES6: ta kielellä ei ollut häntäpuhelun optimointia; nyt se tekee, vaikka sinun on käynnistettävä tiukka tila ("käytä tiukasti") sen käyttöönottamiseksi, ja toteutus vaihtelee selaimesta toiseen. Tiukka tila muuttaa myös JavaScriptin semantiikkaa ja muuttaa joitain normaalisti hiljaisia ​​virheitä heittämään virheitä.

Mikä on ES6-nimitys? Standardoidun JavaScript-kielen nimi on ECMAScript (ES) ECMA: n kansainvälisen standardointielimen mukaan. ES6: ta kutsutaan myös ECMAScript 2015: ksi (ES2015). ES2020 on tällä hetkellä standardiluonnos.

Yksinkertaisena esimerkkinä JavaScript-kielen maun antamiseksi tässä on koodi, joka päättää, onko päivä vai ilta, ja lisää sopiva tervehdys dynaamisesti nimettyyn web-elementtiin, joka löytyy selaimen asiakirjaobjektista:

var tunti = uusi päivämäärä (). getHours ();

var tervehdys;

jos (tunti <18) {

tervehdys = "hyvää päivää";

} muu {

tervehdys = "Hyvää iltaa";

}

document.getElementById ("demo"). sisäinenHTML = tervehdys;

JavaScript-ekosysteemi

On olemassa lukuisia JavaScript-sovellusliittymiä. Joitakin toimittaa selain, kuten asiakirja API edellä mainitussa koodissa, ja jotkut ovat kolmansien osapuolten toimittamia. Jotkut sovellusliittymät koskevat asiakaspuolen käyttöä, toiset palvelinpuolen käyttöä, toiset työpöydän käyttöä ja toiset useampaa kuin yhtä ympäristöä.

Selaimen sovellusliittymät sisältävät asiakirjaobjektimallin (DOM) ja selainobjektimallin (BOM), Geolocation, Canvas (grafiikka), WebGL (GPU-kiihdytetyt grafiikat), HTMLMediaElement (ääni ja video) ja WebRTC (reaaliaikainen viestintä).

Kolmannen osapuolen sovellusliittymiä on runsaasti. Jotkut ovat käyttöliittymiä täydellisiin sovelluksiin, kuten Google Maps. Toiset ovat apuohjelmia, jotka helpottavat JavaScript HTML5- ja CSS-ohjelmointia, kuten jQuery. Jotkut, kuten Express, ovat sovelluskehyksiä tiettyihin tarkoituksiin; Expressin tarkoituksena on rakentaa verkko- ja mobiilisovelluspalvelimia Node.js: lle. Expressin päälle on rakennettu useita muita kehyksiä. Vuonna 2016 keskustelin 22 JavaScript-kehyksestä pyrkien ymmärtämään, mistä on tulossa jotain eläintarhaa; monet näistä kehyksistä ovat edelleen olemassa yhdessä tai toisessa muodossa, mutta monet ovat ohittaneet.

On monet lisää JavaScript-moduuleja, yli 300 000. Tämän käsittelemiseksi käytämme pakettien hallinta, kuten npm, Node.js: n oletuspaketinhallinta.

Yksi vaihtoehto npm: lle on Facebookista tullut lanka, joka väittää determinististen asennusten edun. Samanlaisia ​​työkaluja ovat Bower (Twitteristä), joka hallinnoi käyttöliittymän osia pikemminkin kuin solmumoduuleja; Ender, joka kutsuu itseään npm: n pikkusiskoksi; ja jspm, joka käyttää ES-moduuleja (uudempi moduulien ECMA-standardi), ei CommonJS-moduuleja, vanhempi de facto -standardi, jota tukee npm.

Webpack niputtaa JavaScript-moduulit staattisiksi resursseiksi selaimelle. Selainvahvistuksen avulla kehittäjät voivat kirjoittaa Node.js-tyylisiä moduuleja, jotka kootaan käytettäväksi selaimessa. Grunt on tiedostopohjainen JavaScript-tehtävien juoksija, ja gulp on suoratoistojärjestelmä ja JavaScript-tehtävien juoksija. Valinta mölyn ja nielun välillä ei ole ratkaiseva. Olen asentanut ja käyttänyt sitä, mikä on määritetty tietylle projektille.

Jotta JavaScript-koodi olisi luotettavampi ilman kokoamista, käytämme säkkejä. Termi tulee C-kielen nukkaustyökalusta, joka oli tavallinen Unix-apuohjelma. JavaScript-nukut sisältävät JSLint, JSHint ja ESLint. Voit automatisoida käynnissä olevat nukat koodimuutosten jälkeen tehtävän juoksijalla tai IDE: llä. Jälleen valinta säkkien joukosta ei ole selkeä, ja käytän sitä, mikä on perustettu tietylle projektille.

Toimittajista ja IDE: stä puhuen, olen tarkastellut 6 JavaScript IDE: tä ja 10 JavaScript-editoria, viimeksi vuonna 2019. Suosituimmat valintani olivat Sublime Text (erittäin nopea editori), Visual Studio Code (konfiguroitava editori / IDE) ja WebStorm (IDE).

Transpilerien avulla voit kääntää joitain muita kieliä, kuten CoffeeScript tai TypeScript, JavaScriptiin ja kääntää nykyaikaisen JavaScriptin (kuten ES2015-koodin) perus-JavaScriptiksi, joka toimii (melkein) missä tahansa selaimessa. (Kaikki vedot ovat poissa käytöstä Internet Explorerin varhaisissa versioissa.) Moderni JavaScript on yleisin transpileri Babel.

Mikä on TypeScript?

TypeScript on tyypillinen JavaScript-supersarja, joka kääntyy tavalliseen JavaScriptiin (ES3 tai uudempi; se on konfiguroitavissa). Avoimen lähdekoodin TypeScript-komentorivikääntäjä voidaan asentaa Node.js-pakettina. TypeScript-tuki tulee Visual Studio 2017: n ja Visual Studio 2019: n, Visual Studio -koodin ja WebStormin kanssa, ja se voidaan lisätä Sublime Text-, Atom-, Eclipse-, Emacs- ja Vim-tiedostoihin. TypeScript-kääntäjä / transpiler tsc kirjoitetaan TypeScript-muodossa.

TypeScript lisää valinnaisia ​​tyyppejä, luokkia ja moduuleja JavaScriptiin ja tukee työkaluja laajamittaisille JavaScript-sovelluksille mille tahansa selaimelle, mille tahansa isännälle tai mille tahansa käyttöjärjestelmälle. Monien muiden TypeScript-voittojen joukossa suosittu Angular-kehys on uudistettu TypeScriptissä.

Tyyppien avulla JavaScript-kehittäjät voivat käyttää erittäin tuottavia kehitystyökaluja ja käytäntöjä, kuten staattista tarkistusta ja koodin korjaamista, kehittäessään JavaScript-sovelluksia.

Tyypit ovat valinnaisia, ja tyypin päättely antaa muutamille tyyppimerkinnöille mahdollisuuden muuttaa koodisi staattista vahvistusta suuresti. Tyyppien avulla voit määrittää rajapinnat ohjelmistokomponenttien välillä ja saada tietoa olemassa olevien JavaScript-kirjastojen toiminnasta.

TypeScript tarjoaa tuen uusimmille ja kehittyville JavaScript-ominaisuuksille, mukaan lukien ECMAScript 2015: n ominaisuudet ja tulevat ehdotukset, kuten asynkronointitoiminnot ja sisustajat, vankkojen komponenttien rakentamiseksi.

TypeScript-kieli

TypeScript-kieli hyväksyy JavaScriptin kelvolliseksi, mutta tarjoaa tyyppihuomautusten, tyyppitarkistuksen kääntöhetkellä, luokkien ja moduulien lisäasetukset. Kaikki nämä ovat erittäin hyödyllisiä, kun yrität tuottaa vankkaa ohjelmistoa. Tavallinen JavaScript tuottaa virheitä vain ajon aikana ja sitten vain, jos ohjelma sattuu saavuttamaan virheitä sisältävän polun.

TypeScript in 5 minutes -opetusohjelma tekee eduista selkeät. Lähtökohtana on puhdas JavaScript .ts-laajennuksella:

funktion tervehdys (henkilö) {

palauta "Hei" + henkilö;

}

let user = "Jane-käyttäjä";

document.body.textContent = tervehdys (käyttäjä);

Jos käännät tämän tsc: llä, se tuottaa samanlaisen tiedoston .js-laajennuksella.

Opetusohjelmassa sinun on vaihdettava tämä koodi vaiheittain lisäämällä tyyppimerkintä henkilö: merkkijono funktion määrittelyssä kääntäminen, testaus, jonka kääntäjä tarkistaa, lisäämällä käyttöliittymä a: lle henkilö tyyppi ja lopuksi lisäämällä luokka Opiskelija. Lopullinen koodi on:

luokan opiskelija {

fullName: merkkijono;

konstruktori (julkinen etunimi: merkkijono, julkinen keski Alkuperäinen: merkkijono,

public lastName: merkkijono) {

this.täydellinenNimi = etunimi + "" + middleInitial + "" + sukunimi;

    }

}

käyttöliittymä Henkilö {

etunimi: merkkijono;

sukunimi: merkkijono;

}

funktion tervehdys (henkilö: henkilö) {

palauta "Hei" + henkilö.esinimi + "" + henkilö.sukunimi;

}

anna käyttäjän = uusi opiskelija ("Jane", "M.", "Käyttäjä");

document.body.textContent = tervehdys (käyttäjä);

Kun koot tämän ja tarkastelet lähetettyä JavaScriptiä, huomaat, että TypeScript-luokat ovat vain lyhenne samalle prototyyppipohjaiselle perinnölle, jota käytetään tavallisessa JavaScript ES3: ssa. Huomaa, että ominaisuudet henkilö. etunimi ja henkilö.sukunimi kääntäjä luo automaattisesti, kun se näkee ne julkinen määritteet Opiskelija luokan rakentaja, ja myös siirretty Henkilö käyttöliittymä. Yksi tyyppimerkintöjen mukavimmista eduista TypeScriptissä on, että työkalut, kuten Visual Studio Code, tunnistavat ne:

Jos koodissa on virheitä muokatessasi VS-koodia, näet virheilmoitukset Ongelmat-välilehdessä, esimerkiksi seuraavat, jos poistat rivin lopun Opiskelija:

Siirtyminen JavaScript-oppaasta kerrotaan yksityiskohtaisesti olemassa olevan JavaScript-projektin päivittämisestä. Ohittamalla asetusvaiheet, menetelmän ydin on nimetä .js-tiedostosi uudelleen .ts-tiedostoksi yksi kerrallaan. (Jos tiedosto käyttää JSX: ää, Reactin käyttämää laajennusta, sinun on nimettävä se uudelleen .tsx eikä .ts.) Kiristä sitten virheiden tarkistus ja korjaa virheet.

Sinun on muun muassa vaihdettava moduulipohjaista vaatia() tai määritellä() lauseita TypeScript-tuontilausekkeisiin ja lisää ilmoitustiedostot käyttämiisi kirjastomoduuleihin. Sinun tulisi myös kirjoittaa moduulien vienti uudelleen TypeScriptin avulla viedä lausunto. TypeScript tukee CommonJS-moduuleja, kuten Node.js.

Jos virheitä esiintyy väärässä argumenttimäärässä, voit kirjoittaa TypeScript-funktion ylikuormituksen allekirjoituksia. Tämä on tärkeä ominaisuus, josta JavaScript puuttuu. Lopuksi sinun tulisi lisätä tyyppejä omiin toimintoihisi ja tarvittaessa käyttää rajapintoja tai luokkia.

Sinun ei yleensä tarvitse kirjoittaa omia ilmoitustiedostojasi julkisiin JavaScript-kirjastoihin. DefinitelyTyped on ilmoitustiedostojen arkisto, joihin kaikkiin pääsee npm: n avulla. Löydät ilmoitukset TypeSearch-sivulta.

Kun olet muuntanut kaikki JavaScript-tiedostosi TypeScriptiksi, täydentänyt tyypit ja poistanut virheet, sinulla on paljon vankempi koodipohja. Sen sijaan, että korjaat testaajien tai käyttäjien ilmoittamia ajonaikaisia ​​virheitä jatkuvasti, pystyt havaitsemaan yleisimmät virheet staattisesti.

On syytä katsella Anders Hejlsbergin keskustelua TypeScriptistä. Kuten kuulette häneltä, TypeScript on skaalautuva JavaScript.