9789059409323

Inhoud

1KennismakenmetECMAScript20151

EenkortegeschiedenisvanJavaScriptenECMAScript2

BrendanEich2

ECMAScript,JavaScriptenversienummers2

ECMAScript2015,2016,2017enverder3

WatisECMAScript2015?4

OnderdelenvanECMAScript20155

Kenmerkenperfeature7

Nieuwefeaturestochgebruiken8

Compilersenpolyfills8

Traceur,BabelenTypeScript10

WatisTypeScript?11

RelatietussenES5,ECMAScript2015enTypeScript13

Allesisoptioneel14

Benodigdevoorkennis15

UkentJavaScript16

Tipsvoormeerlezen17

Indelingvanditboek17

Deontwikkelomgevinginrichten18

Editorenbrowser18

Node.jseneenserver19

TypeScriptinstalleren20

Oefenbestandendownloaden21

Conclusie 22

Praktijkoefeningen23

2NieuwefeaturesinECMAScript201527

Vanvarnaarletenconst28

varinES5–functionscope28

VariabeleninES6–blockscope29

Constantenmakenmetconst31

Templateliteralsenstringinterpolation32

Backtickgebruiken33

Stringsovermeerdereregels33

Arrowfunctions34

Kenmerken35

Lexicalthis36

Standaardwaardendoorgevenvoorparameters38

Optioneleparameters40

Benoemdeparameters40

Realistischvoorbeeld42

Restparameters43

Spread-operator43

Overigeparameters45

MeerES6-features46

Maps,Setsenmeer46

Nieuwearraymethodes48

Destructuring49

MeerES6-kenmerken50

Conclusie 51

Praktijkoefeningen53

3Werkenmetklassen57

Watzijnklassen? 58

Klassenzijnfuncties58

Werking59

Geenhoistingvanklassen60

Klasse-expressies60

Opbouwvaneenklasse61

Constructor61

Methodes62

Eigenschappen63

Gettersensetters64

Keywordsgetenset65

Statischemethodes67

Instantiesvaneenklassemaken69

Overervingensubklassenmakenmetextends69

4KennismakenmetTypeScript77

EenkortegeschiedenisvanTypeScript78

SupersetvanJavaScript78

Transpiling80

Alleplatformen80

UitbreidingvanJavaScript80

Voordelenvoorontwikkelaars82

KennismakenmetTypeScriptviadePlayground84

OefenenmetdePlayground85

EenklassegebruikenindePlayground86

TypeScript-typeringengebruikenindecode87

MeervoorbeeldenindePlayground89

TypeScriptlokaalinstalleren90

Package.json91

Afhankelijkheid:Node.js92

Node.jsinstalleren93

HelloWorldinTypeScript93

Package.jsonaanpassen94

TypeScriptHelloWorldschrijven95

TypeScriptconfigurerenmettsconfig.json97

Tsconfig.jsonmaken98

TypeScriptcompileroptions100

Meerdancompileroptions102

Conclusie102

Praktijkoefeningen104

5Typeringvanvariabelenenfuncties107

Zelftypenschrijven-1.Interface114

Hetkeywordinterface114

Deinterfacegebruiken115

Voordelenvaninterfaces117

Optioneleeigenschappen117

Readonlyeigenschappen118

Returntypesaangeven119

Zelftypenschrijven-2.Klassen120

VerschilmetES6121

Shorthandnotatie:publicenprivateproperties122

Werkingvanpublic,privateenmeer122

Variabelenbeschermenmetgettersensetters123

Overervingviaklassen125

Meeroverklassen127

Wanneerklasseenwanneerinterface?128

Praktijkoefeningen137

6GenericsenandereTypeScript-mogelijkheden141

Watzijngenerics?142

Wanneergenericshandigzijn142

Hetgegevenstypeany143

Eengenericfunctieschrijven144

Typeinferencemetgenerics145

Genericsincombinatiemetlijsten146

Genericclasses147

Genericsmetinterfaces149

Namespaces151

Hetkeywordnamespace153

Eennamespacegebruiken154

Namespacesovermeerderebestanden155

Referentiesopgeven156

Implementatieschrijven157

VerwijzingeninHTML157

Deoptie“outFile”intsconfig.json158

Volgordevanbestanden159

Conclusie160

Praktijkoefeningen161

7TypeScriptincompleteapplicaties163

TypeScript-applicatiesdebuggen164

Genererenvan.map-bestanden165

.map-bestandeninproductie166

ExterneJavaScript-bibliothekengebruiken166

TypeDefinitionFiles166

DefinitelyTyped168

TSDenTypings169

Typingsinstalleren169

jQueryenBootstrapinstalleren170

jQueryenBootstrapinzetteninhetproject172

Index.tsschrijven173

Deapplicatietesten173

Codeincheckeninversiebeheer174

BundelingvanbestandenmetWebPack175

Modulebundler175

WerkingvanWebPack176

WebPackinstalleren177

WebPackconfiguratiebestand177

HTMLaanpassen178

TypeScriptaanpassen178

Debundelgenereren179

Hetresultaatbekijken180

Loadersgebruiken181

Watcherinstellen182

EenTypeScripte-commerceapplicatiemaken184

Stap1–Omgevinginstellen185

Package.json185

Tsconfig.json186

Typings.json187

Webpack.config.js187

Productentoevoegen188

Stap2–Modelmaken188

Mapmaken188

Stap3–Indexbestandenmaken189

Eersteversietesten191

Stap4–Boekenladen192

Index.ts192

BookShop.ts193

Stap5–Helperbestandmaken194

Testen195

Stap6–Detailsperboektonen195

Detailsverbergen198

Stap7–Toevoegenaanwinkelwagen199

Modeltoevoegen199

BookShopuitbreiden199

Nieuwehelpermethodesschrijven201

HTMLuitbreiden202

Stap8–Productenverwijderenuitwinkelwagen203

Stap9–Bestellingplaatsen205

Leegmaken207

Stap10–Kleinewijzigingenindeuserinterface207

Compleet208

Conclusie209

Kennismakenmet ECMAScript2015

HTMLisalruim25jaardestandaardvoorhetmakenvanwebsites.HTML kanechternietalles.InHTMLwordtalleendestructuurvanpagina’s beschreven.JavaScriptisvanoudsherdeaanvullendeprogrammeertaal omHTMLinteractieftemaken.Hetisdepopulairsteprogrammeertaalop internet.JavaScriptstaatdaarmeeaandebasisvanelketechniekdie webdevelopersmoetenkennen.Hetisdemotorachterwebappsals Gmail,Facebook,Instagram,webwinkelsenmeer.MaarJavaScriptstamt ookalweeruit1995.ECMAScript2015(ookwel‘ES6’)isdeopvolgervan JavaScriptenbiedtnieuwekeywordsenprogrammeermodellendiebeter aansluitenbijdemogelijkhedenvanmodernebrowsersendeeisendie aanhedendaagsewebappswordengesteld.TypeScriptbreidtopzijn beurtECMAScript2015weeruitmetstriktetyperingenentoolsdiewe kennenuitprogrammeertalenalsJavaenC#.Dithoofdstukbiedteen inleidingopbeidetechnieken,waarnauvanafhetvolgendehoofdstuk metdepraktijkaandeslaggaat.

Uleertindithoofdstuk:

EenkortegeschiedenisvanJavaScriptenECMAScript.

WaaromECMAScript2015?

WatisTypeScript?

Benodigdevoorkennis.

Dewerkomgevinginstellenenaanvullendetools.

Indelingvanditboek.

EenkortegeschiedenisvanJavaScripten

ECMAScript

BrendanEich

JavaScriptisoorspronkelijkin1995ontwikkelddoorBrendanEich, diebijNetscapewerkte.Netscapeishetbedrijfdateenvande oerbrowsersvoorinternetmaakte,NetscapeNavigator.Ooktoen alwasJavaScriptbedoeldalsuitbreidingvanHTMLommeer interactiviteitopwebpagina’smogelijktemaken.Decombinatie vanHTMLenJavaScriptstonddestijdsbekendonderdenaam DynamicHTML (DHTML).

Debrowsersuitdietijd(InternetExplorer4enNetscape4) bodenondersteuningvoordecombinatievanHTMLenJavaScriptinwebpagina’s.Ondertussenzijnwenatuurlijkvelebrowserversiesverder.JavaScriptisuitgegroeidtoteenvande belangrijkstepijlersbinnendebrowsereninmodernewebapplicaties(‘webapps’).ZonderJavaScriptzoudenFacebook, Twitter,e-commerceofinternetbankierennietbestaan.Alle huidigebrowsers(InternetExplorer,Firefox,Chrome,Safari enzovoort)kunnenJavaScriptuitvoeren.

ECMAScript,JavaScriptenversienummers

IndeloopderjarenishetversienummervanJavaScriptsteeds lichtopgehoogd.Eerstliephetversienummeromhoogmethet verschijnenvaneennieuwebrowserversie.Nuisdeontwikkeling vanJavaScriptlosgekoppeldvannieuweversiesvandebrowser. JavaScriptisinmiddelsomgevormdtoteenofficiële,genormeerde engestandaardiseerdeprogrammeertaal.Ditisgedaandoorde structuureninhoudvandetaaltelatengoedkeurenenstandaardiserendoordeorganisatie EuropeanComputerManufacturers

Association (ECMA).HiermeeisdeontwikkelingvanJavaScriptnu inhandenvaneenonafhankelijkinstituutennietmeervanéén browserfabrikant.

WatdoetECMA?

ECMAheefttottaaktechnischestandaardente publicerenenhieroptoetezien.ECMAhoudt zichnietalleenbezigmetJavaScript,maarook metanderecomputergerelateerdestandaarden, zoalshetbestandsformaatvoorcd-roms,de specificatiesvandeprogrammeertaalC#enhet bestandsformaatOfficeOpenXML.Wiltuhier meeroverweten,bezoekdan www.ecma-international.org

ECMAScript2015,2016,2017enverder

VroegersprakenwedusvanJavaScript1.0,1.2enzovoort.TegenwoordigwordtgesprokenvanECMAScript.Eerstkreeg

ECMAScriptookversienummers(ECMAScript3enECMAScript5). Sinds2015wordteenjaartalgebruikt.Elkjaarinjuniisereen congreswaarinwordtbeslotenwelkenieuwefeaturesofficieel wordentoegevoegdaandeprogrammeertaal.Zokrijgenwe ECMAScript2015,ECMAScript2016enbinnenkortECMAScript 2017(enzovoort).

Zolangvoorgesteldenieuwefeaturesnoggeendeeluitmakenvan detaalzelf,wordenzegeschaardonderhetkopje ECMAScript Next.DetabelgeefteenoverzichtvandegeschiedenisvanJavaScriptenECMAScript.

ECMAScript3 1999

ECMAScript5 2009

ES6/ECMAScript2015 2015

ECMAScript7/2016/Next 2016enverder

DebegrippenES6,ECMAScript6enECMAScript2015worden vaakdoorelkaargebruikt.Erwordtdandeversieuit2015 bedoeld.Datisnieterghandig,maarhetisindeloopderjarennu eenmaalzogegroeid.

ECMAScript4?

MisschienishetuopgevallendatECMAScript4 inhetoverzichtontbreekt.Ditwasjarenlangeen voorstel,maardeontwikkelingisuiteindelijk gestopt.Dithadtemakenmetverschillenin inzichtbinnenhetcomitéoverderichtingdie JavaScriptopmoestgaanenonnodigecomplexiteitvannieuweonderdelen.ECMAScript4isdus nooitverschenenenerisgeenbrowserdiehet ondersteunt.Menisdirectverdergegaanmetde ontwikkelingvanECMAScript5.

WatisECMAScript2015?

ECMAScript2015iseengroteupgradevanJavaScript.Indetaal zijntalvannieuwekeywordsenfunctiesaanwezig.Nieuwzijn bijvoorbeeldkeywordsals let , const , class , super enmeer. Ookkuntugebruikmakenvanarrowfunctionsenlambda

expressions.MetECMAScript2015maaktJavaScripteenenorme stapvoorwaartsenwordtdetaalechtvolwassen.

JavaScriptcore

Hetisbelangrijkomuterealiserendat ECMAScript2015(netals‘ouderwets’JavaScript)nogsteedsbestaatuiteenrelatiefkleine setkernopdrachtendiewordenuitgevoerdin een hostingenvironment.Dekernopdrachten zijngestandaardiseerddoorECMA.Ditzijnbijvoorbeeld var , let , for , while , if enzovoort. Dehostingenvironmentisindemeestegevallen debrowser.MaarJavaScriptkanookinandere omgevingenwordenuitgevoerd.DenkaanJavaScriptopdeserver(Node.js)ofaanJavaScriptin pdf,ominteractievepdf-documententemaken. JavaScript–endusookECMAScript2015–is nietslechtsbeperkttotgebruikindebrowser.

OnderdelenvanECMAScript2015

EenhandigoverzichtvanalleonderdelenvanECMAScript2015is tevindeninde ECMAScriptcompatibilitytable,dietevindenisop kangax.github.io/compat-table/es6/ .(Googelopdetrefwoorden Kangax en es6 ,danishetheteersteresultaatindelijst.

Detabeluitafbeelding1.1iseenprimanaslagwerkenisalsvolgt opgebouwd:

• Boveninkiestueenversie.IndeafbeeldingisES6geselecteerd;ditisookdestandaardselectie.

• AandelinkerkantzieuwelkefeaturesdeeluitmakenvanECMAScript6. Datzijnbijvoorbeeldonderdelenalsdefault functionparameters, restparameters enverdernaarbenedenzakenals arrowfunctions en class.Veelvandezeonderdelenwordeninditboekbesproken.

Afbeelding1.1 DeECMAScriptcompatibilitytablegeefteenoverzicht vannieuweJavaScript-featuresaandelinkerkant,endematewaarinze ondersteundwordendoordeverschillendebrowsers(degekleurdeblokjes).

• Aanderechterkantzietuvervolgensinwelkematedebetreffendefeaturedoordeverschillendeomgevingenwordtondersteund.Erzijnsecties Compilers/polyfills , Desktop browsers , Servers/runtimes en Mobile .

• Eengroenblokjebetekentdatdefeaturedeelsofvolledig wordtondersteunddoordebetreffendeomgeving,eenrood blokjebetekentdatditniethetgevalis.

Indecategorie Desktopbrowsers isbijvoorbeeldteziendat(op hetmomentvanschrijvenvanditboek)InternetExplorer11 slechts11%vandenieuwefeaturesondersteunde,maardat Edge,denieuwebrowservanMicrosoft,maarliefst95%vande ECMAScript6-featuresgoedverwerkt.OokFirefoxscoortruim bovende90%enChromeenOperascoren97%.

Afbeelding1.2 Bekijkhoedeverschillendedesktopbrowsersscorenbij deondersteuningvanES6-kenmerken.

Kenmerkenperfeature

Dooreenbepaaldefeaturetekiezen,kuntuvanlinksnaarrechts bekijkenhoedezefeaturewordtondersteund.Inafbeelding1.3is bijvoorbeeldteziendathetnieuwekeyword class (ziehoofdstuk 3en4)doormodernebrowsersgoedwordtverwerkt,maardat mobielebrowsers(Android,iOS)hetlatenafweten.Ditbetekent datu class nietrechtstreekskuntgebruikenindezebrowsers.

Afbeelding1.3 Mobielebrowsersscoreninhetalgemeenslechtopde ondersteuningvannieuweECMAScript6-features.

Kiesbovenindetabeleenanderversienummer(bijvoorbeeld 2016+ofnext)omtezienwelkenieuwemogelijkhedenvoorde toekomstzijnvoorgesteldenhoedeondersteuningvanbrowsers enandereomgevingenopditmomentis.Waarschijnlijkknalteen tabelmetallemaalrodevakjesutegemoet.Dezeondersteuning wordtindeloopderjareningebouwd,metelkenieuwebrowserofruntime-versie.

Afbeelding1.4 Ukuntalvastzienwelkeonderdelendekomendejaren aanJavaScriptwordentoegevoegd.Ondersteuningdoorbrowsersen runtimesisopditmomentuiteraardnogzeerbeperkt.

Nieuwefeaturestochgebruiken

Alseenvakjeroodisweergegeven,betekentditdathetnietdoorde aangegevenbrowserofruntimewordtondersteund.Maarwatnualsu tochgraagnieuweonderdelenals class wiltgebruiken,terwijluw

publiekmogelijkbeschiktovereenoudebrowser(InternetExplorer9, 10of11)ofeensmartphonemetAndroid4.4.Hoezitdatdan?Moetu dezetoevoegingendanmaarachterwegelaten?Ofergernog,bijelke nieuweeigenschapdieuwilttoepassenurenlangindetabellopenzoekenenzelfeenuitzonderingstabelopstellen?Gelukkigniet!

Compilersenpolyfills

Alsueenwebappontwikkeltvooreenintranetwaarbijuzeker weetdatiedereenEdgegebruikt,ofChrome50+,danisergeen probleem.GebruikzoveelECMAScript2015alsuwilt,wantalle vakjeszijngroen.Maarinwerkelijkheidwordtuwappwaarschijnlijkdoorhonderdenofduizendenbezoekersgebruikt,die

allemaaloverandereapparatenenbrowserversiesbeschikken. Danschietencompilersenpolyfillsutehulp.

Uitbreiding

ECMAScript2015iseenuitbreidingophetoorspronkelijkeJavaScript.Erisdus100%overlapping.

• PolyfillszijnkleinescriptsofcodefragmentendiekunnenwordentoegevoegdaaneenHTML-paginaomnieuwefunctionaliteitookinoudebrowsersbeschikbaartemaken.Zevullenletterlijkhetgatopdatindebrowseraanwezigis.

• Compilers zijnprogramma’sdiehetmoderneECMAScript 2015datuschrijft,omzettennaarklassiekECMAScript5,dat inallebrowserskanwordengebruikt.Eenanderenaamvoor eencompilerisookwel transpiler,omdatdezenieuwecode terug-compileertnaar‘oude’code.

Afbeelding1.5 Dewerkingvantranspilersenpolyfills.ES6-codewordt omgezetnaarvoordebrowserbegrijpelijkeES5-code

Erzijnverschillendecompilers/transpilersbeschikbaar.De bekendstezijn:

• Traceur EenproductvanGoogle.Doortraceur.jstoetevoegenaandepagina,kuntuverderopindepaginaECMAScript 2015-featuresgebruikenalsclasses,arrowfunctionsenzovoort.Zewordenterplekkeindebrowservertaald.Voor betereprestatieskuntutraceurookgebruikenopdeserver, ofineenGrunt/Gulp-workflow.Meerinformatieovertraceur istevindenop github.com/google/traceur-compiler.

• Babel OokBabel(spreekuit:‘Babbel’,niet‘Beebel’)iseen JavaScript-compiler.Hetiseenonafhankelijkopensourceproductdatmetconfiguratiescriptsinhogemateingesteld kanworden.VeelmensenvindendecodediedoorBabel wordtgegenereerdbeterleesbaardancodediedoortraceur wordtgegenereerd,maarhetgebruikendeconfiguratievan Babel6zijnlastig.AllesoverBabelistevindenop babeljs.io.

• TypeScript Enjawel,ookTypeScriptiseenJavaScript-compiler.UkunterECMAScript6-codemeeschrijven,diedoor TypeScriptwordtomgezetnaarES5-code.TypeScriptondersteuntnognietálleECMAScript2015-features(ziedecompatibilitytable),maarwelvoldoendeenisrelatiefeenvoudigin hetgebruik.BovendienbiedthetgebruikvanTypeScripttal vananderevoordelen.Daarkomenweinderestvanhetboek uiteraardnoguitgebreidopterug.Hetalgemeneadresvan TypeScriptis typescriptlang.org.

WatisTypeScript?

WehebbeninditboeknietvoornietsgekozenvoorTypeScript. HetismeerdanalleeneenJavaScript-compiler.DoorTypeScript teschrijvenkrijgtudebeschikkingovereenseriemogelijkheden dievoorheenalleenvoorapplicatieprogrammeurs(Java,C#, Pascal/Delphi)warenweggelegd.Opdewebsiteomschrijftteam TypeScriptdetoolals JavaScriptthatscales.DedoorTypeScript gegenereerdeJavaScript-codeisbeschikbaarvoorelkebrowser enelkbesturingssysteem.TypeScriptzelfisopensourcesoftware.

WiemaaktTypeScript?

TypeScriptisoorspronkelijkafkomstiguitdestal vanMicrosoft.EnalsuvindtdatTypeScript behoorlijkwatovereenkomstenlijkttehebben metC#,danhebtuhetgoedgezien.TypeScript isnamelijkontwikkelddoorAndersHejlsberg,de mandieookaandewiegstondvandeprogrammeertaalC#(2000).DaarvóórheeftHejlsberg ookdetalenDelphi(1995)enTurboPascal (1983)geschreven.Eenzeerinvloedrijkprogrammeurdus.MeeroverHejlsbergistevinden op en.wikipedia.org/wiki/Anders_Hejlsberg

TypeScriptisnuechteropensourcesoftware, iedereenkandebroncodeinzienenverbeteren. TypeScriptisdaarmeeeigenlijkvanonsallemaal.

InhetkortbiedtTypeScriptextrafeaturesindevormvandata typing(oftewel:hetdatatypeaangeven,dusafdwingendateen bepaaldevariabelevanhettype string , number , boolean ofcustomtypeis),typedefinitionfilesomandereJavaScript-bibliothekentekunnengebruikenineenTypeScript-project,interfaces, enums,genericsennogveelmeer.Uiteraardleestuhierveel meeroverinderestvanhetboek.

OmdatTypeScriptvoorafwordtomgezetnaarJavaScript,worden foutenindecodealineenvroegstadiumontdekt.Datiseen grootverschilmetdehuidigegeneratieJavaScript-code,waarmee foutenpasrun-time(ofviauitgebreidetestscriptsmettalvanifstatements),dusachterafzichtbaarworden.MetTypeScriptkunt urobuustecodeschrijvendieminderfoutenbevat.Ditisuiteindelijkzowelvoordeprogrammeuralsvoordeeindgebruikereen grootvoordeel.

RelatietussenES5,ECMAScript2015en

TypeScript

Inafbeelding1.8isderelatietussenhetaloudeECMAScript5,het nieuweECMAScript6/ECMAScript2015enTypeScriptgoedte zien.

Afbeelding1.8 ECMAScript2016enTypeScriptzijnbeidesupersetsvan gewoonJavaScript.DaaromkanelkegeldigeregelES6(ofTypeScript) ookwordenteruggebrachtnaareengeldigeES5-syntaxis.Leesbaarheid envereenvoudigingvandecodezijnbelangrijkedoelstellingen.

• IndekernvandecirkelsstaatES5.Ditiseen–naarhedendaagsemaatstaven–beperktesetopdrachten,dieechter goedwordenondersteunddooralleomgevingen:zowelbrowsers,mobieleapparatenalsserver-runtimes.

• ES6/ECMAScript2015iseenuitbreidingvanES5.Ditbetekent dusdater100%overlappingbestaat.ElkegeldigeregelES5is ookgeldiginECMAScript2015.Omgekeerdisdatuiteraard niethetgeval,daarvoorzijndecompilers/transpilersnodig. MaarhetisbelangrijkterealiserendatES6inallegevalleneen uitbreiding vanES5is.Erzijngeennieuwesyntaxisregels,geen nieuwetekensdieverbodenzijn,aluwJavaScript-kennisblijft geldig.Dezewordtalleenuitgebreidmetnieuwemogelijkheden.

• TypeScriptbreidtopzijnbeurtES5enES6weeruit(met striktetyperingen,interfacesenaldieanderezakendiewe hierbovengenoemdhebben).Oftewel:elkegeldigeregelES5 isóókgeldiginTypeScript.Ditiseengrootvoordeel,wanthet betekentopnieuwdatugeenafwijkendesyntaxisof puntkomma’shoeftteleren.AlleJavaScriptblijftgeldig;er wordenalleennieuwe,extramogelijkhedenaantoegevoegd. Allesisoptioneel

EenanderkenmerkisdatzowelES6alsTypeScriptvolledigoptioneelis.Hetwerkenmetklassen,interfacesenzelfgedefinieerde typenismogelijk(enhetmaaktuwlevenalsfront-endprogrammeureenstukaangenamer),maarhetisgeenszinsverplicht.

WatiseenJavaScript-fout?

UweetwaarschijnlijkdatallesinJavaScriptvan hettype var is.Allevariabelenzijn loosely typed.Umageenstatementschrijvenals var myVar=‘Hello’ (myVarisnuimplicietvanhet type string ).Verderopmaguvervolgensschrijven myVar=10 (nuis myVar vanhettype number ).InJavaScriptisditvollediggeaccepteerd. TypeScriptzalerechterovervalleneneencompiler-errorlatenzien.Hetscriptzalwelwerken, maarwaarschijnlijkishetongewenstdateen variabeledeenekeereenstringendeandere keereennummerbevat.TypeScriptcontroleert ditsoortzakenenwaarschuwtu.Dooralleende bestandsextensieaantepassenvan *.js naar *.ts wordtualopditsoortfoutengewezen.U hoeftergeenregelcodevooraantepassen.

Wezullenhetzekernietaanbevelen,maarookzonderéénregel TypeScriptteschrijvenkuntudesgewenstJavaScript-codeaande TypeScript-compileraanbieden.Mochtenerlogischefouteninde –bestaande–JavaScript-codestaan,danwordendezeookopgemerktdoordeTypeScript-compiler.

Afbeelding1.9 TypeScriptcontroleerthettypevanvariabelen.Dooralleendeextensieaantepassennaar.tskrijgtudirectinzichtinditsoort logischefouten.ZekomenveelvoorinJavaScript-apps.

//test.ts

varmyVar=10; myVar=“hello”;//ts-error:“Type‘string’isnotassignabletotype‘number’

OverigemogelijkhedenvanECMAScript2015enTypeScript komeninderestvanhetboekuiteraarduitgebreidaandeorde. Ukentnuechterderelatietussendetechniekenenweetwaaru debegrippenkuntplaatseninhetlandschapvanwebdevelopmenttechnieken.

Benodigdevoorkennis

Ditboekmaaktdeeluitvande WebDevelopmentLibrary (www.webdevelopmentlibrary.nl).Inelkdeelwordteenopzichzelfstaandetechniekbesprokendietemakenheeftmetwebdevelopment.Andere,gerelateerdetechniekenwordenbekend verondersteld.Zobetaaltualleenvoordatgenewatuechtnodig hebt.

InditboekgaanweinopECMAScript2015enTypeScript1.8. TypeScript2.0isophetmomentvanschrijvenvanditboekin bèta,maarbevatgeenaanvullingenofwijzigingendievoordeze uitgavevanbelangzijn.ECMAScript2015enTypeScriptzijnbeide uitbreidingenopJavaScript,zoalsuindevorigeparagraafhebt gelezen.

UkentJavaScript

WegaanerdanookvanuitdatuJavaScriptredelijktotgoed beheerst.UhebtalervaringmethetschrijvenvanJavaScripten eventueelhetwerkenmetaanvullendeJavaScript-bibliothekenof -frameworks,zoalsjQueryofAngular.VoorkennisvanjQueryof Angular(ofandereframeworks)isechternietnodig.Wegaanin ditboeknietinopzakenalsvariabelen, for -en while -lussen, voorwaardelijkestatements(if )endergelijke.Dezeworden bekendverondersteld.

Wathoeftunietteweten?

KennisvanandereJavaScript-bibliotheken(zoals jQuery,Backbone,Knockout)of-frameworksis nietnodig.OokhoeftunikstewetenvanserversidedtalenalsPHP,Python,Ruby,JavaofC#. MochtuwelJavaofC#kennen,danzullenveel concepteninTypeScriptubekendvoorkomen. Maarvoorkennisvandezetalenisnietperse nodig.

BovendienwordenECMAScriptenTypeScript,zoalsuinmiddels hebtbegrepen,gebruiktindecontextvaneenwebsiteof webapp.UmoetdaaromenigekennishebbenvanHTMLenCSS. Umoeteenbasispaginamettags,attributen, console.log()statementsenzovoortgoedkunnenschrijvenenbegrijpen.

KanuwHTML-ofJavaScript-voorkennisweleenopfrisbeurt gebruiken?Leesdaneerstdevolgendetitels(vandezelfde auteur):

• WebDevelopmentLibrary–JavaScript,ISBN9789059407589

• WebDevelopmentLibrary–HTML,ISBN9789059408081

Indelingvanditboek

Ditboekbestaatuittweedelen.

• Hoofdstuk1totenmet3 Indezehoofdstukkengaanwein opECMAScript2015/ES6.UleertopwelkemanierdestandaardJavaScript/ES5-codewordtuitgebreidmetnieuwekeywordsenmogelijkheden.Uschrijft‘gewoon’JavaScript-code, diedirectkanwordenuitgevoerdinmodernebrowserszoals Chrome,FirefoxenEdge.

• Hoofdstuk4totenmet7 DitdeelgaatinopTypeScript.De kennisuitdeeerstehoofdstukkenwordtdanbekendverondersteld.UleerthoeES6-codeverderwordtuitgebreidmet TypeScript-specifiekekenmerken.Uwcodemoeteerstdoor deTypeScript-compilerbewerktwordenvoordathijuitvoerbaarisindebrowser.Leesvooralderestvandithoofdstukom hieralvastkortkennismeetemaken.