Typescript vs Javascript – Înțelegerea diferenței

Una dintre întrebările frecvente pe care le primesc este, care este diferența dintre JavaScript și Typescript?

Să aflăm…

Din momentul în care ați început să codificați, JavaScript (JS) ar fi făcut parte din toate proiectele dvs. front-end. Dacă sunteți puțin familiarizat cu JS, gândiți-vă la TypeScript ca la JS plus câteva caracteristici suplimentare care vă fac aplicația mai ordonată și mai tastată. TypeScript a fost dezvoltat ca un proiect open-source de către Microsoft pentru a face dezvoltarea JS mai eficientă și pentru a detecta erorile de compilare de la început.

În acest articol, vom discuta câteva caracteristici importante ale JavaScript și TypeScript și diferențele dintre ambele limbaje de scripting.

Ce este JavaScript?

JavaScript este folosit pentru scripting-ul pe partea clientului. Puteți crea un script pe o pagină HTML sau puteți crea un fișier cu extensia .js și îl puteți include în fișierul dvs. HTML. Un exemplu comun în lumea reală în care puteți vedea JavaScript este validarea paginii de conectare, în care vi se afișează o eroare când numele de utilizator/parola este incorectă.

Să scriem un cod JS simplu și să-l rulăm în browser:

Creați un fișier example.html și adăugați următorul cod:

<script>

feeling = 'happy';

feeling = 23;

</script>

Acest cod simplu declară o variabilă și îi atribuie o valoare happy (șir). Putem atribui aceleiași variabile o valoare de alt tip (număr). JavaScript nu s-ar plânge de asta și putem rula codul pe orice browser fără probleme. Acum, să obținem valoarea sentimentului de la utilizator:

  Family Guy Căutarea lucrurilor este captivantă, amuzantă și chestii [Game Review]

HTML-ul nostru va arăta astfel:

<input type = "textbox" id = "howyoufeel">

iar scenariul va fi:

feeling = document.getElementById("howyoufeel").value;

Dacă nu punem verificări explicite în script, JS va accepta orice valoare de la utilizator și o va transmite mai departe. Deci, puteți pune orice ca 234, @.#$% etc. în variabila sentiment.

Caracteristicile JavaScript

Din cele de mai sus, putem observa următoarele caracteristici ale JavaScript:

  • Limbajul de scriptare slab tastat
  • Folosit pentru scripturi la nivel client și server (cu node.js).
  • Flexibil și dinamic
  • Sprijinit de toate browserele majore
  • Ușoare și interpretate

Dacă sunteți interesat să stăpâniți JavaScript, verificați acest lucru curs Udemy.

Ce este TypeScript?

O aplicație reală va avea multe validări și verificări dinamice. Pentru astfel de aplicații, codul JavaScript va deveni greu de testat la un moment dat, în principal pentru că nu există verificarea tipului. În timp ce obțineți valori de la utilizatori, este important să le obțineți chiar de la început. Aici intervine TypeScript.

TypeScript este puternic tastat și are un compilator care se plânge dacă nu definiți tipul unei variabile.

Atât JavaScript, cât și TypeScript sunt conforme cu specificațiile ECMAScript pentru un limbaj de scripting. Typescript poate rula tot codul JavaScript și acceptă toate bibliotecile sale – de aceea se numește supersetul JavaScript.

Instalare TypeScript

Pentru a executa codul nostru anterior în TypeScript, trebuie să instalăm compilatorul TypeScript folosind pachetul npm (dacă aveți nodul js).

npm install -g typescript

sau descărcați-l direct de la oficial Pagina de descărcări Microsoft. De asemenea, puteți utiliza Locul de joacă TS pentru a vedea cum este trans-compilat codul de la ts la js.

  Semințele, seria A, B, C și D explicate

Odată ce ați făcut acest lucru, puteți configura setările proiectului în tsconfig.json și puteți utiliza orice IDE sau editor de text pentru a scrie cod TypeScript și a-l salva ca .ts.

Puteți scăpa în continuare prin nedefinirea tipului de variabilă, iar TypeScript poate deduce tipul de date. Cu toate acestea, veți obține o eroare de „sentiment” dacă dați altceva decât primul tip utilizat (în cazul nostru, un șir) – în timpul compilării în sine.

Este întotdeauna bine ca codul să aibă o adnotare de tip pentru menținere și ușurință în utilizare:

var feeling: string = “happy”;

Nu e asta!

TypeScript oferă multe alte funcții pentru a ușura viața unui dezvoltator.

Caracteristicile TypeScript

Typescript are un set bogat de caracteristici și fiecare lansare vine cu noi funcții pentru a face dezvoltarea mai ușoară decât înainte. De exemplu, cu noua versiune (4.0), unele caracteristici suplimentare sunt tipuri de tuplu variadic, fabrici JSX personalizate, deducere a proprietăților de clasă din constructori etc. Unele caracteristici tipice ale TypeScript sunt:

  • Suportă concepte de programare orientate pe obiecte precum interfața, moștenirea, clasă. generice
  • Detectarea precoce a erorilor
  • Suport IDE cu verificarea sintaxei și sugestii
  • Mai ușor de depanat pe măsură ce este tastat
  • Trans-compilează în JavaScript
  • Folosit atât pentru aplicații pe partea de server, cât și pe partea client
  • Suport multi-platformă și cross-browser
  • Acceptă toate bibliotecile și extensiile JS

De ce avem nevoie de TypeScript? (Avantajele TypeScript față de JavaScript)

Microsoft a dezvoltat și folosit TypeScript timp de doi ani pentru proiectele sale interne, înainte de a-l face public în 2012. Ei au creat un JavaScript tipizat, deoarece a fost mai ușor de testat codul pentru aplicațiile de întreprindere de nivel de producție. Puteți utiliza în continuare funcțiile de tastare dinamică, dar și să introduceți variabilele atunci când este cu adevărat necesar.

  Ce este Redactarea? 8 cel mai bun software de redactare pentru a ascunde datele sensibile

Luați în considerare codul de mai jos:

var mynum  = //get from user;

addten(number){

return number + 10;

}

Ne-am aștepta ca rezultatul să fie întotdeauna un număr. Dar, ce se întâmplă dacă un utilizator dă „oaie”? Ieșirea va fi oaie10 – în mod ideal, trebuie să spunem utilizatorului că această operațiune nu este posibilă!

De asemenea, atunci când aveți informații despre tip disponibile, editorii de text și IDE-urile devin mai ușor de utilizat și salvează erorile de rulare. De asemenea, este mai ușor să refactorizați codul la un moment ulterior în timp.

Asta înseamnă că nu avem nevoie de JavaScript? (Dezavantajele TypeScript față de JavaScript)

Vă puteți gândi la TypeScript ca la o extensie a JavaScript, dar cu siguranță nu la un înlocuitor.

Pentru bucăți mai mici de cod, TypeScript poate deveni o suprasolicitare – instalarea, compilarea, trans-compilarea vor fi redundante. Cu JavaScript, puteți pur și simplu să introduceți scriptul în HTML și ar funcționa. De asemenea, este mai ușor să depanați codul atunci când pur și simplu puteți reîmprospăta browserul de fiecare dată când schimbați ceva.

Comparație cap la cap

Acum că am înțeles caracteristicile și avantajele atât ale TypeScript, cât și ale JavaScript, haideți să trecem prin mai multe comparații:

TypeScript
JavaScript
Un limbaj tastat care detectează erorile de compilare de la început
Puteți găsi erori în timpul rulării
Potrivit pentru proiecte mari, deoarece îmbunătățește menținerea și lizibilitatea codului
Pe măsură ce se adaugă mai mult cod, devine dificil de testat și de depanat, astfel JS este potrivit pentru proiecte mici
Superset de JS, adică caracteristici precum orientarea obiectelor, verificarea tipului și multe altele
Un limbaj de scripting care acceptă crearea dinamică de conținut web
Necesită instalarea compilatorului și configurarea
Nu este nevoie de nicio instalare; Codul JS poate fi scris direct într-un browser folosind eticheta , îl salvați ca HTML - veți vedea rezultatele! Puteți apoi să construiți pe el pentru a crea conținut mai dinamic.

În plus, atunci când lucrați la o aplicație la scară largă, cunoștințele JavaScript vă vor ajuta să treceți cu ușurință la TypeScript.

Cu toate acestea, din perspectiva carierei și a salariului, ca a Dezvoltator TypeScript, veți fi mai flexibil și mai confortabil atât cu proiectele JS, cât și cu TS – deci cu siguranță un activ mai bun pe piață. De obicei, dezvoltatorii TypeScript sunt plătiți între 110.000 și 147.000 USD, în timp ce dezvoltatorii JS sunt plătiți în jur de 63.000 - 118.000 USD pe an.