hvorfor du skal vælge TypeScript frem for JavaScript

BY admin
|

TypeScript har været stigende i sin popularitet i de sidste par år. Det er nævnt blandt de fem mest lovende sprog i 2020. Angular, en af de største frontend-rammer, bruger TypeScript. Cirka 60% af JS-programmører bruger allerede TypeScript, og 22% ønsker at prøve. Hvorfor?

historisk set er JavaScript endt som hovedsprog for scripting af hjemmesider og apps på internettet. Det er nu muligt at bruge JavaScript på både frontend og backend med rammer som Node.js og Deno.

men blev JavaScript lavet til at skabe store, komplekse systemer som dem på det moderne internet? Niks.

i denne artikel vil vi introducere dig til en løsning til det – TypeScript – og komme i gang mod stien til at tilføje typer til din JavaScript-kode.

her er nogle af de punkter, vi vil dække:

  • Hvad er TypeScript?
  • Hvad er typer, og hvordan fungerer de i TS?
  • JavaScript vs. TypeScript: hvilken skal man vælge?
  • Sådan kommer du i gang med TypeScript.
  • yderligere ressourcer til at studere TypeScript.

Hvad er TypeScript?

kort sagt, TypeScript er et supersæt af JavaScript, der har valgfri indtastning og kompilerer til almindelig JavaScript.

i enklere ord er TypeScript teknisk JavaScript med statisk indtastning, når du vil have det.

hvad ville nu være grundene til at tilføje statisk indtastning til JavaScript?

jeg kan liste mindst tre:

  • du kan undgå mesterligt skjulte ninja-fejl som den klassiske 'undefined' is not a function.
  • det er lettere at refactor-kode uden at bryde den markant.
  • at orientere sig i komplekse, store systemer er ikke længere et mareridt.

faktisk viser en undersøgelse, at 15% af alle JavaScript-fejl kan detekteres ved TypeScript.

friheden ved dynamisk indtastning fører ofte til fejl, der ikke kun mindsker effektiviteten af programmørens arbejde, men også kan slibe udviklingen til at stoppe på grund af stigende omkostninger ved at tilføje nye kodelinjer.

derfor gør JavaScript ‘ s manglende inkorporering af ting som typer og kompileringstidsfejlkontrol det til et dårligt valg for server-side-kode i virksomheder og store kodebaser. Som deres tagline siger, TypeScript er JavaScript, der skaleres.

Hvad skal jeg lære at bruge TypeScript?

TypeScript er i det væsentlige en JS linter. Eller JS med dokumentation, som kompilatoren kan forstå.

derfor, i modsætning til andre sprog som CoffeeScript (som tilføjer syntaktisk sukker) eller PureScript (som slet ikke ligner JavaScript), behøver du ikke lære meget for at begynde at skrive TypeScript-kode.

typer i TS er valgfri, og hver JS-fil er en gyldig TypeScript-fil. Mens kompilatoren vil klage, hvis du har typefejl i dine oprindelige filer, giver den dig tilbage en JavaScript-fil, der fungerer som den gjorde før. Uanset hvor du er, vil TypeScript møde dig der, og det er nemt at opbygge dine færdigheder gradvist.

bruges TypeScript på frontend eller backend?

TypeScript er kompileret til JavaScript. Derfor kan TS bruges overalt JS kunne bruges: både frontend og backend.

JavaScript er det mest populære sprog til at implementere scripting til frontend af apps og hjemmesider. Således kan TypeScript bruges til det samme formål, men det skinner i komplekse virksomhedsprojekter på serversiden.

hos Serokell er det meste af vores frontend implementeret i TypeScript.

Hvad er typer, og hvordan fungerer de i TS?

kort introduktion til typer

typer er en måde at fortælle korrekte programmer fra forkerte, før vi kører dem ved at beskrive i vores kode, hvordan vi planlægger at bruge vores data. De kan variere fra enkle typer som antal og streng til komplekse strukturer, der er perfekt modelleret til vores problemdomæne.

programmeringssprog falder i to kategorier: statisk skrevet eller dynamisk skrevet.

på sprog med statisk indtastning skal variabeltypen være kendt på kompileringstidspunktet. Hvis vi erklærer en variabel, skal den være kendt (eller umulig) af kompilatoren, hvis det vil være et tal, en streng eller en boolsk. Tænk Java.

på sprog med dynamisk typing er dette ikke nødvendigvis tilfældet. Typen af en variabel er kun kendt, når programmet kører. Tænk Python.

TypeScript kan understøtte statisk indtastning, mens JavaScript ikke gør det.

på grund af den statiske indtastning af TypeScript skal du prøve hårdere at:

  • introducer udefinerede variabler (hjælp til kompileringstidsadvarsler)
  • sum to strenge, der har tal i dem (som “4” + “20” = “420”)
  • gør operationer på ting, der ikke tillader dem, såsom at trimme et nummer.

med statiske typesystemer kan du oprette dine egne sammensatte typer. Dette gør det muligt for ingeniører at udtrykke deres hensigter mere detaljeret.

eksplicitte typer gør også din kode selvdokumenterende: de sørger for, at dine variabler og funktioner matcher det, der er beregnet, og gør det muligt for computeren at tage sig af at huske den omgivende kontekst.

typer af TypeScript

TypeScript har en række grundlæggende typer, som boolsk, nummer, streng, Array, Tuple osv. Nogle af disse findes ikke i JS; du kan lære mere om dem i dokumentationen til TypeScript.

ud over dem er her nogle andre typer, vi vil have til at vise ekspressiviteten af TS:

alle & ukendt

mens enhver som en type kan dække, godt, alt hvad du ønsker, ukendt er dens type-sikre modstykke.

når du vil undslippe typesystemet, giver any dig mulighed for at tildele enhver JavaScript-variabel til den. Det bruges ofte til at modellere indgående variabler (for eksempel fra tredjeparts API ‘ er), der endnu ikke er kontrolleret, og hvis type er ukendt.

ukendt er meget som enhver, men det vil ikke lade dig udføre nogen handlinger på variablen, før den udtrykkeligt er typekontrolleret.

ugyldig

Void bruges, når der ikke returneres nogen værdi, for eksempel som returtype af funktioner, der ikke returnerer noget.

aldrig

aldrig er returtypen for noget, der aldrig skulle forekomme, som en funktion, der vil kaste en undtagelse.

kryds & Unionstyper

disse giver dig mulighed for at oprette brugerdefinerede typer, der passer bedre til din logik.

Krydsningstyper giver dig mulighed for at sammensætte flere grundlæggende typer i en type. Du kan f.eks. oprette en person med brugerdefineret type, der har en name: string og en phone_number: number. Det svarer til at sige: Jeg vil have, at min type skal være dette og det.

Unionstyper gør det muligt for din type at tage en af de mange grundlæggende typer. Du kan f.eks. have en forespørgsel, der returnerer enten result: string eller undefined. Det svarer til at sige: Jeg vil have, at min type skal være dette eller det.

hvis du tænker på typer som mellemrum, giver alle disse typer hurtigt mening.

typer i TypeScript kan være både implicitte og eksplicitte. Hvis du ikke eksplicit skriver dine typer, bruger kompilatoren typeinferens til at udlede de typer, du bruger.

at skrive dem eksplicit giver dog fordele som at hjælpe andre udviklere, der læser din kode og sørge for, at det, du ser, er, hvad kompilatoren ser.

TypeScript vs. JavaScript

det betaler sig at være pragmatisk. Tag et kig på denne graf:

fra intetsteds er TypeScript nu i 7. position i GitHub pull-anmodninger om 1. kvartal 2020, over PHP og C. (kilde)

mens en betydelig årsag til dette er understøttelse af TypeScript af virksomheder som Microsoft (som oprettede det) og Google, understøttes det af en god grund.

3 grunde til at vælge TypeScript frem for JavaScript

1. TypeScript er mere pålidelig

i modsætning til JavaScript er TypeScript-kode mere pålidelig og lettere at refactor. Dette gør det muligt for udviklere at undgå fejl og gøre omskrivninger meget lettere.

typer ugyldiggør de fleste af de dumme fejl, der kan snige sig ind i JavaScript-kodebaser, og opret en hurtig feedback-loop for at rette alle de små fejl, når du skriver ny kode og refactoring.

2. TypeScript er mere eksplicit

at gøre typer eksplicitte fokuserer vores opmærksomhed på, hvordan nøjagtigt vores system er bygget, og hvordan forskellige dele af det interagerer med hinanden. I store systemer er det vigtigt at være i stand til at abstrahere resten af systemet, mens man holder konteksten i tankerne. Typer gør det muligt for os at gøre det.

3. TypeScript og JavaScript er praktisk talt udskiftelige, så hvorfor ikke?

da JavaScript er en delmængde af TypeScript, kan du bruge alle JavaScript-biblioteker og kode, du vil have i din TypeScript-kode.

mest populære JavaScript – biblioteker har typer i 2020-Definitely Typed er et lager med typer til mange forskellige JavaScript-biblioteker, som du kan bruge til at gøre dine interaktioner med dem mere typesikre.

dette betyder, at du gradvist kan vedtage TypeScript i din JavaScript-kodebase, først tilføje typer til individuelle moduler og derefter udvide til… forbruge det kendte univers, tror jeg.

ulemper ved TypeScript

du kan ikke bare tage et JavaScript-team eller et JavaScript-lager og straks skifte dem til idiomatisk TypeScript. Der er kompromiser, og upfront tid ofre, du er nødt til at gøre.

mens vi kan argumentere for de besparelser, der er eksplicit om typer, giver dig i det lange løb, på kort sigt tager det mere tid at tilføje dem. Dette er uden tvivl ikke en enorm aftale, men det er et argument til fordel for JavaScript.

derfor kan du ikke vælge TypeScript til små projekter og prototyper til eget brug.

test vs. typer

for kort at berøre diskussionen om test vs. typer: begge disse ting fanger forskellige klasser af fejl, så det giver mening at gøre begge dele på en ikke-partisan måde.

du kan stadig bruge både enhedstest og mere avancerede teknikker såsom ejendomsbaseret test med TS, mens du bevarer fordelene ved et statisk type system.

for at opsummere det, her er en hurtig sammenligning af begge sprog:

TypeScript JavaScript
TS er et objektorienteret scriptsprog JS er et objektorienteret scriptsprog
afhængigt sprog (kompilerer til JavaScript) uafhængigt sprog (kan fortolkes og udføres)
kompileret sprog, kan ikke udføres direkte i en bro. ser fortolket sprog, udføres direkte i en bro. ser
kan skrives statisk dynamisk skrives
bedre struktureret og kortfattet mere fleksibel, da du ikke er begrænset af typesystemet
har en .ts udvidelse har en .JS udvidelse
oprettet hos Microsoft af Anders Hejlsberg (designer af C#) og vedligeholdt af Microsoft oprettet af Brendan Eich (Netscape) og vedligeholdt af ECMA (European Computer Manufacturers Association).
et fair valg til komplekse projekter godt at arbejde med små, enkle projekter

TypeScript hurtigstart guide

TypeScript compiler

for at kompilere din TS-kode skal du installere tsc (forkortelse for TypeScript compiler). Den nemmeste måde at gøre det på er via terminalen. Dette kan gøres nemt via npm ved hjælp af følgende kommando:

npm install -g typescript

hvis du vil bruge TypeScript med Visual Studio-kode, er der en praktisk guide på deres hjemmeside.

når du har installeret tsc, kan du kompilere dine filer med tsc filename.ts.

migrering af dine filer fra JavaScript til TypeScript

lad os sige, at vi vil ændre følgende JavaScript-fil til TypeScript på grund af ulige opførsel:

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

gode nyheder. Enhver JS-fil er teknisk set en gyldig TypeScript-fil, så du har en god start – bare skift filtypen til .ts fra .js.

TypeScript har type inferens, hvilket betyder, at det automatisk kan udlede nogle af de typer, du bruger, uden at du tilføjer dem. I dette tilfælde antager det, at funktionen opsummerer to variabler af typen enhver, hvilket er sandt, men uden stor brug lige nu.

hvis vi kun vil opsummere tal, kan vi tilføje en typesignatur til my_sum for at få den til kun at acceptere tal.

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

nu giver TypeScript os en fejl.

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

god ting, vi fandt, hvor fejlen er. 🙂 For yderligere at undslippe fejl som disse kan du også tilføje typedefinitioner til variabler.

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

TypeScript er ret fleksibelt i, hvad det kan gøre, og hvordan det kan hjælpe dig. For et mindre trivielt eksempel på, hvordan du flytter din eksisterende JavaScript-kodebase til TypeScript eller bruger TypeScript til at forbedre din JS-kode, læs denne vejledning.

hvordan bruges TypeScript i en bro. ser?

for at køre TypeScript i en bro.ser skal det transpileres til JavaScript med TypeScript compiler (tsc). I dette tilfælde tsc opretter en ny .JS fil baseret på .ts-kode, som du kan bruge på enhver måde, du kan bruge en JavaScript-fil.

ressourcer til videre læring

TypeScript Deep Dive

denne gratis internetressource har alt hvad du behøver for at starte med TypeScript, herunder mere detaljerede forklaringer på de sektioner, vi allerede har dækket her.

Lær TypeScript Fra Bunden!

et praktisk 3-timers kursus, der gennemgår alle de grundlæggende funktioner i TypeScript, hvordan man bruger det til at interagere med nogle JS-rammer, og hvordan man bruger kraften i TypeScript, mens man skriver JavaScript.

motion

øvelse er den bedste ressource til at øve sig på at skrive kode på et nyt programmeringssprog. Mentorer, der vil styre dig mod idiomatisk kode, masser af sjove praksis opgaver – der er intet ikke at elske om denne hjemmeside.

konklusioner

samlet set er TypeScript et godt værktøj at have i dit værktøjssæt, selvom du ikke bruger det til sin fulde kapacitet. Det er let at starte i det små og vokse langsomt, lære og tilføje nye funktioner, mens du går. TypeScript er pragmatisk og indbydende for begyndere, så der er ingen grund til at være bange.

jeg håber, at denne artikel vil være nyttig i din TypeScript rejse. Hvis du vil have hjælp eller har nogle spørgsmål, skal du sørge for at spørge dem på vores sociale medier som Facebook eller Facebook.