Share
I slutten av 2012 introduserte Microsoft TypeScript, en innstilt superset for JavaScript som kompilerer til vanlig JavaScript. TypeScript fokuserer på å gi nyttige verktøy for storskala applikasjoner ved å implementere funksjoner, for eksempel klasser, skrive merknader, arv, moduler og mye mer! I denne veiledningen vil vi komme i gang med TypeScript, ved hjelp av enkle bit-størrelse kodeeksempler, kompilere dem i JavaScript, og se de umiddelbare resultatene i en nettleser.
TypeScript-funksjoner håndheves bare på kompileringstidspunktet.
Du vil sette opp maskinen din i henhold til din spesifikke plattform og behov. Windows og Visual Studio-brukere kan enkelt laste ned Visual Studio Plugin. Hvis du er på Windows og ikke har Visual Studio, kan du prøve Visual Studio Express for Web. TypeScript-opplevelsen i Visual Studio er for tiden overlegen til andre kodeditorer.
Hvis du er på en annen plattform (eller ikke vil bruke Visual Studio), er alt du trenger, en tekstredigerer, en nettleser og TypeScript npm-pakken for å bruke TypeScript. Følg disse installasjonsinstruksjonene:
$ krølle http://npmjs.org/install.sh | sh $ npm - versjon 1.1.70
$ npm installer -g typeskript $ npm se typeskriptversjon npm http GET https://registry.npmjs.org/typescript npm http 304 https://registry.npmjs.org/typescript 0.8.1-1
Det er det; vi er klare til å lage en enkel "Hei Verden"søknad i TypeScript!
TypeScript er en superset av Ecmascript 5 (ES5) og inneholder funksjoner som er foreslått for ES6. På grunn av dette er et hvilket som helst JavaScript-program allerede et TypeScript-program. TypeScript-kompilatoren utfører lokale filtransformasjoner på TypeScript-programmer. Derfor samsvarer den endelige JavaScript-utgangen nøye med TypeScript-inngangen.
Først vil vi lage en grunnleggende index.html fil og referanse en ekstern skriptfil:
Lære TypeScript
Dette er et enkelt "Hello World" -program; så la oss lage en fil som heter hello.ts. De * ts utvidelse betegner en TypeScript-fil. Legg til følgende kode til hello.ts:
Accentsconagua
varsling ('hallo verden i TypeScript!'); Deretter åpner du kommandolinjegrensesnittet, navigerer til mappen som inneholder hello.ts, og kjør TypeScript-kompilatoren med følgende kommando:
tsc hello.ts
De TSC kommandoen er TypeScript-kompilatoren, og den genererer umiddelbart en ny fil som heter hello.js. Vår TypeScript-applikasjon bruker ikke noen TypeScript-spesifikk syntaks, så vi ser den samme eksakte JavaScript-koden i hello.js som vi skrev inn hello.ts.
Flott! Nå kan vi utforske TypeScript-funksjoner og se hvordan det kan hjelpe oss med å vedlikeholde og forfattere storskala JavaScript-applikasjoner.
Skriv annoteringer er en valgfri funksjon som gjør at vi kan sjekke og uttrykke vår hensikt i programmene vi skriver. La oss lage en enkel område() Fungerer i en ny TypeScript-fil, kalt type.ts
funksjonsområde (form: streng, bredde: tall, høyde: tall) var område = bredde * høyde; returnere "Jeg er en" + form + "med et område med" + område + "cm kvadret."; document.body.innerHTML = område ("rektangel", 30, 15); Deretter endrer du skriptkilden i index.html til type.js og kjør TypeScript-kompilatoren med tsc type.ts. Oppdater siden i nettleseren, og du bør se følgende:
Som vist i den forrige koden, skrives annotasjonene som en del av funksjonsparametrene; de angir hvilke typer verdier du kan overføre til funksjonen. For eksempel, form parameter er betegnet som en strengverdi, og bredde og høyde er numeriske verdier.
Skriv annotasjoner og andre TypeScript-funksjoner, håndheves bare på kompileringstidspunktet. Hvis du overfører noen andre typer verdier til disse parameterne, vil kompilatoren gi deg en kompileringstid feil. Denne oppførselen er ekstremt nyttig når du bygger store applikasjoner. For eksempel, la oss med hensikt sende en strengverdi for bredde parameter:
funksjonsområde (form: streng, bredde: tall, høyde: tall) var område = bredde * høyde; returnere "Jeg er en" + form + "med et område med" + område + "cm kvadret."; document.body.innerHTML = område ("rektangel", "bredde", 15); // feil type bredde Vi vet at dette resulterer i et uønsket resultat, og kompilering av filen varsler oss til problemet med følgende feil:
$ tsc type.ts type.ts (6,26): Leverte parametere samsvarer ikke med noen signatur for samtalemål
Legg merke til at til tross for denne feilen genererte kompilatoren type.js fil. Feilen stopper ikke TypeScript-kompilatoren fra å generere tilsvarende JavaScript, men kompilatoren advarer oss om potensielle problemer. Vi har til hensikt bredde å være et tall; passerer noe annet resulterer i uønsket oppførsel i vår kode. Andre typer merknader inkluderer bool eller noen.
La oss utvide vårt eksempel for å inkludere et grensesnitt som videre beskriver en form som et objekt med valgfritt farge eiendom. Opprett en ny fil som heter interface.ts, og endre skriptkilden i index.html å inkludere interface.js. Skriv inn følgende kode i interface.ts:
grensesnitt form navn: streng; bredde: tall; høyde: tall; farge ?: streng; funksjonsområde (form: form) var område = form.width * form.height; returner "Jeg er" + form.name + "med område" + område + "cm kvadret"; console.log (område (navn: "rektangel", bredde: 30, høyde: 15)); console.log (område (navn: "firkant", bredde: 30, høyde: 30, farge: "blå"));
Grensesnitt er navn gitt til objekttyper. Ikke bare kan vi deklarere et grensesnitt, men vi kan også bruke det som en annotasjon av typen.
kompilering interface.js gir ingen feil. For å fremkalle en feil, la oss legge til en annen linje med kode til interface.js med en form som ikke har navnegenskaper og viser resultatet i nettleserens konsoll. Legg denne linjen til interface.js:
console.log (område (bredde: 30, høyde: 15));
Nå kompilere koden med tsc interface.js. Du får en feil, men ikke bekymre deg for det akkurat nå. Oppdater nettleseren din og se på konsollen. Du ser noe som ligner på følgende skjermdump:
La oss se på feilen. Det er:
interface.ts (26,13): Leverte parametere samsvarer ikke med noen signatur for samtalemål: Kunne ikke søke type 'Shape' til argument 1, som er av typen 'width: number; høyde: tall; '
Vi ser denne feilen fordi objektet passerte til område() stemmer ikke overens med Form grensesnitt; den trenger en navnegenskap for å gjøre det.
Forstå omfanget av dette Søkeordet er utfordrende, og TypeScript gjør det litt lettere ved å støtte pilfunksjonuttrykk, en ny funksjon som diskuteres for ECMAScript 6. Pilfunksjonene beholder verdien av dette, gjør det mye lettere å skrive og bruke tilbakeringingsfunksjoner. Vurder følgende kode:
var form = navn: "rektangel", popup: funksjon () console.log ('Denne inni popup ():' + this.name); setTimeout (funksjon () console.log ('Denne inne setTimeout ():' + this.name); console.log ("Jeg er en" + dette.navnet + "!");, 3000); ; shape.popup (); De this.name på linje sju vil tydeligvis være tom, som vist i nettleserkonsollen:
Vi kan enkelt fikse dette problemet ved å bruke TypeScript-pilen. Bare erstatt funksjon() med () =>.
var form = navn: "rektangel", popup: funksjon () console.log ('Denne inni popup ():' + this.name); setTimeout (() => console.log ('Dette inne setTimeout ():' + this.name); console.log ("Jeg er en" + dette.navnet + "!");, 3000); ; shape.popup (); Og resultatene:
Ta en titt på den genererte JavaScript-filen. Du ser at kompilatoren har injisert en ny variabel, var _this = dette;, og brukte den i setTimeout ()tilbakeringingsfunksjon for å referere til Navn eiendom.
TypeScript støtter klasser, og implementeringen følger nøye med forslaget til ECMAScript 6. La oss lage en annen fil, kalt class.ts, og gå gjennom klassens syntaks:
klasse form område: nummer; farge: streng; konstruktør (navn: streng, bredde: tall, høyde: tall) this.area = width * height; this.color = "rosa"; ; shoutout () return "Jeg er" + this.color + "" + this.name + "med et område på" + this.area + "cm squared."; var square = ny form ("square", 30, 30); console.log (square.shoutout ()); console.log ('Area of Shape:' + square.area); console.log ('Navn på form:' + square.name); console.log ('Color of Shape:' + square.color); console.log ('Bredde av form:' + square.width); console.log ('Høyde av form:' + square.height); Ovennevnte Form klassen har to egenskaper, område og farge, en konstruktør (passende navn konstruktør ()), samt a rop ut() metode. Omfanget av konstruktørens argumenter (Navn, bredde og høyde) er lokale til konstruktøren. Det er derfor du får se feil i nettleseren, samt kompilatoren:
class.ts (12,42): Egenskapen 'navn' finnes ikke på verdien av typen 'Shape' class.ts (20,40): Egenskapen 'navn' finnes ikke på verdien av typen 'Shape'-klassen. ts (22,41): Eiendommen 'bredde' eksisterer ikke på verdien av typen 'Shape' class.ts (23,42): Eiendommen 'høyde' finnes ikke på verdien av typen 'Shape'
Et hvilket som helst JavaScript-program er allerede et TypeScript-program.
Neste, la oss utforske offentlig og privat tilgjengelighetsmodifikatorer. Offentlige medlemmer kan nås overalt, mens private medlemmer bare er tilgjengelige innenfor klassen av kroppen. Det er selvfølgelig ingen funksjon i JavaScript for å håndheve personvernet, og dermed er privat tilgjengelighet bare håndhevet på kompileringstid og fungerer som en advarsel til utviklerens opprinnelige hensikt å gjøre den privat.
Som en illustrasjon, la oss legge til offentlig tilgjengelighetsmodifikator til konstruktørargumentet, Navn, og a privat tilgjengelighetsmodifikator til medlemmet, farge. Når vi legger til offentlig eller privat Tilgang til et argument fra konstruktøren, at argumentet automatisk blir medlem av klassen med relevant tilgjengelighetsmodifier.
... privat farge: streng; ... konstruktør (offentlig navn: streng, bredde: tall, høyde: tall)
class.ts (24,41): Egenskapen 'farge' finnes ikke på verdien av typen 'Shape'
Til slutt kan du utvide en eksisterende klasse og opprette en avledet klasse fra det med strekker søkeord. La oss legge til følgende kode i den eksisterende filen, class.ts, og kompilere det:
klasse Shape3D strekker Shape volum: tall; konstruktør (offentlig navn: streng, bredde: tall, høyde: tall, lengde: tall) super (navn, bredde, høyde); this.volume = lengde * this.area; ; shoutout () return "Jeg er" + this.name + "med et volum av" + this.volume + "cm kube."; superShout () return super.shoutout (); var cube = ny Shape3D ("kube", 30, 30, 30); console.log (cube.shoutout ()); console.log (cube.superShout ()); Noen ting skjer med det avledede Shape3D klasse:
Form klasse, arver den område og farge eiendommer.super Metoden kaller konstruktøren til baseklassen, Form, passerer Navn, bredde, og høyde verdier. Arv gir oss mulighet til å gjenbruke koden fra Form, slik at vi lett kan beregne this.volume med arvet område eiendom.rop ut() overstyrer grunnklassens implementering, og en ny metode superShout () Ringer direkte til baseklassen rop ut() metode ved å bruke super søkeord.Med bare noen få flere kodelinjer kan vi enkelt utvide en grunnklasse for å legge til mer spesifikk funksjonalitet og gjøre vår intensjon kjent gjennom TypeScript.
Til tross for TypeScripts ekstremt unge alder, kan du finne mange gode ressurser på språket rundt på nettet (inkludert et fullt kurs som kommer til Tuts + Premium!). Husk å sjekke disse ut:
TypeScript støtter klasser, og implementeringen følger nøye med forslaget til ECMAScript 6.
Å prøve TypeScript er enkelt. Hvis du nyter en mer statisk tastet tilnærming til store applikasjoner, vil TypeScript-funksjonene håndheve et kjent, disiplinert miljø. Selv om det har blitt sammenlignet med CoffeeScript eller Dart, er TypeScript forskjellig fordi det ikke erstatter JavaScript; det legger til funksjoner for JavaScript.
Vi har ennå ikke sett hvordan TypeScript vil utvikle seg, men Microsoft har oppgitt at de vil beholde sine mange funksjoner (skriv annoteringer til side) justert med ECMAScript 6. Så, hvis du vil prøve ut mange av de nye ES6-funksjonene, er TypeScript en utmerket måte å gjøre det på! Fortsett - prøv det!
