waarom je TypeScript zou moeten kiezen boven JavaScript

BY admin
|

TypeScript is de laatste jaren steeds populairder geworden. Het wordt genoemd onder de vijf meest veelbelovende talen in 2020. Angular, een van de grootste frontend frameworks, gebruikt TypeScript. Ongeveer 60% van de js programmeurs gebruikt al TypeScript, en 22% wil het proberen. Waarom?

historisch gezien is JavaScript de belangrijkste taal geworden voor het scrippen van webpagina ‘ s en apps op het Internet. Het is nu mogelijk om JavaScript te gebruiken op zowel de frontend en de backend met frameworks zoals Node.js en Deno.

maar was JavaScript gemaakt voor het creëren van grote, complexe systemen zoals die op het moderne web? Nope.

In dit artikel zullen we u een oplossing daarvoor voorstellen – TypeScript – en u op weg helpen naar het pad van het toevoegen van typen aan uw JavaScript-code.

hier zijn enkele punten die we zullen behandelen:

  • Wat is TypeScript?
  • wat zijn typen en hoe werken ze in TS?
  • JavaScript vs. TypeScript: welke te kiezen?
  • aan de slag met TypeScript.
  • verdere bronnen voor het bestuderen van TypeScript.

Wat is TypeScript?

kortom, TypeScript is een superset van JavaScript die optioneel typen heeft en compileert naar gewone JavaScript.

in eenvoudigere woorden is TypeScript technisch JavaScript met statisch typen, wanneer u maar wilt.

nu, wat zouden de redenen zijn voor het toevoegen van statische typen aan JavaScript?

ik kan ten minste drie:

  • u kunt meesterlijk verborgen ninja-fouten vermijden zoals de klassieke 'undefined' is not a function.
  • het is gemakkelijker om code te refactor zonder deze significant te breken.
  • zich oriënteren in complexe, grootschalige systemen is geen nachtmerrie meer.

in feite toont een studie aan dat 15% van alle JavaScript-bugs kan worden gedetecteerd met een TypeScript.

de Vrijheid van dynamisch typen leidt vaak tot bugs die niet alleen de efficiëntie van het werk van de programmeur verminderen, maar ook de ontwikkeling tot stilstand kunnen brengen vanwege de stijgende kosten van het toevoegen van nieuwe regels code.

daarom is JavaScript er niet in geslaagd om dingen als types en compileertijd foutcontroles op te nemen, waardoor het een slechte keuze is voor server-side code in bedrijven en grote codebases. Zoals hun slogan zegt, TypeScript is JavaScript dat schaalt.

wat heb ik nodig om TypeScript te leren gebruiken?

TypeScript is in wezen een js linter. Of, JS met documentatie die de compiler kan begrijpen.

daarom hoeft u, in tegenstelling tot andere talen zoals CoffeeScript (dat syntactische suiker toevoegt) of PureScript (dat helemaal niet op JavaScript lijkt), niet veel te leren om te beginnen met het schrijven van TypeScript-code.

typen in TS zijn optioneel, en elk JS-bestand is een geldig TypeScript-bestand. Terwijl de compiler zal klagen als je type fouten in uw eerste bestanden, het geeft je terug een JavaScript-bestand dat werkt als voorheen. Waar je ook bent, TypeScript zal je daar ontmoeten, en het is gemakkelijk om je vaardigheden geleidelijk op te bouwen.

wordt TypeScript gebruikt op de frontend of de backend?

TypeScript is gecompileerd naar JavaScript. Daarom kan TS overal worden gebruikt waar JS kan worden gebruikt: zowel de frontend als de backend.

JavaScript is de meest populaire taal om scripting te implementeren voor de frontend van apps en webpagina ‘ s. Dus, TypeScript kan worden gebruikt voor hetzelfde doel, maar het schittert in complexe enterprise projecten op de server kant.

bij Serokell is het grootste deel van onze web-frontend geïmplementeerd in TypeScript.

wat zijn typen en hoe werken ze in TS?

korte intro naar types

typen zijn een manier om juiste programma ‘ s te onderscheiden van onjuiste voordat we ze uitvoeren door in onze code te beschrijven hoe we van plan zijn om onze gegevens te gebruiken. Ze kunnen variëren van eenvoudige types zoals Nummer en String tot complexe structuren perfect gemodelleerd voor ons probleemdomein.

programmeertalen vallen in twee categorieën: statisch getypt of dynamisch getypt.

in talen met statische typering moet het type van de variabele bekend zijn tijdens het compileren. Als we een variabele declareren, moet het door de compiler bekend (of inferreerbaar) zijn of het een getal, een string of een Booleaanse is. Denk Aan Java.

in talen met dynamische typering is dit niet noodzakelijk het geval. Het type van een variabele is alleen bekend bij het uitvoeren van het programma. Denk Python.

TypeScript kan statisch typen ondersteunen, terwijl JavaScript dat niet doet.

vanwege het statische typen van TypeScript, moet u harder proberen om:

  • introduceer ongedefinieerde variabelen (compile-time warnings help)
  • Som twee tekenreeksen op die getallen bevatten (zoals “4” + “20” = “420”)
  • doe operaties op dingen die ze niet toestaan, zoals het trimmen van een nummer.

met statische typen kunt u uw eigen samengestelde typen maken. Dit stelt ingenieurs in staat om hun intenties in meer detail uit te drukken.

expliciete typen maken uw code ook zelfdocumenterend: zij zorgen ervoor dat uw variabelen en functies overeenkomen met wat is bedoeld en stellen de computer in staat om te zorgen voor het onthouden van de omringende context.

TypeScript

TypeScript heeft een verscheidenheid aan basistypen, zoals Boolean, Number, String, Array, Tuple, etc. Sommige van deze bestaan niet in JS; je kunt er meer over leren in de documentatie van TypeScript.

naast deze, zijn hier enkele andere types die we willen voorzien om de expressiviteit van TS te laten zien:

elke & onbekend

terwijl elke als een type kan dekken, goed, alles wat je wilt, onbekend is zijn type-veilige tegenhanger.

wanneer u wilt ontsnappen aan het type systeem, kunt u elke JavaScript variabele toewijzen aan het. Het wordt vaak gebruikt om inkomende variabelen te modelleren (van API ‘ s van derden, bijvoorbeeld) die nog niet zijn gecontroleerd en waarvan het type onbekend is.

Unknown lijkt veel op elke variabele, maar het laat u geen bewerkingen uitvoeren op de variabele voordat deze expliciet wordt gecontroleerd.

ongeldig

Void wordt gebruikt als er geen waarde wordt geretourneerd, bijvoorbeeld als het retourtype van functies die niets retourneren.

nooit

nooit is het return type voor iets dat nooit zou moeten gebeuren, zoals een functie die een uitzondering zal gooien.

snijpunt & Unietypen

Hiermee kunt u aangepaste types maken om beter bij uw logica te passen.

Snijtypen stellen u in staat om verschillende basistypen in één type samen te stellen. U kunt bijvoorbeeld een aangepast type persoon maken met een name: string en een phone_number: number. Het is hetzelfde als zeggen: Ik wil dat mijn type dit en dat is.

Union-typen maken het mogelijk dat uw type een van de meerdere basistypen neemt. U kunt bijvoorbeeld een query hebben die result: string of undefinedgeeft. Het is hetzelfde als zeggen: Ik wil dat mijn type dit of dat is.

als je typen als spaties beschouwt, zijn al deze typen snel zinvol.

typen in TypeScript kunnen zowel impliciet Als expliciet zijn. Als je je typen niet expliciet schrijft, zal de compiler Type inference gebruiken om de typen af te leiden die je gebruikt.

het expliciet schrijven ervan geeft echter voordelen zoals het helpen van andere ontwikkelaars die uw code lezen en ervoor zorgen dat wat u ziet is wat de compiler ziet.

TypeScript vs. JavaScript

het loont om pragmatisch te zijn. Bekijk deze grafiek:

From nowhere, TypeScript is nu in de 7e positie in GitHub pull requests voor Q1 2020, boven PHP en C. (Source)

hoewel een aanzienlijke oorzaak van dit is de ondersteuning van TypeScript door bedrijven als Microsoft (die het gemaakt) en Google, het wordt ondersteund voor een goede reden.

3 Redenen om TypeScript boven JavaScript te kiezen

1. TypeScript is betrouwbaarder

in tegenstelling tot JavaScript, TypeScript code is betrouwbaarder en gemakkelijker te refactor. Dit stelt ontwikkelaars in staat om fouten te vermijden en herschrijven veel gemakkelijker te doen.

typen ongeldig De meeste van de domme fouten die kunnen sluipen in JavaScript codebases, en maak een snelle feedback loop om alle kleine fouten bij het schrijven van nieuwe code en refactoring te herstellen.

2. TypeScript is explicieter

het expliciet maken van types richt onze aandacht op hoe ons systeem precies is gebouwd, en hoe verschillende delen ervan met elkaar interageren. In grootschalige systemen is het belangrijk om de rest van het systeem weg te kunnen abstraheren terwijl de context in het achterhoofd wordt gehouden. Types stellen ons in staat om dat te doen.

3. TypeScript en JavaScript zijn praktisch uitwisselbaar, dus waarom niet?

aangezien JavaScript een subset van TypeScript is, kunt u alle JavaScript-bibliotheken en code gebruiken die u wilt in uw TypeScript-code.

de meest populaire JavaScript-bibliotheken hebben typen in 2020-zeker getypt is een repository met typen voor veel verschillende JavaScript-bibliotheken die u kunt gebruiken om uw interacties met hen meer type-veilig te maken.

dit betekent dat u geleidelijk TypeScript kunt gebruiken in uw javascript-codebase, eerst typen toevoegen aan individuele modules en dan uitbreiden om het bekende universum te consumeren, denk ik.

nadelen van TypeScript

je kunt niet zomaar een JavaScript team of een JavaScript repository nemen en direct overschakelen naar idiomatic TypeScript. Er zijn afwegingen, en vooraf offers die je moet maken.

hoewel we kunnen argumenteren over de besparingen die expliciet zijn over typen op de lange termijn geeft, op de korte termijn, kost het meer tijd om ze toe te voegen. Dit is misschien niet een enorme deal, maar het is een argument in het voordeel van JavaScript.

daarom kiest u mogelijk geen TypeScript voor kleine projecten en prototypes voor eigen gebruik.

Tests vs. typen

om kort te raken de discussie van testen vs. types: beide van deze dingen vangen verschillende klassen van bugs, dus het is zinvol om beide te doen op een niet-partisan-achtige manier.

u kunt nog steeds zowel unit testing als meer geavanceerde technieken gebruiken, zoals property-based testing met TS, terwijl de voordelen van een statisch type systeem behouden blijven.

om het samen te vatten, hier is een snelle vergelijking van beide talen:

Typoscript JavaScript
TS is een object-georiënteerde scripttaal JS is een object-georiënteerde scripttaal
Afhankelijk taal (gecompileerd te JavaScript) Onafhankelijke taal (kan worden geïnterpreteerd en uitgevoerd)
Gecompileerde taal, niet rechtstreeks kan worden uitgevoerd in een browser Geïnterpreteerde taal, uitgevoerd in een webbrowser
Kan statisch getypeerde Dynamisch ingevoerd
Beter gestructureerd en beknopt flexibeler omdat u niet beperkt bent door het type systeem
heeft een .ts-extensie heeft een .js extensie
gemaakt bij Microsoft door Anders Hejlsberg (ontwerper van C#) en onderhouden door Microsoft gemaakt door Brendan Eich (Netscape) en onderhouden door ECMA (European Computer Manufacturers Association).
een eerlijke keuze voor complexe projecten goed om met kleine, eenvoudige projecten te werken

TypeScript quickstart guide

TypeScript-compiler

om uw TS-code te compileren, moet u tsc installeren (kort voor TypeScript compiler). De makkelijkste manier om het te doen is door de terminal. Dit kan eenvoudig via npm met het volgende commando:

npm install -g typescript

als u TypeScript met Visual Studio Code wilt gebruiken, is er een handige gids op hun website.

zodra u tsc hebt geïnstalleerd, kunt u uw bestanden compileren met tsc filename.ts.

uw bestanden migreren van JavaScript naar TypeScript

laten we zeggen dat we het volgende JavaScript-bestand willen veranderen in TypeScript vanwege vreemd gedrag:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

goed nieuws. Elk JS-bestand is technisch een geldig TypeScript-bestand, dus je hebt een goede start – schakel gewoon de bestandsextensie naar .ts van .js.

TypeScript heeft type gevolgtrekking, wat betekent dat het automatisch enkele typen kan afleiden die u gebruikt zonder dat u ze toevoegt. In dit geval gaat het ervan uit dat de functie twee variabelen van type any somt, Wat Waar is, maar op dit moment geen groot nut heeft.

als we alleen getallen willen optellen, kunnen we een typehandtekening toevoegen aan my_sum om het alleen getallen te laten accepteren.

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

nu geeft TypeScript ons een fout.

Argument of type 'string' is not assignable to parameter of type 'number'.

gelukkig hebben we gevonden waar de fout is. 🙂 Om dergelijke fouten verder te omzeilen, kunt u ook typedefinities toevoegen aan variabelen.

let b: number = "5" // Type '"5"' is not assignable to type 'number'.let b: number = 5 // Everything ok.

TypeScript is vrij flexibel in wat het kan doen en hoe het u kan helpen. Voor een minder triviaal voorbeeld over het verplaatsen van uw bestaande JavaScript codebase naar TypeScript of het gebruik van TypeScript om uw JS code te verbeteren, lees deze handleiding.

hoe TypeScript gebruiken in een browser?

om TypeScript in een browser uit te voeren, moet het worden omgezet in JavaScript met de TypeScript compiler (tsc). In dit geval maakt tsc een nieuwe .js bestand gebaseerd op de .ts-code, die u kunt gebruiken op elke manier die u zou kunnen gebruiken een JavaScript-bestand.

middelen voor verder leren

TypeScript diepe duik

deze gratis web resource heeft alles wat je nodig hebt om te beginnen met TypeScript, inclusief meer gedetailleerde uitleg van de secties die we hier al hebben behandeld.

Leer Het TypeScript Vanaf Nul!

een praktische 3-uur durende cursus die door alle basisfuncties van TypeScript gaat, hoe het te gebruiken om te interageren met sommige js frameworks, en hoe de kracht van TypeScript te gebruiken tijdens het schrijven van JavaScript.

Exercism is de beste bron om te oefenen met het schrijven van code in een nieuwe programmeertaal. Mentoren die je richting idiomatische code sturen, veel leuke oefentaken – er is niets om niet van te houden aan deze website.

conclusies

over het algemeen is TypeScript een geweldig hulpmiddel om in je toolset te hebben, zelfs als je het niet op volle capaciteit gebruikt. Het is gemakkelijk om klein te beginnen en langzaam te groeien, het leren en het toevoegen van nieuwe functies als je gaat. TypeScript is pragmatisch en gastvrij voor beginners, dus je hoeft niet bang te zijn.

ik hoop dat dit artikel nuttig zal zijn in uw TypeScript reis. Als u hulp wilt of vragen hebt, moet u deze stellen op onze sociale media zoals Twitter of Facebook.