Microsoft-verktøy strømlinjeformer TypeScript-utvikling

TypeScript er Microsofts forsøk på å forenkle å bygge store applikasjoner med JavaScript. Microsoft anerkjente behovet for verktøy for å gjøre det lettere å administrere disse applikasjonene og opprettet Web Essentials 2012-utvidelsen og TypeScript-plugin-modulen for Visual Studio 2012 (jeg antar at full TypeScript-støtte vil bli inkludert i Visual Studio 2013). Her er en omvisning i ekteskapet med TypeScript og Visual Studio 2012, med vekt på å utvikle og teste kode.

Få alt du trenger

TypeScript-plugin-modulen for Visual Studio 2012 har en TypeScript-editor i IDE. I tillegg installerer den kommandolinjekompilatoren hvis den ikke allerede er installert. TypeScript-støtte er også installert via Web Essentials 2012-nedlastingen, men den inkluderer ikke redigereren. Selv om du kan utvikle TypeScript uten plugin-modulen, er det enklere med det, fordi plugin-modulen gir IntelliSense og in-line kompilering, noe som skal gjøre deg mer produktiv. Web Essentials 2012 gir muligheten til å justere kompilatorinnstillinger, bruke regioner og mye mer.

Du bør installere nedlastinger for å ha alt du trenger for TypeScript-utvikling. Plugin-nedlastingen er enkel, da den er inneholdt i en MSI-fil, men den krever at systemet starter på nytt for at endringene i Visual Studio 2012 kan gjøres. Web Essentials 2012 er en Visual Studio-utvidelse, men nedlasting og installasjon er så enkel som pek-og-klikk. (Du trenger Visual Studio 2012 for å bruke begge nedlastningene.)

Utvikle TypeScript i Visual Studio 2012

Når miljøet er satt opp, er du klar til å utvikle TypeScript. Du kan velge å jobbe med TypeScript-filer eller bygge et komplett program. Du kan jobbe med TypeScript-filer ved å velge File | Ny fil, som åpner vinduet Ny fil ( figur A ). Velg Skript på venstre side av figur A for å se TypeScript-filtypen som vises. Du kan også velge å lage et prosjekt ved å velge File | Nytt prosjekt og velge TypeScript (HTML-applikasjon med TypeScript) ( figur B ). Figur C viser resultatet av å lage et prosjekt.

Figur A


Figur B


Figur C


Du kan se TypeScript-støtte ved å opprette en fil. Som et eksempel lager jeg en TypeScript-fil som vil inneholde følgende kode. Jeg bruker IntelliSense mens jeg skriver inn koden ( figur D ).

 klasse bil {konstruktør (offentlig merke: streng, offentlig år: nummer, offentlig modell: streng) {}} klasse bil utvider bil {konstruktør (merke: streng, år: nummer, modell: streng) {super (merke, år, modell ); } getInfo (): streng {return this.year + "" + this.make + "" + this.model; }} var eksempel: bil = ny bil ("Ford", 2000, "Mustang"); console.log (example.getInfo ()); 

Figur D


En annen flott funksjon som følger med installasjonen av Web Essentials 2012 er delt skjermbilde av TypeScript-koden. som standard viser den originale TypeScript til venstre med den tilsvarende standard JavaScript til høyre. Presentasjonen for vår eksempelkode er vist i figur E. TypeScript (den forenklede versjonen) er til venstre, og JavaScript til høyre er litt mer komplisert med prototypen, funksjonen og andre språkfunksjoner som brukes.

Figur E


Du genererer JavaScript-ekvivalentkoden vist i figur E ved å kompilere TypeScript-koden. Dette kan oppnås med kommandolinjekompilatoren, men utvidelsen Web Essentials 2012 knytter dette til Visual Studio 2012 IDE via menyalternativer for Build. En ny meny som kalles Web Essentials, er tilgjengelig via Build-menyen. den tilbyr kompilasjonsalternativer for LESS, CoffeeScript og TypeScript ( figur F ). Når du har valgt alternativet Kompilere alle TypeScript-filer på nytt, vises det genererte JavaScript i den høyre delen av figur E.

Figur F


Det genererte JavaScript-utgangsvinduet vist i figur E er et alternativ som kan være deaktivert; det er bare ett av alternativene som er tilgjengelige. Du får tilgang til disse alternativene via Verktøy | Alternativer-vinduet, som inkluderer en Web Essentials-seksjon ( figur G ). Den gir kompilator og generelle TypeScript-alternativer. Du kan bestemme deg for å kompilere til ECMAScript 3-standarden; Alternativet Generer kildekart lar deg feilsøke koden din, og mye mer.

Figur G


Dykk inn i TypeScript-utvikling

Med Microsoft bak TypeScript-språket, er det ingen overraskelse at selskapet fullt ut omfavner det innen flaggskipets utviklingsverktøy. TypeScript-plugin-modulen gir en rik editor i Visual Studio 2012, og utvidelsen Web Essentials 2012 legger til alt som trengs for å konsentrere seg om TypeScript-utvikling i stedet for verktøykonfigurasjon.

Det gjenstår å se hvordan TypeScript vil bli omfavnet, men disse verktøyene gjør det enkelt for eksisterende Microsoft-utviklere å ta steget nå.

© Copyright 2021 | pepebotifarra.com