Programavimas

„TypeScript“ ir „JavaScript“: supraskite skirtumus

Internetas iš esmės veikia naudojant „JavaScript“, HTML ir CSS. Deja, „JavaScript“ trūksta kelių funkcijų, kurios padėtų kūrėjams ją naudoti didelio masto programoms. Įveskite „TypeScript“.

Kas yra „JavaScript“?

„JavaScript“ prasidėjo kaip „Netscape Navigator“ interneto naršyklės scenarijų kalba; 1995 m. Brendanas Eichas parašė prototipą per 10 dienų. Pavadinimas „JavaScript“ yra linkimas į „Sun Microsystem“ „Java“ kalbą, nors abi kalbos yra gana skirtingos, o pavadinimų panašumas daugelį metų sukėlė didelę painiavą. „JavaScript“, kuris gerokai patobulėjo, dabar palaiko visos šiuolaikinės žiniatinklio naršyklės.

„Netscape Navigator“ greitai įdiegus kliento „JavaScript“, buvo įdiegta serverio „JavaScript“ žiniatinklio serveriuose „Netscape Enterprise Server“ ir „Microsoft IIS“. Praėjus maždaug 13 metų, Ryanas Dahlas pristatė „Node.js“ kaip atviro kodo, daugiaplatformę „JavaScript“ vykdymo aplinką, nepriklausančią nuo bet kurios naršyklės ar žiniatinklio serverio.

„JavaScript“ kalba

„JavaScript“ yra kelių paradigmų kalba. Ji turi garbanotųjų skliaustų sintaksę ir kabliataškius, kaip ir C kalbų šeima. Jis turi silpną, dinamišką spausdinimą ir yra arba interpretuojamas, arba (dažniau) kompiliuojamas tiesiog laiku. Apskritai „JavaScript“ yra vienos gijos, nors yra „Web Workers“ API, atliekanti daugialypį gijimą, ir yra įvykių, asinchroninių funkcijų skambučių ir atgalinių skambučių.

„JavaScript“ palaiko objektyvų programavimą naudojant prototipus, o ne klasės paveldėjimą, naudojamą C ++, Java ir C #, nors klasė sintaksė buvo įtraukta į „JavaScript ES6“ 2015 m. „JavaScript“ taip pat palaiko funkcinį programavimą, įskaitant uždarymus, rekursiją ir lambdas (anonimines funkcijas).

Iki „JavaScript ES6“ kalba neturėjo uodegos skambučio optimizavimo; dabar tai daro, nors reikia įjungti griežtas režimas („naudoti griežtai“), kad jis būtų įgalintas, o įgyvendinimas įvairiose naršyklėse skiriasi. Griežtas režimas taip pat keičia „JavaScript“ semantiką ir pakeičia kai kurias paprastai netylančias klaidas, kad sukeltų klaidas.

Kas yra su „ES6“ žymėjimu? Standartizuotos „JavaScript“ kalbos pavadinimas yra ECMAScript (ES), pavadintas ECMA tarptautinės standartų įstaigos; ES6 taip pat vadinamas ECMAScript 2015 (ES2015). ES2020 šiuo metu yra standarto projektas.

Kaip paprastą pavyzdį, suteikiantį „JavaScript“ kalbos skonį, pateikiame kodą, kuris nuspręs, ar diena, ar vakaras, ir dinamiškai įdėkite atitinkamą sveikinimą į pavadintą žiniatinklio elementą, esantį naršyklės dokumento objekte:

var hour = nauja data (). getHours ();

var sveikinimas;

jei (valanda <18) {

sveikinimas = "Laba diena";

} Kitas {

sveikinimas = "Labas vakaras";

}

document.getElementById ("demo"). internalHTML = sveikinimas;

„JavaScript“ ekosistema

Yra daugybė „JavaScript“ API. Kai kuriuos teikia naršyklė, pvz., dokumentas API aukščiau nurodytame kode, o kai kuriuos teikia trečiosios šalys. Kai kurios API taikomos kliento, kai kurios - serverio, kai kurios - darbalaukio, o kitos - daugiau nei vienai aplinkai.

Naršyklės API apima dokumento objekto modelį (DOM) ir naršyklės objekto modelį (BOM), geografinę vietą, „Canvas“ (grafika), „WebGL“ (GPU pagreitinta grafika), „HTMLMediaElement“ (garsas ir vaizdo įrašai) ir „WebRTC“ (realaus laiko ryšiai).

Trečiųjų šalių API yra daug. Kai kurios yra visų programų, pvz., „Google“ žemėlapių, sąsajos. Kiti yra įrankiai, kurie palengvina „JavaScript HTML5“ ir CSS programavimą, pvz., „JQuery“. Kai kurie, pvz., „Express“, yra programų pagrindai, skirti konkretiems tikslams; „Express“ tikslas yra sukurti žiniatinklio ir mobiliųjų programų serverius „Node.js“. „Express“ viršuje buvo sukurta nemažai kitų sistemų. 2016 m. Aptariau 22 „JavaScript“ sistemas, siekdamas suvokti, kas virto zoologijos sodu; daugelis šių sistemų vis dar egzistuoja vienokia ar kitokia forma, tačiau kelios ėjo iš kelio.

Yra daugelis daugiau „JavaScript“ modulių, daugiau nei 300 000. Norėdami tai išspręsti, mes naudojame paketų tvarkytojai, pvz., „npm“, numatytasis „Node.js“ paketų tvarkytuvas.

Viena iš „npm“ alternatyvų yra verpalai, atkeliavę iš „Facebook“, ir tvirtina deterministinių diegimų pranašumą. Panašūs įrankiai yra „Bower“ (iš „Twitter“), kuris valdo sąsajos komponentus, o ne „Node“ modulius; Enderis, kuris save vadina npm mažąja seserimi; ir „jspm“, kuris naudoja ES modulius (naujesnį ECMA standartą moduliams), o ne „CommonJS“ modulius, senesnį de facto standartą, palaikomą npm.

„Webpack“ sujungia „JavaScript“ modulius į statinius naršyklės išteklius. Naršyklės patvirtinimas leidžia kūrėjams rašyti „Node.js“ stiliaus modulius, kurie kaupiami naudoti naršyklėje. „Grunt“ yra į failus orientuotas „JavaScript“ užduočių vykdytojas, o „gulp“ - srautinio perdavimo sistemos ir „JavaScript“ užduočių bėgikas. Pasirinkimas tarp ūžimo ir gurkšnojimo nėra lemiamas. Aš įdiegiau ir naudoju tą, kuris buvo sukurtas tam tikram projektui.

Norėdami, kad „JavaScript“ kodas būtų patikimesnis, jei nėra kompiliavimo, naudojame linterius. Šis terminas kilęs iš C kalbos pūkų įrankio, kuris buvo standartinis „Unix“ įrankis. „JavaScript“ sąsajos apima „JSLint“, „JSHint“ ir „ESLint“. Pakeitus kodą, galite automatizuoti veikiančias pintines naudodami užduočių bėgiklį arba savo IDE. Vėlgi, pasirinkimas tarp tinklų nėra aiškus, ir aš naudoju tą, kuris buvo sukurtas tam tikram projektui.

Kalbėdamas apie redaktorius ir IDE, aš peržiūrėjau 6 „JavaScript IDE“ ir 10 „JavaScript“ redaktorių, paskutinį kartą 2019 m. Mano geriausi pasirinkimai buvo „Sublime Text“ (labai greitas redaktorius), „Visual Studio“ kodas (konfigūruojamas redaktorius / IDE) ir „WebStorm“ (IDE).

Transpileriai leidžia jums išversti kai kurias kitas kalbas, pvz., „CoffeeScript“ ar „TypeScript“, į „JavaScript“, o šiuolaikinę „JavaScript“ (pvz., ES2015 kodą) į pagrindinę „JavaScript“, kuri veikia (beveik) bet kurioje naršyklėje. (Visi statymai atmetami ankstesnėms „Internet Explorer“ versijoms.) Dažniausias šiuolaikinės „JavaScript“ programos transliuotojas yra „Babel“.

Kas yra „TypeScript“?

„TypeScript“ yra tipinis „JavaScript“ rinkinys, kompiliuojamas į paprastą „JavaScript“ (ES3 ar naujesnę versiją; jį galima konfigūruoti). Atvirojo kodo „TypeScript“ komandų eilutės kompiliatorius gali būti įdiegtas kaip „Node.js“ paketas. „TypeScript“ palaikymas teikiamas kartu su „Visual Studio 2017“ ir „Visual Studio 2019“, „Visual Studio Code“ ir „WebStorm“ ir gali būti pridėtas prie „Sublime Text“, „Atom“, „Eclipse“, „Emacs“ ir „Vim“. „TypeScript“ kompiliatorius / „transpiler tsc“ yra parašytas „TypeScript“.

„TypeScript“ prideda pasirinktinius tipus, klases ir modulius prie „JavaScript“ ir palaiko įrankius didelio masto „JavaScript“ programoms bet kurioje naršyklėje, bet kuriame pagrindiniame kompiuteryje ir bet kurioje OS. Be daugelio kitų „TypeScript“ laimėjimų, „TypeScript“ buvo atnaujinta populiari „Angular“ sistema.

Tipai leidžia „JavaScript“ kūrėjams naudoti labai produktyvius kūrimo įrankius ir praktiką, pvz., Statinį tikrinimą ir kodo pertvarkymą, kuriant „JavaScript“ programas.

Tipai yra neprivalomi, o darant išvadą, kad keli tipo komentarai gali labai pakeisti statinį kodo patvirtinimą. Tipai leidžia apibrėžti sąsajas tarp programinės įrangos komponentų ir gauti įžvalgų apie esamų „JavaScript“ bibliotekų veikimą.

„TypeScript“ palaiko naujausias ir tobulėjančias „JavaScript“ funkcijas, įskaitant tas, kurios pateiktos iš „ECMAScript 2015“, ir būsimus pasiūlymus, pvz., Asinchronines funkcijas ir dekoratorius, kad padėtų kurti patikimus komponentus.

„TypeScript“ kalba

„TypeScript“ kalba priima „JavaScript“ kaip galiojančią, tačiau siūlo papildomas tipo anotacijų, tipo tikrinimo kompiliavimo metu, klasių ir modulių parinktis. Visa tai yra nepaprastai naudinga, kai bandote sukurti patikimą programinę įrangą. Paprastas „JavaScript“ generuoja klaidas tik vykdymo metu ir tada, tik jei jūsų programa pasiekia kelią su klaidomis.

„TypeScript“ per 5 minutes trukmės pamoka išaiškina naudą. Pradinis taškas yra grynas „JavaScript“ su plėtiniu .ts:

funkcijos sveikintojas (asmuo) {

grąžinti „Labas“ + asmuo;

}

let user = "Jane vartotojas";

document.body.textContent = sveikintojas (vartotojas);

Jei sukompiliuosite tai naudodami „tsc“, jis sukurs identišką failą su .js plėtiniu.

Pamoka turi pakeisti šį kodą palaipsniui, pridedant tipo komentarą asmuo: styga funkcijos apibrėžime, kompiliuojant, tikrinant kompiliatoriaus tipo patikrinimą, pridedant sąsają a asmuo tipą ir galiausiai pridedate klasę Studentas. Galutinis kodas yra:

klasės mokinys {

fullName: eilutė;

konstruktorius (public firstName: string, public middle Pradinis: string,

public lastName: string) {

tai.vardas = vardas + "" + vidurinis pradinis + "" + pavardė;

    }

}

sąsaja Asmuo {

firstName: string;

pavardė: eilutė;

}

funkcijos sveikintojas (asmuo: asmuo) {

grąžinti "Sveiki" + asmuo.vardas + "" + asmuo.pavardė;

}

tegul vartotojas = naujas studentas („Jane“, „M.“, „Vartotojas“);

document.body.textContent = sveikintojas (vartotojas);

Kai sukursite tai ir pažvelgsite į išleistą „JavaScript“, pamatysite, kad „TypeScript“ klasės yra tik to paties prototipu pagrįsto paveldėjimo, kuris naudojamas paprastoje „JavaScript ES3“, sutrumpinimas. Atkreipkite dėmesį, kad savybės asmuo.vardas ir asmuo.pavardė kompiliatorius automatiškai sugeneruoja, kai mato juos visuomenės atributus Studentas klasės konstruktorius, taip pat perkeltas į Asmuo sąsaja. Vienas gražiausių „TypeScript“ tipo komentarų pranašumų yra tas, kad juos atpažįsta įrankiai, pvz., „Visual Studio Code“:

Jei redaguojant VS kodą yra klaidų kode, klaidų pranešimus matysite skirtuke Problemos, pavyzdžiui, jei ištrinsite eilutės pabaigą iškart Studentas:

Mokomojoje programoje „Perkėlimas iš„ JavaScript ““ išsamiai aprašoma, kaip atnaujinti esamą „JavaScript“ projektą. Praleidus sąrankos veiksmus, metodo esmė yra pervadinti .js failus į .ts po vieną. (Jei jūsų faile naudojamas „React“ naudojamas plėtinys JSX, turėsite jį pervadinti į .tsx, o ne .ts.) Tada sugriežtinkite klaidų tikrinimą ir ištaisykite klaidas.

Be kitų dalykų, turėsite pakeisti modulį reikalauti () arba apibrėžti () teiginius į „TypeScript“ importo sakinius ir pridėkite deklaracijos failus visiems naudojamiems bibliotekos moduliams. Taip pat turėtumėte perrašyti savo modulio eksportą naudodami „TypeScript“ eksportas pareiškimas. „TypeScript“ palaiko „CommonJS“ modulius, kaip tai daro „Node.js“.

Jei gausite klaidų dėl netinkamo argumentų skaičiaus, galite parašyti „TypeScript“ funkcijos perkrovos parašus. Tai svarbi funkcija, kurios trūksta „JavaScript“. Galiausiai turėtumėte pridėti tipų prie savo funkcijų ir prireikus naudoti sąsajas ar klases.

Paprastai nereikia rašyti savo deklaracijos failų viešosioms „JavaScript“ bibliotekoms. „DefinitelyTyped“ yra deklaracijų failų saugykla, prie kurių visų galima prisijungti naudojant „npm“. Deklaracijas galite rasti naudodami „TypeSearch“ puslapį.

Konvertuodami visus „JavaScript“ failus į „TypeScript“, patobulinę tipus ir pašalinę klaidas, turėsite daug patikimesnę kodų bazę. Užuot nuolat taisę bandymo vykdytojų ar naudotojų nurodytas vykdymo laiko klaidas, galėsite statiškai nustatyti dažniausiai pasitaikančias klaidas.

Verta stebėti, kaip Andersas Hejlsbergas diskutuoja apie „TypeScript“. Kaip girdėsite iš jo, „TypeScript“ yra „JavaScript“, kuris keičia mastelį.