Share
I slutet av 2012 introducerade Microsoft TypeScript, en typad superset för JavaScript som kompilerar till vanlig JavaScript. TypeScript fokuserar på att tillhandahålla användbara verktyg för storskaliga applikationer genom att implementera funktioner, till exempel klasser, skriva anteckningar, arv, moduler och mycket mer! I den här handledningen kommer vi att komma igång med TypeScript, med enkla bitmåttiga kodexempel, kompilera dem i JavaScript och visa de aktuella resultaten i en webbläsare.
TypScript-funktionerna verkställs endast vid kompileringstid.
Du ställer in din maskin enligt din specifika plattform och behov. Windows och Visual Studio-användare kan helt enkelt ladda ner Visual Studio Plugin. Om du är på Windows och inte har Visual Studio, kan du prova Visual Studio Express for Web. TypScript-upplevelsen i Visual Studio är för närvarande överlägsen andra kodredigerare.
Om du är på en annan plattform (eller inte vill använda Visual Studio) behöver du bara en textredigerare, en webbläsare och TypeScript npm-paketet för att använda TypeScript. Följ dessa installationsanvisningar:
$ curl http://npmjs.org/install.sh | sh $ npm - version 1.1.70
$ npm installera -g typskrivning $ npm visa typskriptversion npm http GET https://registry.npmjs.org/typescript npm http 304 https://registry.npmjs.org/typescript 0.8.1-1
Det är allt; vi är redo att göra en enkel "Hej världen"applikation i TypeScript!
TypeScript är en superset av Ecmascript 5 (ES5) och innehåller funktioner som föreslås för ES6. På grund av detta är något JavaScript-program redan ett TypeScript-program. TypScript-kompilatorn utför lokala filtransformationer på TypeScript-program. Därför matchar den slutliga JavaScript-utgången nära typScript-inmatningen.
Först kommer vi att skapa en grundläggande index.html fil och referens en extern scriptfil:
Learning TypeScript
Det här är en enkel "Hello World" -applikation; så, låt oss skapa en fil med namnet hello.ts. De * ts förlängning designerar en TypeScript-fil. Lägg till följande kod till hello.ts:
Accentsconagua
varning ("hej värld i TypeScript!"); Öppna sedan kommandoradsgränssnittet, navigera till mappen som innehåller hello.ts, och kör TypeScript-kompilatorn med följande kommando:
tsc hello.ts
De tsc kommandot är TypeScript-kompilatorn, och det genererar genast en ny fil som heter hello.js. Vår TypeScript-applikation använder inte någon typScript-specifik syntax, så vi ser samma exakta JavaScript-kod i hello.js som vi skrev in hello.ts.
Bra! Nu kan vi utforska TypeScript-funktioner och se hur det kan hjälpa oss att behålla och författa storskaliga JavaScript-applikationer.
Skriv annoteringar är en valfri funktion som gör att vi kan kontrollera och uttrycka vår avsikt i de program vi skriver. Låt oss skapa en enkel område() funktionen i en ny TypeScript-fil, kallad type.ts
funktionsområde (form: sträng, bredd: antal, höjd: antal) var area = bredd * höjd; returnera "Jag är en" + form + "med ett område med" + area + "cm kvadrat."; document.body.innerHTML = area ("rektangel", 30, 15); Ändra sedan skriptkällan i index.html till type.js och kör TypeScript-kompilatorn med tsc typ.ts. Uppdatera sidan i webbläsaren, och du bör se följande:
Som visas i tidigare kod uttrycks typannonserna som en del av funktionsparametrarna; De anger vilka typer av värden du kan överföra till funktionen. Till exempel, form parametern är betecknad som ett strängvärde, och bredd och höjd är numeriska värden.
Skriv annoteringar och andra typScript-funktioner, verkställs endast vid sammanställningstiden. Om du skickar några andra typer av värden till dessa parametrar, ger kompilatorn dig ett kompileringstidsfel. Detta beteende är extremt användbart när du bygger stora applikationer. Till exempel, låt oss medvetet ge ett strängvärde för bredd parameter:
funktionsområde (form: sträng, bredd: antal, höjd: antal) var area = bredd * höjd; returnera "Jag är en" + form + "med ett område med" + area + "cm kvadrat."; document.body.innerHTML = area ("rektangel", "bredd", 15); // fel breddstyp Vi vet att detta resulterar i ett oönskat resultat, och att sammanställa filen varnar oss till problemet med följande fel:
$ tsc type.ts type.ts (6,26): De angivna parametrarna matchar inte någon signatur för samtalsmål
Observera att trots detta fel genererade kompilatorn type.js fil. Felet stoppar inte typScript-kompilatorn från att generera motsvarande JavaScript, men kompilatören varnar oss om potentiella problem. Vi avser bredd att vara ett tal passerar något annat resulterar i oönskat beteende i vår kod. Andra typannonser inkluderar bool eller ens några.
Låt oss utöka vårt exempel för att inkludera ett gränssnitt som ytterligare beskriver en form som ett objekt med en tillval Färg fast egendom. Skapa en ny fil som heter interface.ts, och ändra skriptkällan i index.html att inkludera interface.js. Skriv följande kod i interface.ts:
gränssnitt Shape namn: string; bredd: antal; höjd: antal; färg ?: sträng; funktionsområde (form: form) var area = shape.width * form.height; returnera "Jag är" + form.name + "med område" + område + "cm kvadrat"; console.log (område (namn: "rektangel", bredd: 30, höjd: 15)); console.log (område (namn: "fyrkant", bredd: 30, höjd: 30, färg: "blå"));
Gränssnitt är namn som ges till objekttyper. Inte bara kan vi deklarera ett gränssnitt, men vi kan också använda det som en typannotation.
sammanställa interface.js resulterar i inga fel. För att framkalla ett fel, låt oss lägga till en annan kodlinje till interface.js med en form som inte har någon namnegenskap och visar resultatet i webbläsarens konsol. Lägg till den här raden till interface.js:
console.log (område (bredd: 30, höjd: 15));
Kompilera nu koden med tsc interface.js. Du får ett fel, men oroa dig inte om det just nu. Uppdatera din webbläsare och titta på konsolen. Du ser något som liknar följande skärmdump:
Nu ska vi titta på felet. Det är:
interface.ts (26,13): Medföljande parametrar matchar inte någon signatur för samtalsmål: Kunde inte ange typ 'Form' till argument 1, som är av typen 'bredd: nummer; höjd: antal; '
Vi ser detta fel eftersom objektet passerade till område() överensstämmer inte med Form gränssnitt; det behöver en namn egendom för att göra det.
Förstå omfattningen av detta nyckelordet är utmanande, och TypeScript gör det lite lättare genom att stödja pilfunktionsuttryck, en ny funktion som diskuteras för ECMAScript 6. Pilfunktionerna bevarar värdet av detta, vilket gör det mycket lättare att skriva och använda återuppringningsfunktioner. Tänk på följande kod:
var form = namn: "rektangel", popup: funktion () console.log ('Denna inbyggda popup ():' + this.name); setTimeout (funktion () console.log ('Denna inbyggda setTimeout ():' + this.name); console.log ("Jag är en" + this.name + "!");, 3000); ; shape.popup (); De detta namnet på rad sju kommer tydligt att vara tomma, vilket visas i webbläsarkonsolen:
Vi kan enkelt lösa problemet genom att använda typScript-pilfunktionen. Helt enkelt byta ut fungera() med () =>.
var form = namn: "rektangel", popup: funktion () console.log ('Denna inbyggda popup ():' + this.name); setTimeout (() => console.log ('This inside setTimeout ():' + this.name); console.log ("Jag är en" + this.name + "!");, 3000); ; shape.popup (); Och resultaten:
Ta en titt på den genererade JavaScript-filen. Du ser att kompilatorn injicerade en ny variabel, var _this = this;, och använde den i setTimeout ()s återuppringningsfunktion för att referera till namn fast egendom.
TypeScript stöder klasser, och deras genomförande följer noga ECMAScript 6-förslaget. Låt oss skapa en annan fil, kallad class.ts, och granska klassens syntax:
klassform område: nummer; färg: sträng; konstruktör (namn: sträng, bredd: antal, höjd: antal) this.area = width * height; this.color = "pink"; ; shoutout () returnera "Jag är" + this.color + "" + this.name + "med ett område med" + this.area + "cm squared."; var kvadrat = ny form ("kvadrat", 30, 30); console.log (square.shoutout ()); console.log ('Area of Shape:' + square.area); console.log ("Namn på form:" + kvadrat.namn); console.log ('Color of Shape:' + square.color); console.log ('Bredd av form:' + square.width); console.log ('Höjd av form:' + kvadrat.höjd); Ovanstående Form klassen har två egenskaper, område och Färg, en konstruktör (lämpligt namngiven konstruktör()), såväl som a shoutout () metod. Omfattningen av konstruktörens argument (namn, bredd och höjd) är lokala för konstruktören. Det här är därför du ser fel i webbläsaren, liksom kompilatorn:
class.ts (12,42): Egenskapen 'namn' existerar inte på värdet av typen 'Shape' class.ts (20,40): Egenskapen 'namn' existerar inte på värdet av typen 'Shape'-klass. ts (22,41): Egenskapen 'bredd' existerar inte på värdet av typen 'Shape' class.ts (23,42): Egenskapen 'höjd' existerar inte på värdet av typen 'Shape'
Alla JavaScript-program är redan ett TypeScript-program.
Låt oss nu undersöka offentlig och privat tillgänglighetsmodifierare. Offentliga medlemmar kan nås överallt, medan privata medlemmar endast är tillgängliga inom ramen för klasskroppen. Det finns naturligtvis ingen funktion i JavaScript för att upprätthålla sekretess, varför privat tillgänglighet endast verkställs vid sammanställningstid och fungerar som en varning till utvecklarens ursprungliga avsikt att göra den privat.
Som en illustration, låt oss lägga till offentlig tillgänglighetsmodifierare till konstruktörargumentet, namn, och a privat tillgänglighetsmodifierare till medlemmen, Färg. När vi lägger till offentlig eller privat Tillgång till ett argument från konstruktören blir att argumentet automatiskt blir medlem i klassen med relevant tillgänglighetsmodifierare.
... privat färg: sträng; ... konstruktör (offentligt namn: sträng, bredd: antal, höjd: antal) ...
class.ts (24,41): Egenskapen 'färg' existerar inte på värdet av typen 'Shape'
Slutligen kan du förlänga en befintlig klass och skapa en härledd klass från det med sträcker nyckelord. Låt oss lägga till följande kod i den befintliga filen, class.ts, och kompilera det:
klass Shape3D utökar form volym: nummer; konstruktör (offentligt namn: sträng, bredd: antal, höjd: antal, längd: antal) super (namn, bredd, höjd); this.volume = length * this.area; ; shoutout () returnera "Jag är" + this.name + "med en volym" + this.volume + "cm kub."; superShout () returnera super.shoutout (); var cube = ny Shape3D ("kub", 30, 30, 30); console.log (cube.shoutout ()); console.log (cube.superShout ()); Några saker händer med det härledda Shape3D klass:
Form klass, det ärver det område och Färg egenskaper.super metod kallar konstruktören för basklassen, Form, passerar namn, bredd, och höjd värden. Arv tillåter oss att återanvända koden från Form, så vi kan enkelt beräkna this.volume med det ärftliga område fast egendom.shoutout () överstyrer basklassens genomförande och en ny metod superShout () Ringer direkt till basklassen shoutout () metod genom att använda super nyckelord.Med bara några få rader av kod kan vi enkelt förlänga en basklass för att lägga till mer specifik funktionalitet och göra vår avsikt känd genom TypeScript.
Trots TypeScripts extremt unga ålder kan du hitta många bra resurser på språket runt webben (inklusive en hel kurs som kommer till Tuts + Premium!). Var noga med att kolla in dessa:
TypeScript stöder klasser, och deras genomförande följer noga ECMAScript 6-förslaget.
Att prova TypScript är enkelt. Om du tycker om ett mer statiskt typat tillvägagångssätt för stora applikationer, kommer TypeScript-funktioner att klara en välbekant, disciplinär miljö. Även om det har jämförts med CoffeeScript eller Dart, är TypeScript annorlunda eftersom det inte ersätter JavaScript; det lägger till funktioner för JavaScript.
Vi har ännu inte sett hur TypeScript kommer att utvecklas, men Microsoft har sagt att de kommer att behålla sina många funktioner (skriv annoteringar åt sidan) i linje med ECMAScript 6. Så, om du vill prova många av de nya ES6-funktionerna, är TypeScript ett utmärkt sätt att göra det! Gå vidare - prova!
