Det verdensomspennende nettet kjører i utgangspunktet JavaScript, HTML og CSS. Dessverre mangler JavaScript flere funksjoner som kan hjelpe utviklere å bruke den til store applikasjoner. Skriv TypeScript.
Hva er JavaScript?
JavaScript startet som et skriptspråk for nettleseren Netscape Navigator; Brendan Eich skrev prototypen over en periode på 10 dager i 1995. Navnet JavaScript er et nikk til Sun Microsystems Java-språk, selv om de to språkene er ganske forskjellige, og navnelikheten har ført til betydelig forvirring gjennom årene. JavaScript, som har utviklet seg betydelig, støttes nå i alle moderne nettlesere.
Introduksjonen av JavaScript på klientsiden i Netscape Navigator ble raskt etterfulgt av introduksjonen av JavaScript på serversiden i webservere Netscape Enterprise Server og Microsoft IIS. Rundt 13 år senere introduserte Ryan Dahl Node.js som et open source, cross-platform, JavaScript runtime-miljø uavhengig av hvilken som helst nettleser eller webserver.
JavaScript-språk
JavaScript er et multi-paradigmaspråk. Den har syntaks med krøllete parenteser og semikolon, som C-familien av språk. Den har svak, dynamisk typing og blir enten tolket eller (oftere) just-in-time kompilert. Generelt er JavaScript en-trådet, selv om det finnes et Web Workers API som gjør multitrading, og det er hendelser, asynkrone funksjonsanrop og tilbakeringing.
JavaScript støtter objektorientert programmering ved hjelp av prototyper i stedet for klassearvingen som brukes i C ++, Java og C #, selv om en klasse syntaks ble lagt til JavaScript ES6 i 2015. JavaScript støtter også funksjonell programmering, inkludert lukking, rekursjon og lambdas (anonyme funksjoner).
Før JavaScript ES6 hadde språket ingen optimering av halen; nå gjør det det, selv om du må slå på streng modus ('bruk streng') for å aktivere det, og implementeringen varierer fra nettleser til nettleser. Streng modus endrer også semantikken til JavaScript, og endrer noen normalt stille feil for å kaste feil.
Hva er med betegnelsen "ES6"? Navnet på det standardiserte JavaScript-språket er ECMAScript (ES), etter ECMA International standardiseringsorgan; ES6 kalles også ECMAScript 2015 (ES2015). ES2020 er for tiden et utkast til standard.
Som et enkelt eksempel for å gi deg smaken av JavaScript-språket, her er en kode for å avgjøre om det er dag eller kveld, og dynamisk sett den aktuelle hilsenen i et navngitt webelement som finnes i nettleserens dokumentobjekt:
var time = ny dato (). getHours ();var hilsen;
hvis (time <18) {
hilsen = "God dag";
} annet {
hilsen = "God kveld";
}
document.getElementById ("demo"). innerHTML = hilsen;
JavaScript-økosystem
Det er mange API-er for JavaScript. Noen leveres av nettleseren, som dokument API i koden vist ovenfor, og noen er levert av tredjeparter. Noen API-er gjelder bruk på klientsiden, andre til bruk på serversiden, andre til bruk på skrivebordet, og andre til mer enn ett miljø.
Nettleser-API-er inkluderer dokumentobjektmodellen (DOM) og nettleserobjektmodellen (BOM), Geolocation, Canvas (grafikk), WebGL (GPU-akselerert grafikk), HTMLMediaElement (lyd og video) og WebRTC (sanntidskommunikasjon).
Tredjeparts API-er florerer. Noen er grensesnitt til fulle applikasjoner, for eksempel Google Maps. Andre er verktøy som gjør JavaScript HTML5 og CSS programmering enklere, for eksempel jQuery. Noen, som Express, er applikasjonsrammer for bestemte formål; for Express er formålet å bygge web- og mobilapplikasjonsservere på Node.js. En rekke andre rammer er bygget oppå Express. I 2016 diskuterte jeg 22 JavaScript-rammer i et forsøk på å forstå hva som ble noe av en dyrehage; mange av disse rammene eksisterer fremdeles i en eller annen form, men flere har gått langs veien.
Det er mange flere JavaScript-moduler, over 300.000. For å takle det bruker vi pakkeforvaltere, for eksempel npm, standard pakkebehandling for Node.js.
Et alternativ til npm er Garn, som kom fra Facebook, og hevder fordelen med deterministiske installasjoner. Lignende verktøy inkluderer Bower (fra Twitter), som administrerer frontend-komponenter i stedet for Node-moduler; Ender, som kaller seg npms lillesøster; og jspm, som bruker ES-moduler (den nyere ECMA-standarden for moduler), i stedet for CommonJS-moduler, den eldre de facto-standarden som støttes av npm.
Webpack pakker JavaScript-moduler i statiske ressurser for nettleseren. Browserify lar utviklere skrive Node.js-stil moduler som kompileres for bruk i nettleseren. Grunt er en filorientert JavaScript-oppgaveløper, og gulp er et streaming-byggesystem og JavaScript-oppgaveløper. Valget mellom gryn og slurk er ikke avgjørende. Jeg har både installert og bruker den som ble satt opp for et gitt prosjekt.
For å gjøre JavaScript-koden mer pålitelig i fravær av kompilering, bruker vi linters. Begrepet kommer fra C-språk lint-verktøyet, som var et standard Unix-verktøy. JavaScript linters inkluderer JSLint, JSHint og ESLint. Du kan automatisere kjører linters etter kodeendringer ved hjelp av en task runner eller IDE. Igjen, valget mellom linters er ikke klart, og jeg bruker det som ble satt opp for et gitt prosjekt.
Apropos redaktører og IDEer, jeg har gjennomgått 6 JavaScript IDEer og 10 JavaScript-redaktører, sist i 2019. Mine beste valg var Sublime Text (veldig rask editor), Visual Studio Code (konfigurerbar editor / IDE), og WebStorm (IDE).
Transpilere lar deg oversette noen andre språk, for eksempel CoffeeScript eller TypeScript til JavaScript, og oversette moderne JavaScript (for eksempel ES2015-kode) til et grunnleggende JavaScript som kjører i (nesten) hvilken som helst nettleser. (Alle spill er avslag for tidlige versjoner av Internet Explorer.) Den vanligste overføreren av moderne JavaScript er Babel.
Hva er TypeScript?
TypeScript er et skrevet supersett av JavaScript som kompileres til vanlig JavaScript (ES3 eller høyere; det kan konfigureres). Åpen kildekode TypeScript kommandolinjekompilator kan installeres som en Node.js-pakke. TypeScript-støtte kommer med Visual Studio 2017 og Visual Studio 2019, Visual Studio Code og WebStorm, og kan legges til Sublime Text, Atom, Eclipse, Emacs og Vim. TypeScript-kompilatoren / trans player tsc er skrevet i TypeScript.
TypeScript legger til valgfrie typer, klasser og moduler i JavaScript, og støtter verktøy for JavaScript-applikasjoner i stor skala for hvilken som helst nettleser, for enhver vert, på ethvert operativsystem. Blant mange andre gevinster for TypeScript har det populære Angular-rammeverket blitt modernisert i TypeScript.
Typer gjør det mulig for JavaScript-utviklere å bruke svært produktive utviklingsverktøy og fremgangsmåter som statisk kontroll og kodefakturering når de utvikler JavaScript-applikasjoner.
Typer er valgfrie, og type inferens tillater at noen få merknader gjør stor forskjell for den statiske bekreftelsen av koden din. Typer lar deg definere grensesnitt mellom programvarekomponenter og få innsikt i oppførselen til eksisterende JavaScript-biblioteker.
TypeScript tilbyr støtte for de nyeste og utviklende JavaScript-funksjonene, inkludert de fra ECMAScript 2015 og fremtidige forslag, for eksempel asynkroniseringsfunksjoner og dekoratører, for å bidra til å bygge robuste komponenter.
TypeScript-språk
TypeScript-språket godtar JavaScript som gyldig, men tilbyr tilleggsalternativene for typekommentarer, typekontroll ved kompileringstid, klasser og moduler. Alle disse er utrolig nyttige når du prøver å produsere robust programvare. Vanlig JavaScript genererer feil bare ved kjøretid, og bare hvis programmet ditt når en bane med feil.
TypeScript på 5 minutter opplæringen gjør fordelene klare. Utgangspunktet er ren JavaScript med en .ts-utvidelse:
funksjonshilsen (person) { returner "Hei" + person;
}
let user = "Jane User";
document.body.textContent = hilsen (bruker);
Hvis du kompilerer dette med tsc, vil det produsere en identisk fil med .js-utvidelse.
Opplæringen har du endret denne koden trinnvis, og lagt til en type kommentar person: streng i funksjonsdefinisjonen, kompilering, testtypekontroll av kompilatoren, og legger til et grensesnitt for en person type, og til slutt legge til en klasse for Student. Den endelige koden er:
klasse Student { fullnavn: streng;
constructor (public firstName: string, public middleInitial: string,
offentlig etternavn: streng) {
this.fullName = fornavn + "" + middleInitial + "" + etternavn;
}
}
grensesnitt person {
fornavn: streng;
etternavn: streng;
}
funksjonshilsen (person: person) {
returner "Hei", + person.firstName + "" + person.lastName;
}
la bruker = ny student ("Jane", "M.", "bruker");
document.body.textContent = hilsen (bruker);
Når du kompilerer dette og ser på det utgitte JavaScript, vil du se at klasser i TypeScript bare er en stenografi for den samme prototypebaserte arven som brukes i vanlig JavaScript ES3. Merk at egenskapene person.firstName og person.lastName genereres automatisk av kompilatoren når den ser deres offentlig attributter i Student klassekonstruktør, og også overført til Person grensesnitt. En av de fineste fordelene med typekommentarer i TypeScript er at de gjenkjennes av verktøyene, for eksempel Visual Studio Code:
Hvis det er feil i koden mens du redigerer i VS-kode, vil du se feilmeldingene i kategorien Problemer, for eksempel følgende hvis du sletter slutten av linjen med instantiering av Student:
Veiledningen for migrering fra JavaScript går i detalj om hvordan du oppgraderer et eksisterende JavaScript-prosjekt. Hopp over installasjonstrinnene, kjernen i metoden er å gi nytt navn til .js-filene dine til .ts en om gangen. (Hvis filen din bruker JSX, en utvidelse som brukes av React, må du endre navn på den til .tsx i stedet for .ts.) Stram opp feilkontrollen og fikse feilene.
Blant annet må du endre modulbasert krever () eller definere() uttalelser til TypeScript-importuttalelser og legg til erklæringsfiler for alle biblioteksmoduler du bruker. Du bør også skrive om moduleksportene dine ved hjelp av TypeScript eksport uttalelse. TypeScript støtter CommonJS-moduler, slik Node.js gjør.
Hvis du får feil om feil antall argumenter, kan du skrive signaturer for overbelastning av TypeScript-funksjon. Det er en viktig funksjon JavaScript mangler. Til slutt bør du legge til typer i dine egne funksjoner, og eventuelt bruke grensesnitt eller klasser.
Du trenger vanligvis ikke å skrive dine egne erklæringsfiler for JavaScript-biblioteker med offentlig domene. DefinitelyTyped er et lager med erklæringsfiler, som alle er tilgjengelige ved hjelp av npm. Du kan finne erklæringene ved hjelp av TypeSearch-siden.
Når du har konvertert alle JavaScript-filene dine til TypeScript, forbedret typene og eliminert feilene, har du en mye mer robust kodebase. I stedet for å stadig fikse kjøretidsfeil rapportert av testere eller brukere, vil du kunne oppdage de vanligste feilene statisk.
Det er verdt å se Anders Hejlsberg diskutere TypeScript. Som du vil høre fra ham, er TypeScript JavaScript som skalerer.
