Internettet kører grundlæggende på JavaScript, HTML og CSS. Desværre mangler JavaScript flere funktioner, der kan hjælpe udviklere med at bruge det til store applikationer. Indtast TypeScript.
Hvad er JavaScript?
JavaScript startede som et skriptsprog til Netscape Navigator-webbrowseren; Brendan Eich skrev prototypen over en periode på 10 dage i 1995. Navnet JavaScript er en nikkelse til Sun Microsystems Java-sprog, selvom de to sprog er ret forskellige, og ligheden i navne har ført til betydelig forvirring gennem årene. JavaScript, som har udviklet sig markant, understøttes nu i alle moderne webbrowsere.
Introduktionen af JavaScript på klientsiden i Netscape Navigator blev hurtigt efterfulgt af introduktionen af JavaScript på serversiden i webserverne Netscape Enterprise Server og Microsoft IIS. Omkring 13 år senere introducerede Ryan Dahl Node.js som et open source, cross-platform, JavaScript runtime-miljø uafhængigt af enhver browser eller webserver.
JavaScript-sprog
JavaScript er et multi-paradigmesprog. Den har syntetaks med krøllede parenteser og semikoloner, ligesom C-familien af sprog. Det har svag, dynamisk typning og er enten fortolket eller (oftere) just-in-time kompileret. Generelt er JavaScript single-threaded, selvom der er en Web Workers API, der udfører multithreading, og der er begivenheder, asynkrone funktionsopkald og tilbagekald.
JavaScript understøtter objektorienteret programmering ved hjælp af prototyper snarere end den klassearv, der bruges i C ++, Java og C #, selvom en klasse syntaks blev føjet til JavaScript ES6 i 2015. JavaScript understøtter også funktionel programmering inklusive lukninger, rekursion og lambdas (anonyme funktioner).
Forud for JavaScript ES6 havde sproget ingen optimering af haleopkald; nu gør det, selvom du skal tænde streng tilstand ('brug streng') for at aktivere det, og implementeringen varierer fra browser til browser. Streng tilstand ændrer også semantikken i JavaScript og ændrer nogle normalt tavse fejl for at kaste fejl.
Hvad er der med betegnelsen "ES6"? Navnet på det standardiserede JavaScript-sprog er ECMAScript (ES) efter ECMA International standardiseringsorgan; ES6 kaldes også ECMAScript 2015 (ES2015). ES2020 er i øjeblikket et udkast til standard.
Som et simpelt eksempel for at give dig smagen af JavaScript-sproget, her er en kode, der bestemmer, om det er dag eller aften, og dynamisk placerer den passende hilsen i et navngivet webelement, der findes i browserens dokumentobjekt:
var time = ny dato (). getHours ();var hilsen;
hvis (time <18) {
hilsen = "God dag";
} andet {
hilsen = "God aften";
}
document.getElementById ("demo"). innerHTML = hilsen;
JavaScript-økosystem
Der er adskillige JavaScript API'er. Nogle leveres af browseren, som f.eks dokument API i koden vist ovenfor, og nogle leveres af tredjeparter. Nogle API'er gælder for brug af klientsiden, andre for brug af serversiden, andre for desktopbrug og andre for mere end et miljø.
Browser-API'er inkluderer dokumentobjektmodellen (DOM) og browserobjektmodellen (BOM), Geolocation, Canvas (grafik), WebGL (GPU-accelereret grafik), HTMLMediaElement (lyd og video) og WebRTC (realtidskommunikation).
Tredjeparts API'er findes i overflod. Nogle er grænseflader til fulde applikationer, såsom Google Maps. Andre er værktøjer, der gør JavaScript HTML5 og CSS programmering nemmere, såsom jQuery. Nogle, som Express, er applikationsrammer til bestemte formål; til Express er formålet at oprette web- og mobile applikationsservere på Node.js. En række andre rammer er bygget oven på Express. I 2016 diskuterede jeg 22 JavaScript-rammer i et forsøg på at få mening om, hvad der blev noget af en zoologisk have; mange af disse rammer findes stadig i en eller anden form, men flere er gået af vejen.
Der er mange flere JavaScript-moduler, over 300.000. For at håndtere det bruger vi pakkeforvaltere, såsom npm, standardpakkehåndtering for Node.js.
Et alternativ til npm er Garn, der kom fra Facebook, og hævder fordelen ved deterministiske installationer. Lignende værktøjer inkluderer Bower (fra Twitter), der administrerer frontend-komponenter i stedet for Node-moduler; Ender, som kalder sig npms lillesøster; og jspm, der bruger ES-moduler (den nyere ECMA-standard for moduler) snarere end CommonJS-moduler, den ældre de facto-standard understøttet af npm.
Webpack samler JavaScript-moduler i statiske aktiver til browseren. Browserify giver udviklere mulighed for at skrive Node.js-moduler, der kompileres til brug i browseren. Grunt er en filorienteret JavaScript task runner, og gulp er et streaming build-system og JavaScript task runner. Valget mellem grunt og gulp er ikke afgørende. Jeg har både installeret og brugt det, der blev oprettet til et givet projekt.
For at gøre JavaScript-koden mere pålidelig i mangel af kompilering bruger vi linters. Udtrykket kommer fra C-sproget fnugværktøj, som var et standard Unix-værktøj. JavaScript-linters inkluderer JSLint, JSHint og ESLint. Du kan automatisere kørende linters efter kodeændringer ved hjælp af en task runner eller din IDE. Igen er valget mellem linerne ikke klart, og jeg bruger det, der blev oprettet til et givet projekt.
Apropos redaktører og IDE'er, jeg har gennemgået 6 JavaScript IDE'er og 10 JavaScript-redaktører, senest i 2019. Mine bedste valg var Sublime Text (meget hurtig editor), Visual Studio Code (konfigurerbar editor / IDE) og WebStorm (IDE).
Transpilere giver dig mulighed for at oversætte nogle andre sprog såsom CoffeeScript eller TypeScript til JavaScript og oversætte moderne JavaScript (såsom ES2015-kode) til en grundlæggende JavaScript, der kører i (næsten) enhver browser. (Alle væddemål er slået fra for tidlige versioner af Internet Explorer.) Den mest almindelige spiller for moderne JavaScript er Babel.
Hvad er TypeScript?
TypeScript er et skrevet supersæt af JavaScript, der kompileres til almindeligt JavaScript (ES3 eller højere; det kan konfigureres). Open source TypeScript kommandolinjekompilator kan installeres som en Node.js-pakke. TypeScript-support leveres med Visual Studio 2017 og Visual Studio 2019, Visual Studio Code og WebStorm og kan føjes til Sublime Text, Atom, Eclipse, Emacs og Vim. TypeScript-kompilatoren / trans player tsc er skrevet i TypeScript.
TypeScript tilføjer valgfri typer, klasser og moduler til JavaScript og understøtter værktøjer til JavaScript-applikationer i stor skala til enhver browser, til enhver vært, på ethvert operativsystem. Blandt mange andre gevinster for TypeScript er den populære Angular framework blevet moderniseret i TypeScript.
Typer gør det muligt for JavaScript-udviklere at bruge yderst produktive udviklingsværktøjer og fremgangsmåder som statisk kontrol og kodeomdannelse ved udvikling af JavaScript-applikationer.
Typer er valgfri, og typeforståelse tillader, at nogle få typekommentarer gør en stor forskel for den statiske verifikation af din kode. Typer giver dig mulighed for at definere grænseflader mellem softwarekomponenter og få indsigt i opførelsen af eksisterende JavaScript-biblioteker.
TypeScript tilbyder support til de nyeste og udviklende JavaScript-funktioner, herunder dem fra ECMAScript 2015 og fremtidige forslag, såsom async-funktioner og dekoratører, for at hjælpe med at opbygge robuste komponenter.
TypeScript-sprog
TypeScript-sproget accepterer JavaScript som gyldigt, men tilbyder de ekstra muligheder for typebemærkninger, typekontrol ved kompileringstidspunkt, klasser og moduler. Alle disse er utroligt nyttige, når du prøver at producere robust software. Almindelig JavaScript genererer kun fejl ved kørsel, og derefter kun hvis dit program tilfældigvis når en sti med fejl.
TypeScript-tutorial på 5 minutter gør fordelene klare. Udgangspunktet er ren JavaScript med en .ts udvidelse:
funktionshilsen (person) { returner "Hej" + person;
}
let bruger = "Jane bruger";
document.body.textContent = hilsen (bruger);
Hvis du kompilerer dette med tsc, vil det producere en identisk fil med .js-udvidelse.
Denne tutorial giver dig mulighed for at ændre denne kode trinvis og tilføje en typebemærkning person: streng i funktionsdefinitionen, kompilering, testtypekontrol af compileren, tilføjelse af et interface til en person type, og til sidst tilføje en klasse til Studerende. Den endelige kode er:
klasse Elev { fuldnavn: streng;
konstruktør (public firstName: string, public middleInitial: string,
offentligt efternavn: streng) {
this.fullName = fornavn + "" + mellemInitial + "" + efternavn;
}
}
interface Person {
fornavn: streng;
efternavn: streng;
}
funktionshilsner (person: person) {
returner "Hej" + person.firstName + "" + person.lastName;
}
lad bruger = ny elev ("Jane", "M.", "Bruger");
document.body.textContent = hilsen (bruger);
Når du kompilerer dette og ser på det udsendte JavaScript, vil du se, at klasser i TypeScript kun er en stenografi for den samme prototype-baserede arv, der bruges i almindelig JavaScript ES3. Bemærk, at egenskaberne person.firstnavn og person.lastName genereres automatisk af compileren, når den ser deres offentlig attributter i Studerende klassekonstruktør, og også overført til Person interface. En af de bedste fordele ved typeannoteringer i TypeScript er, at de genkendes af værktøjerne, såsom Visual Studio Code:
Hvis der er fejl i koden, som du redigerer i VS-kode, vil du se fejlmeddelelserne på fanen Problemer, for eksempel følgende, hvis du sletter slutningen af linjen med instantiering af Studerende:
Vejledningen Migrering fra JavaScript går i detaljer om, hvordan man opgraderer et eksisterende JavaScript-projekt. Spring over installationstrinnene, kernen i metoden er at omdøbe dine .js-filer til .ts en ad gangen. (Hvis din fil bruger JSX, en udvidelse, der bruges af React, skal du omdøbe den til .tsx snarere end .ts.) Stram derefter fejlkontrollen og rette fejlene.
Blandt andet skal du ændre modulbaseret kræve() eller Definere() udsagn til TypeScript-importudtalelser og tilføje erklæringsfiler til ethvert biblioteksmodul, du bruger. Du bør også omskrive dit moduleksport ved hjælp af TypeScript eksport udmelding. TypeScript understøtter CommonJS-moduler, ligesom Node.js gør.
Hvis du får fejl om det forkerte antal argumenter, kan du skrive TypeScript-funktionsoverbelastningssignaturer. Det er en vigtig funktion, JavaScript mangler. Endelig skal du tilføje typer til dine egne funktioner og om nødvendigt bruge grænseflader eller klasser.
Du behøver normalt ikke skrive dine egne erklæringsfiler til JavaScript-biblioteker med offentlig domæne. DefinitelyTyped er et lager af erklæringsfiler, som alle er tilgængelige ved hjælp af npm. Du kan finde erklæringerne ved hjælp af siden TypeSearch.
Når du har konverteret alle dine JavaScript-filer til TypeScript, forstærket typerne og fjernet fejlene, har du en meget mere robust kodebase. I stedet for konstant at rette de kørselsfejl, der er rapporteret af testere eller brugere, kan du registrere de mest almindelige fejl statisk.
Det er værd at se Anders Hejlsberg diskutere TypeScript. Som du vil høre fra ham, er TypeScript JavaScript, der skaleres.
