TypeScript vs. JavaScript: înțelegeți diferențele

world wide web rulează practic pe JavaScript, HTML și CSS. Din păcate, JavaScript nu are mai multe caracteristici care ar ajuta dezvoltatorii să-l folosească pentru aplicații la scară largă. Introduceți TypeScript.

ce este JavaScript?

JavaScript a început ca un limbaj de scripting pentru browserul web Netscape Navigator; Brendan Eich a scris prototipul pe o perioadă de 10 zile în 1995. Numele JavaScript este un semn al limbajului Java al Sun Microsystem, deși cele două limbi sunt destul de diferite, iar similitudinea numelor a dus la o confuzie semnificativă de-a lungul anilor. JavaScript, care a evoluat semnificativ, este acum acceptat pe toate browserele web moderne.

limbaj JavaScript

JavaScript este un limbaj multi-paradigmă. Are sintaxă și punct și virgulă, cum ar fi familia de limbi C. Are tastare slabă, dinamică și este fie interpretată, fie (mai des) compilată la timp. În general, JavaScript este un singur fir, deși există un API Web Workers care face multithreading și există evenimente, apeluri de funcții asincrone și apeluri inverse.

JavaScript acceptă programarea orientată pe obiecte folosind prototipuri mai degrabă decât moștenirea clasei utilizată în C++, Java și C#, deși o sintaxă class a fost adăugată la JavaScript ES6 în 2015. JavaScript acceptă, de asemenea, programarea funcțională, inclusiv închideri, recursivitate și lambdas (funcții anonime).

înainte de JavaScript ES6 limba a avut nici o optimizare apel coada; acum se întâmplă, deși trebuie să activați modul strict ('use strict') pentru a-l activa, iar implementarea variază de la browser la browser. Modul Strict modifică, de asemenea, semantica JavaScript și modifică unele erori în mod normal silențioase pentru a arunca erori.

ce este cu denumirea „ES6”? Numele limbajului JavaScript standardizat este ECMAScript (ES), după organismul de standarde internaționale ECMA; ES6 se mai numește ECMAScript 2015 (ES2015). ES2020 este în prezent un proiect de standard.

ca un exemplu simplu pentru a vă oferi aroma limbajului JavaScript, iată un cod pentru a decide dacă este zi sau seară și puneți dinamic salutul corespunzător într-un element web numit găsit în obiectul documentului browserului:

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

ecosistemul JavaScript

există numeroase API-uri JavaScript. Unele sunt furnizate de browser, cum ar fi API-ul document din Codul prezentat mai sus, iar unele sunt furnizate de terți. Unele API-uri se aplică la utilizarea pe partea clientului, unele la utilizarea pe partea serverului, unele la utilizarea desktopului și altele la mai multe medii.

API-urile browserului includ document object model (DOM) și browser object model (BOM), Geolocalizare, Canvas (grafică), WebGL (grafică accelerată GPU), HTMLMediaElement (audio și video) și WebRTC (comunicații în timp real).

API-urile terță parte abundă. Unele sunt interfețe pentru aplicații complete, cum ar fi Google Maps. Altele sunt utilitare care facilitează programarea JavaScript HTML5 și CSS, cum ar fi jQuery. Unele, cum ar fi Express, sunt cadre de aplicații pentru scopuri specifice; pentru Express, scopul este de a construi servere de aplicații web și mobile pe Node.js. O serie de alte cadre au fost construite pe partea de sus a Express. În 2016, am discutat despre 22 de cadre JavaScript într-un efort de a înțelege ceea ce devenea un fel de grădină zoologică; multe dintre aceste cadre există încă într-o formă sau alta, dar mai multe au trecut pe marginea drumului.

există mai multe module JavaScript, peste 300.000. Pentru a face față acestui lucru, folosim manageri de pachete, cum ar fi NPM, managerul de pachete implicit pentru Node.js.

o alternativă la NPM este fire, care a venit de la Facebook, și pretinde avantajul instalărilor deterministe. Instrumente similare includ Bower (de la Twitter), care gestionează componente front-end mai degrabă decât module de noduri; Ender, care se numește sora mai mică a npm; și jspm, care folosește module ES (cel mai nou standard ECMA pentru module), mai degrabă decât module CommonJS, standardul mai vechi de facto susținut de npm.

webpack include module JavaScript în active statice pentru browser. Browserify permite dezvoltatorilor să scrie nod.module de stil js care compilează pentru utilizare în browser. Grunt este un alergător DE SARCINI JavaScript orientat spre fișiere, iar gulp este un sistem de construire în flux și un alergător DE SARCINI JavaScript. Alegerea dintre grunt și gulp nu este decisivă. Am instalat și de a folosi oricare dintre acestea a fost configurat pentru un anumit proiect.

pentru a face codul JavaScript mai fiabil în absența compilării, folosim linters. Termenul provine de la instrumentul scame C-language, care a fost un utilitar standard Unix. Linterele JavaScript includ JSLint, JSHint și ESLint. Puteți automatiza linterele de rulare după modificările Codului folosind un alergător de sarcini sau IDE. Din nou, alegerea dintre linters nu este clară și folosesc oricare dintre acestea a fost configurat pentru un anumit proiect.

vorbind despre editori și IDE, am revizuit 6 IDE JavaScript și 10 editori JavaScript, cel mai recent în 2019. Alegerile mele de top au fost Sublime Text (Editor foarte rapid), Visual Studio Code (Editor configurabil/IDE) și WebStorm (IDE).

Transpilerele vă permit să traduceți alte limbi, cum ar fi CoffeeScript sau TypeScript în JavaScript și să traduceți JavaScript modern (cum ar fi codul ES2015) într-un JavaScript de bază care rulează în (aproape) orice browser. (Toate pariurile sunt dezactivate pentru versiunile anterioare ale Internet Explorer.) Cel mai comun transpiler pentru JavaScript modern este Babel.

ce este TypeScript?

TypeScript este un superset tastat de JavaScript care compilează JavaScript simplu (ES3 sau mai mare; este configurabil). Compilatorul de linie de comandă open source TypeScript poate fi instalat ca nod.pachetul js. Suportul TypeScript vine cu Visual Studio 2017 și Visual Studio 2019, Visual Studio Code și WebStorm și poate fi adăugat la Sublime Text, Atom, Eclipse, Emacs și vim. Compilatorul/transpilerul TypeScript tsc este scris în TypeScript.

TypeScript adaugă tipuri, clase și module opționale la JavaScript și acceptă instrumente pentru aplicații JavaScript la scară largă pentru orice browser, pentru orice gazdă, pe orice sistem de operare. Printre multe alte victorii pentru TypeScript, popularul Cadru Angular a fost reînnoit în TypeScript.

tipurile permit dezvoltatorilor JavaScript să utilizeze instrumente și practici de dezvoltare extrem de productive, cum ar fi verificarea statică și refactorizarea codului atunci când dezvoltă aplicații JavaScript.

tipurile sunt opționale, iar inferența de tip permite câteva adnotări de tip pentru a face o mare diferență în verificarea statică a codului dvs. Tipurile vă permit să definiți interfețe între componentele software și să obțineți informații despre comportamentul bibliotecilor JavaScript existente.

TypeScript oferă suport pentru cele mai recente și în evoluție caracteristici JavaScript, inclusiv cele de la ECMAScript 2015 și propuneri viitoare, cum ar fi funcțiile async și decoratori, pentru a ajuta la construirea de componente robuste.

TypeScript language

TypeScript language acceptă JavaScript ca valid, dar oferă opțiunile suplimentare de adnotări de tip, verificarea tipului la momentul compilării, clase și module. Toate acestea sunt extrem de utile atunci când încercați să produceți software robust. JavaScript simplu generează erori numai în timpul rulării și apoi numai dacă programul dvs. se întâmplă să ajungă la o cale cu erori.

TypeScript în 5 minute tutorial face beneficiile clare. Punctul de plecare este pur JavaScript cu un .extensie ts:

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

dacă compilați acest lucru cu tsc va produce un fișier identic cu un .extensie js.

tutorialul a vă schimba acest cod într-un mod treptat, adăugând o adnotare tip person:string în definiția funcției, compilarea, testarea tip verificarea de către compilator, adăugând o interfață pentru un tip person, și în cele din urmă adăugând o clasă pentru Student. Codul final este:

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);

când compilați acest lucru și priviți JavaScript emis, veți vedea că clasele din TypeScript sunt doar o stenografie pentru aceeași moștenire bazată pe prototip care este utilizată în JavaScript ES3 simplu. Rețineți că proprietățile person.firstName și person.lastName sunt generate automat de compilator atunci când vede atributele lor public în Student constructor de clasă, și, de asemenea, reportate la Person interfață. Unul dintre cele mai frumoase beneficii ale adnotărilor de tip în TypeScript este că acestea sunt recunoscute de instrumente, cum ar fi Visual Studio Code:

IDG

dacă există erori în cod pe măsură ce editați în VS Code, veți vedea mesajele de eroare în fila probleme, de exemplu următoarele Dacă ștergeți sfârșitul liniei cu instanțierea Student:

IDG

Migrarea de la JavaScript tutorial merge în detaliu despre cum să faceți upgrade un proiect JavaScript existent. Sărind peste pașii de configurare ,esența metodei este de a redenumi dvs.js fișiere la .ts unul la un moment dat. (Dacă fișierul dvs. utilizează JSX, o extensie utilizată de React, va trebui să o redenumiți .tsx mai degrabă decât .C.) Apoi strângeți verificarea erorilor și remediați erorile.

printre altele, va trebui să modificați declarațiile require() sau define() bazate pe module în declarații de import TypeScript și să adăugați fișiere de declarație pentru orice module de bibliotecă pe care le utilizați. De asemenea, ar trebui să rescrieți exporturile modulului utilizând instrucțiunea TypeScript export. TypeScript acceptă module CommonJS, cum ar fi Node.js face.

dacă primiți erori cu privire la numărul greșit de argumente, puteți scrie semnături de suprasarcină funcție TypeScript. Aceasta este o caracteristică importantă JavaScript lipsește. În cele din urmă, ar trebui să adăugați tipuri la propriile funcții și, dacă este cazul, să utilizați interfețe sau clase.

de obicei, nu este nevoie să scrieți propriile fișiere de declarație pentru bibliotecile JavaScript din domeniul public. DefinitelyTyped este un depozit de fișiere declarație, toate acestea sunt accesibile folosind npm. Puteți găsi declarațiile folosind pagina TypeSearch.

odată ce ați convertit toate fișierele JavaScript la TypeScript, beefed tipurile, și a eliminat erorile, veți avea o bază de cod mult mai robust. În loc să remediați în mod constant erorile de rulare raportate de testeri sau utilizatori, veți putea detecta cele mai frecvente erori static.

merită urmărit Anders Hejlsberg discuta TypeScript. După cum veți auzi de la el, TypeScript este JavaScript care scalează.

Lasă un răspuns

Adresa ta de email nu va fi publicată.