TypeScript vs. JavaScript: Understand the differences

the world Wide web toimii periaatteessa Javascriptillä, HTML: llä ja CSS: llä. Valitettavasti JavaScriptistä puuttuu useita ominaisuuksia, jotka auttaisivat kehittäjiä käyttämään sitä laajamittaisissa sovelluksissa. Kirjoita Konekirjoitus.

mikä on JavaScript?

JavaScript aloitti Netscape Navigator-verkkoselaimen skriptauskielenä; Brendan Eich kirjoitti prototyypin 10 päivän aikana vuonna 1995. Nimi JavaScript on nyökkäys Sun Microsystemin Java-kielelle, vaikka nämä kaksi kieltä ovat varsin erilaisia, ja nimien samankaltaisuus on johtanut merkittävään sekaannukseen vuosien varrella. JavaScript, joka on kehittynyt merkittävästi, on nyt tuettu kaikissa moderneissa verkkoselaimissa.

JavaScript-kieli

JavaScript on moniparadigma-kieli. Siinä on C-kieliperheen tapaan kiharakauluksinen syntaksi ja puolipisteet. Siinä on heikko, dynaaminen tyypitys, ja se on joko tulkittu tai (useammin) just-in-time käännetty. Yleensä JavaScript on yksikierteinen, vaikka on Web Workers API, joka tekee monilukua, ja on tapahtumia, asynkronisia funktiokutsuja, ja callbacks.

JavaScript tukee prototyyppejä käyttävää olio-ohjelmointia C++: ssa, Javassa ja C#: ssa käytetyn luokkaperinnön sijaan, joskin class syntaksi lisättiin JavaScript ES6: een vuonna 2015. JavaScript tukee myös funktionaalista ohjelmointia, mukaan lukien sulkemiset, rekursio ja lambdat (anonyymit funktiot).

ennen JavaScriptiä ES6 kielessä ei ollut häntäkutsujen optimointia; nyt se toimii, vaikka sen mahdollistamiseksi on otettava käyttöön tiukka tila ('use strict'), ja toteutus vaihtelee selaimittain. Tiukka tila muuttaa myös JavaScriptin semantiikkaa ja muuttaa joitakin normaalisti äänettömiä virheitä heittovirheiksi.

mikä on” ES6 ” – nimitys? Standardoidun JavaScript-kielen nimi on ECMAScript (ES) kansainvälisen standardointielimen ECMA: n mukaan; ES6: sta käytetään myös nimeä ECMAScript 2015 (ES2015). ES2020 on tällä hetkellä standardiluonnos.

yksinkertaisena esimerkkinä JavaScript-kielen maun antamiseksi tässä on jokin koodi, jolla voit päättää, onko päivä vai ilta, ja dynaamisesti laittaa sopivan tervehdyksen selaimen asiakirjaobjektista löytyvään nimettyyn verkkoelementtiin:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScript-ekosysteemi

JavaScript-sovellusliittymiä on lukuisia. Osa on selaimen toimittamia, kuten yllä olevan koodin document API, ja osa on kolmansien osapuolten toimittamia. Jotkin sovellusliittymät koskevat asiakaspuolen käyttöä, jotkut palvelinpuolen käyttöä, jotkut työpöytäkäyttöä ja jotkut useampaa kuin yhtä ympäristöä.

selaimen sovellusliittymiä ovat dokumenttiobjektimalli (DOM) ja selainobjektimalli (BOM), Geolocation, Canvas (graphics), WebGL (GPU-accelerated graphics), HTMLMediaElement (audio and video) ja WebRTC (real-time communications).

kolmannen osapuolen sovellusliittymiä on runsaasti. Osa on rajapintoja täysiin sovelluksiin, kuten Google Mapsiin. Muita ovat apuohjelmat, jotka helpottavat JavaScript HTML5-ja CSS-ohjelmointia, kuten jQuery. Jotkut, kuten Express, ovat sovelluskehyksiä tiettyihin tarkoituksiin; Expressille tarkoituksena on rakentaa node-sivustolle verkko-ja mobiilisovelluspalvelimia.js. Expressin päälle on rakennettu useita muitakin kehyksiä. Tässä 2016, keskustelin 22 JavaScript kehyksiä pyrkimyksenä saada järkeä, mitä oli tulossa jotain eläintarha; monet näistä kehyksistä on edelleen olemassa muodossa tai toisessa, mutta useat ovat menneet matkan varrella.

JavaScript-moduuleja on paljon enemmän, yli 300 000. Tätä varten Käytämme paketinhallintaohjelmia, kuten npm: ää, joka on Oletuspakettien hallinta solmulle.js.

yksi vaihtoehto npm: lle on Facebookista lähtöisin oleva lanka, joka väittää determinististen installaatioiden etua. Samanlaisia työkaluja ovat Bower (Twitteristä), joka hallinnoi etupään komponentteja Solmumoduulien sijaan; Ender, joka kutsuu itseään NPM: n pikkusiskoksi; ja JSPM, joka käyttää CommonJS-moduulien sijaan es-moduuleja (uudempi ECMA-standardi moduuleille), vanhempi de-facto-standardi, jota npm tukee.

Webpack niputtaa JavaScript-moduulit selaimen staattisiksi resursseiksi. Browserify sallii kehittäjien kirjoittaa solmua.JS-tyyliset moduulit, jotka kokoavat käytettäväksi selaimessa. Grunt on tiedostopohjainen JavaScript-tehtäväjuoksija, ja gulp on streaming build-järjestelmä ja JavaScript-tehtäväjuoksija. Valinta Gruntin ja gulpin välillä ei ole ratkaiseva. Olen sekä asentanut ja käyttää kumpi on perustettu tietyn projektin.

jotta JavaScript-koodi olisi luotettavampi käännöksen puuttuessa, käytämme lintereitä. Termi tulee C-kielisestä nukkatyökalusta, joka oli tavallinen Unix-apuohjelma. JavaScript-lintereitä ovat muun muassa JSLint, JSHint ja ESLint. Voit automatisoida lintereiden ajamisen koodimuutosten jälkeen tehtäväjuoksun tai IDE: n avulla. Jälleen, valinta keskuudessa linters ei ole selvä, ja käytän kumpi oli perustettu tietyn projektin.

editoreista ja Ideistä puheen ollen olen arvostellut 6 JavaScript-Ideä ja 10 JavaScript-editoria, viimeksi vuonna 2019. Minun top valintoja olivat Sublime teksti (erittäin nopea editori), Visual Studio koodi (konfiguroitavissa editori/IDE), ja WebStorm (IDE).

Transpilerit mahdollistavat joidenkin muiden kielten, kuten CoffeeScript – tai TypeScript-kielien kääntämisen JavaScriptiksi ja modernin JavaScriptin (kuten ES2015-koodin) kääntämisen perus JavaScriptille, joka toimii (lähes) missä tahansa selaimessa. (Kaikki vedot ovat pois Internet Explorerin varhaisista versioista.) Yleisin transpileri nykyiselle JavaScriptille on Babel.

mikä on konekirjoitus?

TypeScript on tyypitetty JavaScriptin superjoukko, joka kokoaa pelkäksi JavaScriptiksi (ES3 tai uudempi; se on konfiguroitavissa). Avoimen lähdekoodin TypeScript-komentorivin Kääntäjä Voidaan asentaa solmuksi.js-paketti. TypeScript tuki tulee Visual Studio 2017 ja Visual Studio 2019, Visual Studio koodi, ja WebStorm, ja voidaan lisätä Sublime Text, Atom, Eclipse, Emacs, ja Vim. TypeScript kääntäjä / transpiler tsc on kirjoitettu TypeScript.

TypeScript lisää valinnaisia tyyppejä, luokkia ja moduuleja Javascriptiin ja tukee suuren mittakaavan JavaScript-sovelluksia mille tahansa selaimelle, mille tahansa palvelimelle, mille tahansa käyttöjärjestelmälle. Monien muiden Typescriptin voittojen joukossa suosittu Angular framework on uudistettu Typescriptiksi.

tyypit mahdollistavat sen, että JavaScript-kehittäjät voivat käyttää erittäin tuottavia kehitystyökaluja ja-käytäntöjä, kuten staattista tarkistusta ja koodien refaktorointia JavaScript-sovelluksia kehitettäessä.

tyypit ovat valinnaisia, ja type inference sallii muutaman tyyppimerkinnän tehdä suuren eron koodin staattiseen todentamiseen. Tyyppien avulla voit määritellä rajapinnat ohjelmistokomponenttien välillä ja saada tietoa nykyisten JavaScript-kirjastojen käyttäytymisestä.

TypeScript tarjoaa tuen uusimmille ja kehittyville JavaScript-ominaisuuksille, mukaan lukien ECMAScript 2015: n ominaisuudet, ja tuleville ehdotuksille, kuten async-toiminnoille ja sisustajille, jotka auttavat rakentamaan kestäviä komponentteja.

TypeScript language

TypeScript language hyväksyy JavaScriptin kelvolliseksi, mutta tarjoaa lisävaihtoehtoja tyyppimerkinnöille, type checkingille käännösaikaan, luokille ja moduuleille. Kaikki nämä ovat valtavan hyödyllisiä, kun yrität tuottaa kestäviä ohjelmistoja. Plain JavaScript luo virheitä vain runtime, ja sitten vain, jos ohjelma sattuu saavuttamaan polku virheitä.

Konekirjoituksella 5 minuutin opetusohjelma tekee hyödyt selväksi. Lähtökohtana on puhdas JavaScript a: lla .ts-laajennus:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

jos käännät tämän tsc: llä, se tuottaa identtisen tiedoston a: lla .JS-laajennus.

opetusohjelma käskee sinua muuttamaan tätä koodia vaiheittain, lisäämään tyyppimerkinnän person:string funktion määritelmään, kokoamaan, testaamaan tyyppitarkistuksen kääntäjän toimesta, lisäämään liittymän person tyypille ja lopuksi lisäämään luokan Student. Lopullinen koodi on:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

kun käännät tämän ja katsot lähetettyä JavaScriptiä, näet, että TypeScript-luokat ovat vain pikakirjoitus samalle prototyyppipohjaiselle perinnölle, jota käytetään Plain JavaScript ES3: ssa. Huomaa, että ominaisuudet person.firstName ja person.lastName syntyvät automaattisesti kääntäjälle, kun se näkee niiden public attribuutit Student luokan konstruktorissa, ja ne siirretään myös Person rajapintaan. Yksi TypeScript-tekstien mukavimmista eduista on se, että ne tunnistaa työkaluista, kuten Visual Studio Code:

IDG

jos koodissa on virheitä, kun muokkaat vs. Code-koodia, näet Virheilmoitukset ongelmat-välilehdessä, esimerkiksi seuraavan, jos poistat rivin lopun instantiaatiolla Student:

IDG

JavaScript-tutorialista siirtyminen kertoo yksityiskohtaisesti, miten olemassa olevaa JavaScript-projektia voi päivittää. Ohita asetukset vaiheet, ydin menetelmä on nimetä uudelleen .JS tiedostot .ts yksi kerrallaan. (Jos tiedostosi käyttää Reactin käyttämää JSX-laajennusta, sinun on nimettävä se uudelleen .tsx mieluummin kuin .ts.) Sitten tiukentaa virhetarkistus ja korjata virheet.

sinun on muun muassa muutettava moduulipohjaisia require() tai define()-lausekkeita Konekirjoituksiksi tuontilausekkeiksi ja lisättävä ilmoitustiedostoja kaikkiin käyttämiisi kirjastomoduuleihin. Sinun pitäisi myös kirjoittaa moduulin vienti käyttäen konekirjoitusta export lauseke. TypeScript tukee CommonJS-moduuleja, kuten solmua.js: llä on.

jos saat virheitä väärästä argumenttimäärästä, voit kirjoittaa Konekirjoitusfunktion ylikuormitus allekirjoituksia. Se on tärkeä ominaisuus JavaScript puuttuu. Lopuksi kannattaa lisätä tyyppejä omiin toimintoihin ja tarvittaessa käyttää rajapintoja tai luokkia.

public domain JavaScript-kirjastoihin ei yleensä tarvitse kirjoittaa omia ilmoitustiedostoja. DefinitelyTyped on ilmoitustiedostojen arkisto, jotka kaikki ovat käytettävissä npm: n avulla. Ilmoitukset löytyvät Ladontatutkimussivulta.

kun olet muuntanut kaikki JavaScript-tiedostot Konekirjoituksiksi, tarkentanut tyypit ja poistanut virheet, sinulla on paljon vankempi koodikanta. Sen sijaan, että jatkuvasti vahvistamisesta runtime virheet ilmoittamat testaajat tai käyttäjät, voit tunnistaa yleisimmät virheet staattisesti.

kannattaa seurata Anders Hejlsbergin keskustelua Konekirjoituksesta. Kuten kuulet häneltä, TypeScript on JavaScript, joka skaalaa.

Vastaa

Sähköpostiosoitettasi ei julkaista.