Typescript versus Javascript – Het verschil begrijpen

Een van de veelgestelde vragen die ik krijg is, wat is het verschil tussen JavaScript en Typescript?

Laten we het uitzoeken…

Vanaf het moment dat u begon met coderen, zou JavaScript (JS) onderdeel zijn geweest van al uw front-endprojecten. Als je een beetje bekend bent met JS, beschouw TypeScript dan als JS plus enkele extra functies die je applicatie netter en getypt maken. Het typeScript is door Microsoft ontwikkeld als een open-sourceproject om JS-ontwikkeling efficiënter te maken en compilatiefouten in een vroeg stadium op te sporen.

In dit artikel bespreken we enkele belangrijke functies van JavaScript en TypeScript en de verschillen tussen beide scripttalen.

Wat is JavaScript?

JavaScript wordt gebruikt voor client-side scripting. U kunt een script maken op een HTML-pagina of een bestand maken met de extensie .js en dit opnemen in uw HTML-bestand. Een veelvoorkomend voorbeeld uit de praktijk waar u JavaScript kunt zien, is de validatie van de inlogpagina, waar u een foutmelding krijgt wanneer uw gebruikersnaam/wachtwoord onjuist is.

Laten we een eenvoudige JS-code schrijven en deze in de browser uitvoeren:

Maak een bestand example.html en voeg de volgende code toe:

<script>

feeling = 'happy';

feeling = 23;

</script>

Deze eenvoudige code declareert een variabele en kent er de waarde happy (string) aan toe. We kunnen aan dezelfde variabele een waarde van een ander type (getal) toekennen. JavaScript zou er niet over klagen en we kunnen de code zonder problemen in elke browser uitvoeren. Laten we nu de waarde van gevoel van de gebruiker krijgen:

  Controleer netwerkactiviteit op uw Mac met de activiteitenmonitor

Onze HTML ziet er als volgt uit:

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

en het script wordt:

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

Tenzij we expliciete controles in het script plaatsen, zal JS elke waarde van de gebruiker accepteren en doorgeven. U kunt dus iets als 234, @.#$%, enz. in de variabele Feel zetten.

Kenmerken van JavaScript

Uit het bovenstaande kunnen we de volgende kenmerken van JavaScript waarnemen:

  • Zwak getypte scripttaal
  • Gebruikt voor client-side en server-side (met node.js) scripting
  • Flexibel en dynamisch
  • Ondersteund door alle belangrijke browsers
  • Lichtgewicht en geïnterpreteerd

Als je geïnteresseerd bent in het beheersen van JavaScript, bekijk dan dit Udemy cursus.

Wat is TypeScript?

Een toepassing in de echte wereld zal veel validaties en dynamische controles hebben. Voor dergelijke toepassingen zal JavaScript-code op een gegeven moment moeilijk te testen zijn, voornamelijk omdat er geen typecontrole is. Terwijl u waarden van gebruikers krijgt, is het belangrijk om ze vanaf het begin zelf goed te krijgen. Dit is waar TypeScript van pas komt.

TypeScript is sterk getypeerd en heeft een compiler die klaagt als je het type van een variabele niet definieert.

Zowel JavaScript als TypeScript voldoen aan de ECMAScript-specificaties voor een scripttaal. Typescript kan alle JavaScript-code uitvoeren en ondersteunt al zijn bibliotheken – daarom wordt het de superset van JavaScript genoemd.

TypeScript-installatie

Om onze vorige code in TypeScript uit te voeren, moeten we de TypeScript-compiler installeren met behulp van het npm-pakket (als je node js hebt).

npm install -g typescript

of download het rechtstreeks van de officiële Microsoft downloadpagina. U kunt ook de TS-speeltuin om te zien hoe de code wordt getranscompileerd van ts naar js.

  Opdracht repareren mislukt met foutcode 1 Python Egg Info

Zodra dit is gebeurd, kunt u de projectinstellingen configureren in tsconfig.json en een IDE- of teksteditor gebruiken om TypeScript-code te schrijven en deze op te slaan als .ts.

U kunt nog steeds ontsnappen door het variabeletype niet te definiëren en TypeScript kan het gegevenstype afleiden. U krijgt echter een ‘gevoel’-fout als u iets anders geeft dan het eerste gebruikte type (in ons geval een String) – tijdens het compileren zelf.

Het is altijd netjes dat de code een typeannotatie heeft voor onderhoud en gebruiksgemak:

var feeling: string = “happy”;

Dat is het niet!

TypeScript biedt vele andere functies om het leven van een ontwikkelaar gemakkelijker te maken.

Kenmerken van TypeScript

Typescript heeft een uitgebreide reeks functies en elke release wordt geleverd met nieuwe functies om ontwikkeling gemakkelijker te maken dan voorheen. Met de nieuwe release (4.0) bijvoorbeeld, enkele extra functies zijn variadische tuple-types, aangepaste JSX-fabrieken, deductie van klasse-eigenschappen van constructeurs, enz. Enkele typische kenmerken van TypeScript zijn:

  • Ondersteunt objectgeoriënteerde programmeerconcepten zoals interface, overerving, klasse. Merkloos product
  • Vroegtijdige detectie van fouten
  • IDE-ondersteuning met syntaxiscontrole en suggesties
  • Makkelijker te debuggen als het wordt getypt
  • Trans-compileert naar JavaScript
  • Gebruikt voor zowel server- als client-side toepassingen
  • Cross-platform en cross-browser ondersteuning
  • Ondersteunt alle JS-bibliotheken en -extensies

Waarom hebben we TypeScript nodig? (Voordelen van TypeScript boven JavaScript)

Microsoft ontwikkelde en gebruikte TypeScript gedurende twee jaar voor zijn interne projecten voordat het in 2012 openbaar werd gemaakt. Ze creëerden een getypt JavaScript omdat het gemakkelijker was om de code te testen voor bedrijfstoepassingen van productiekwaliteit. U kunt nog steeds de functies voor dynamisch typen gebruiken, maar ook de variabelen typen wanneer dit echt nodig is.

  Hoe extensies in VLC Player te installeren

Overweeg de onderstaande code:

var mynum  = //get from user;

addten(number){

return number + 10;

}

We zouden verwachten dat het resultaat altijd een getal is. Maar wat als een gebruiker “schapen” geeft? De uitvoer is sheep10 – idealiter moeten we de gebruiker vertellen dat deze bewerking niet mogelijk is!

Wanneer u over de type-informatie beschikt, worden de teksteditors en IDE’s bovendien handiger in het gebruik en kunnen runtime-fouten worden voorkomen. Het is ook gemakkelijker om de code op een later tijdstip te refactoren.

Betekent dit dat we geen JavaScript nodig hebben? (Nadelen van TypeScript boven JavaScript)

Je kunt TypeScript zien als een uitbreiding van JavaScript, maar zeker geen vervanging.

Voor kleinere stukjes code kan TypeScript een overhead worden – installeren, compileren en transcompileren is overbodig. Met JavaScript kunt u eenvoudig uw script in HTML typen en het zou werken. Het is ook gemakkelijker om de code te debuggen wanneer u de browser eenvoudig kunt vernieuwen elke keer dat u iets wijzigt.

Head-to-head vergelijking

Nu we de functies en voordelen van zowel TypeScript als JavaScript hebben begrepen, gaan we meer vergelijkingen maken:

TypeScript
JavaScript
Een getypte taal die compilatiefouten in een vroeg stadium opmerkt
U kunt fouten ontdekken tijdens runtime
Geschikt voor grote projecten omdat het de onderhoudbaarheid en leesbaarheid van de code verbetert
Naarmate er meer code wordt toegevoegd, wordt het moeilijk om te testen en te debuggen, dus JS is geschikt voor kleine projecten
Superset van JS, dat wil zeggen, functies zoals objectoriëntatie, typecontrole en meer
Een scripttaal die het maken van dynamische webinhoud ondersteunt
Vereist installatie van compiler en configuratie-instellingen
Geen installatie nodig; JS-code kan rechtstreeks in een browser worden geschreven met behulp van de tags, slaat het op als HTML – u zult de resultaten zien! U kunt er vervolgens op voortbouwen om meer dynamische inhoud te creëren.

Verder, wanneer u aan een grootschalige toepassing werkt, kunt u met kennis van JavaScript gemakkelijk overschakelen naar TypeScript.

Echter, vanuit een carrière- en beloningsperspectief, als een TypeScript-ontwikkelaar, je zult flexibeler en comfortabeler zijn met zowel JS- als TS-projecten - dus absoluut een betere troef in de markt. TypeScript-ontwikkelaars krijgen doorgaans tussen de $ 110k en $ 147k betaald, terwijl JS-ontwikkelaars ongeveer $ 63k - $ 118k per jaar krijgen.

gerelateerde berichten