TypeScript vs. JavaScript: begrijp de verschillen

het world wide web draait in principe op JavaScript, HTML en CSS. Helaas, JavaScript mist een aantal functies die zouden helpen ontwikkelaars gebruiken voor grootschalige toepassingen. TypeScript Invoeren.

Wat is JavaScript?

JavaScript begon als een scripttaal voor de webbrowser Netscape Navigator; Brendan Eich schreef het prototype over een periode van 10 dagen in 1995. De naam JavaScript is een knipoog naar Sun Microsystem ‘ s Java taal, hoewel de twee talen zijn heel verschillend, en de gelijkenis in Namen heeft geleid tot aanzienlijke verwarring door de jaren heen. JavaScript, dat aanzienlijk is geëvolueerd, wordt nu ondersteund op alle moderne webbrowsers.

JavaScript taal

JavaScript is een multi-paradigma taal. Het heeft curly-bracket syntaxis en puntkomma ‘ s, zoals de C-familie van talen. Het heeft zwakke, dynamische typen en wordt ofwel geà nterpreteerd of (vaker) just-in-time gecompileerd. In het algemeen, JavaScript is single-threaded, hoewel er een web Workers API die multithreading doet, en er zijn gebeurtenissen, asynchrone functie calls, en callbacks.

JavaScript ondersteunt objectgeoriënteerd programmeren met behulp van prototypes in plaats van de klasse overerving gebruikt in C++, Java, en C#, hoewel een class syntaxis werd toegevoegd aan JavaScript ES6 in 2015. JavaScript ondersteunt ook functionele programmering, waaronder sluitingen, recursie en lambdas (anonieme functies).

vóór JavaScript ES6 had de taal geen staartaanroepoptimalisatie; nu wel, hoewel je strict mode ('use strict') moet inschakelen om het in te schakelen, en de implementatie varieert van browser tot browser. Strict mode verandert ook de semantiek van JavaScript, en verandert een aantal normaal stille fouten om fouten te gooien.

Wat is de aanduiding “ES6”? De naam voor de gestandaardiseerde JavaScript-taal is ECMAScript (ES), naar de ECMA International standards body; ES6 wordt ook ECMAScript 2015 (ES2015) genoemd. ES2020 is momenteel een conceptnorm.

als een eenvoudig voorbeeld om u de smaak van de JavaScript-taal te geven, hier is een aantal code om te beslissen of het dag of avond en dynamisch zet de juiste begroeting in een named web element gevonden in het document object van de browser:

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

Javascript ecosystem

er zijn tal van JavaScript API ‘ s. Sommige worden geleverd door de browser, zoals de document API in de bovenstaande code, en sommige worden geleverd door derden. Sommige API ‘ s zijn van toepassing op het gebruik van de client, sommige op de server, sommige op het bureaublad en sommige op meer dan één omgeving.

Browser-API ‘ s omvatten het document object model (DOM) en browser object model (BOM), geolocatie, Canvas (grafieken), WebGL (GPU-versnelde grafieken), HTMLMediaElement (audio en video) en WebRTC (real-time communicatie).

API ‘ s van derden zijn er in overvloed. Sommige zijn interfaces voor volledige toepassingen, zoals Google Maps. Anderen zijn hulpprogramma ‘ s die JavaScript HTML5 en CSS programmering gemakkelijker te maken, zoals jQuery. Sommige, zoals Express, zijn applicatiekaders voor specifieke doeleinden; voor Express, het doel is om web en mobiele applicatieservers te bouwen op Node.js. Een aantal andere frameworks zijn gebouwd op de top van Express. In 2016, ik besprak 22 JavaScript frameworks in een poging om zin van wat werd steeds iets van een dierentuin te maken; veel van deze frameworks bestaan nog steeds in een of andere vorm, maar een aantal zijn gegaan door de weg.

er zijn veel meer JavaScript-modules, meer dan 300.000. Om daar mee om te gaan, gebruiken we pakketbeheerders, zoals npm, de standaard pakketbeheerder voor knooppunt.js.

een alternatief voor npm is Garen, afkomstig van Facebook, en beweert het voordeel van deterministische installaties. Soortgelijke tools zijn Bower (van Twitter), die front-end componenten beheert in plaats van Node modules; Ender, die zichzelf NPM ‘ s kleine zus noemt; en jspm, die gebruik maakt van ES modules (de nieuwere ECMA-standaard voor modules), in plaats van CommonJS modules, de oudere de-facto standaard ondersteund door npm.

Webpack bundelt JavaScript-modules in statische assets voor de browser. Browserify stelt ontwikkelaars in staat om knooppunt te schrijven.js-stijl modules die compileren voor gebruik in de browser. Grunt is een bestand-georiënteerde JavaScript taak runner, en gulp is een streaming build-systeem en JavaScript taak runner. De keuze tussen grunt en gulp is niet doorslaggevend. Ik heb zowel geà nstalleerd en gebruik degene die is ingesteld voor een bepaald project.

om JavaScript-code betrouwbaarder te maken zonder compilatie, gebruiken we linters. De term komt van de C-language lint tool, die een standaard UNIX utility was. JavaScript linters bevatten JSLint, JSHint en ESLint. U kunt het uitvoeren van linters automatiseren na code wijzigingen met behulp van een taak runner of uw IDE. Nogmaals, de keuze tussen de linters is niet duidelijk, en ik gebruik degene die is ingesteld voor een bepaald project.

over editors en IDEs gesproken, ik heb 6 JavaScript IDEs en 10 JavaScript editors bekeken, meest recent in 2019. Mijn top keuzes waren sublieme tekst (zeer snelle editor), Visual Studio Code (configureerbare editor/IDE), en WebStorm (IDE).

met Transpilers kunt u een aantal andere talen vertalen, zoals CoffeeScript of TypeScript naar JavaScript, en moderne JavaScript (zoals ES2015-code) vertalen naar een basis JavaScript dat in (bijna) elke browser draait. (Alle weddenschappen zijn uit voor vroege versies van Internet Explorer.) De meest voorkomende transpiler voor moderne JavaScript is Babel.

Wat is TypeScript?

TypeScript is een getypte superset van JavaScript die compileert naar gewone JavaScript (ES3 of hoger; het is configureerbaar). De opdrachtregelcompiler van Open source TypeScript kan als knooppunt worden geïnstalleerd.js pakket. Ondersteuning voor TypeScript wordt geleverd met Visual Studio 2017 en Visual Studio 2019, Visual Studio Code en WebStorm, en kan worden toegevoegd aan sublieme tekst, Atom, Eclipse, Emacs en Vim. De TypeScript compiler / transpiler tsc is geschreven in TypeScript.

TypeScript voegt optionele typen, klassen en modules toe aan JavaScript, en ondersteunt hulpmiddelen voor grootschalige JavaScript-toepassingen voor elke browser, voor elke host, op elk besturingssysteem. Naast vele andere overwinningen voor TypeScript, is het populaire Angular framework vernieuwd in TypeScript.

typen stellen JavaScript-ontwikkelaars in staat om zeer productieve ontwikkeltools en praktijken zoals statische controle en code refactoring te gebruiken bij het ontwikkelen van JavaScript-toepassingen.

Types zijn optioneel, en type inference staat een paar Type annotaties toe om een groot verschil te maken voor de statische verificatie van uw code. Met Types kunt u interfaces tussen softwarecomponenten definiëren en inzicht krijgen in het gedrag van bestaande JavaScript-bibliotheken.

TypeScript biedt ondersteuning voor de nieuwste en zich ontwikkelende JavaScript-functies, waaronder die van ECMAScript 2015 en toekomstige voorstellen, zoals async-functies en decorateurs, om robuuste componenten te helpen bouwen.

TypeScript language

de TypeScript language accepteert JavaScript als geldig, maar biedt de extra opties van type annotaties, typecontrole tijdens het compileren, klassen en modules. Al deze zijn enorm nuttig wanneer u probeert om robuuste software te produceren. Plain JavaScript genereert fouten alleen tijdens runtime, en dan alleen als uw programma gebeurt om een pad met fouten te bereiken.

de tutorial met het TypeScript in 5 minutes maakt de voordelen duidelijk. Het uitgangspunt is pure JavaScript met een .TS-extensie:

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

als u dit compileert met tsc zal het een identiek bestand met a produceren .js extensie.

in de tutorial kunt u deze code stapsgewijs wijzigen, door een type annotatie person:string toe te voegen aan de functiedefinitie, door typecontrole te compileren, door de compiler te testen, een interface toe te voegen voor een person type en tenslotte een klasse toe te voegen voor Student. De definitieve code is:

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

wanneer u dit compileert en kijkt naar de uitgezonden JavaScript, zult u zien dat klassen in TypeScript slechts een steno zijn voor dezelfde prototype-gebaseerde erfenis die wordt gebruikt in gewone JavaScript ES3. Merk op dat de eigenschappen person.firstName en person.lastName automatisch worden gegenereerd door de compiler wanneer deze hun public attributen ziet in de Student klasse constructor, en ook wordt overgedragen naar de Person interface. Een van de mooiste voordelen van type annotaties in TypeScript is dat ze worden herkend door de tools, zoals Visual Studio Code:

IDG

als er fouten in de code zijn terwijl u bewerkt in VS Code, ziet u de foutmeldingen in het tabblad problemen, bijvoorbeeld het volgende als u het einde van de regel verwijdert met de instantiatie van Student:

IDG

de tutorial migreren van JavaScript gaat in detail in op het upgraden van een bestaand JavaScript-project. Overslaan van de setup stappen, de crux van de methode is om de naam van uw .js bestanden naar .Eén voor één. (Als je bestand JSX gebruikt, een extensie die gebruikt wordt door React, moet je het hernoemen naar .tsx liever dan .ts.) Dan scherpen de fout controle en de fouten op te lossen.

u moet onder andere op modules gebaseerde require() of define() statements wijzigen in TypeScript import statements en declaratiebestanden toevoegen voor alle bibliotheekmodules die u gebruikt. U moet ook uw module exports herschrijven met behulp van het commando TypeScript export. TypeScript ondersteunt CommonJS modules, zoals Node.js wel.

als u fouten krijgt over het verkeerde aantal argumenten, kunt u TypeScript-functie-overbelastingshandtekeningen schrijven. Dat is een belangrijke functie JavaScript ontbreekt. Tenslotte moet je typen toevoegen aan je eigen functies, en waar nodig interfaces of klassen gebruiken.

u hoeft meestal geen eigen declaratiebestanden te schrijven voor JavaScript-bibliotheken in het publieke domein. DefinitelyTyped is een repository van declaratiebestanden, die allemaal toegankelijk zijn met behulp van npm. U kunt de declaraties vinden op de pagina TypeSearch.

zodra u al uw JavaScript-bestanden hebt geconverteerd naar TypeScript, de typen hebt verbeterd en de fouten hebt verwijderd, zult u een veel robuustere codebasis hebben. In plaats van de runtime-fouten die door testers of gebruikers zijn gemeld voortdurend te repareren, kunt u de meest voorkomende fouten statisch detecteren.

het is de moeite waard om Anders Hejlsberg te zien die TypeScript bespreekt. Zoals je van Hem zult horen, is TypeScript JavaScript dat schaalt.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.