Tärkein / Miten

Kuinka aloittaa TypeScript

TypeScript on yksi kieliä, jotka käyttävät JavaScript ajonaika suoritusympäristönä: .ts-tiedostot, jotka sisältävät TypeScript-koodin, käännetään normaaliksi JavaScriptiksi, jonka selain voi sitten suorittaa.

Joulutarjous: Säästä jopa 49% Web Designer -lehden tilauksesta

Jeremy Ashkenas teki tämän käsitteen ensin suosituksi hänen CoffeeScript-kielensä kanssa, mutta valitettavasti sen suhteellisen suppea syntaksia oli vaikea oppia kehittäjille, jotka tuntevat C # tai Visual Basic.

Kun Microsoft laajeni Web 2.0 -tekniikoihin, se päätti saada inspiraation Jeremy Ashkenasilta. Visual Studion ominaisuuksien ansiosta kehittäjät voivat yksinkertaisesti murtautua pois ja hyötyä erilaisista kielilaajennuksista.

TypeScript ei rajoitu staattiseen kirjoittamiseen: siinä on myös useita lisäominaisuuksia, joiden avulla voit simuloida olio-ohjelmointiparadigmia verkossa. Tämä lyhyt opas opastaa sinut läpi sen tärkeimmät ominaisuudet. Jos kieli vetoaa sinuun, lisätietoja voi oppia lennossa.

01. Asenna Visual Studio

Visual Studio 2017: n mukana tulee uusi asennusohjelma; tarvittavat ominaisuudet on jaettu hyötykuormiin käyttöönoton helpottamiseksi

Vaikka TypeScriptiä voidaan käyttää myös Linuxissa tai macOS: ssa, pidämme kiinni Microsoftin virallisesta IDE: stä. Lataa Visual Studio 2017: n ilmainen yhteisöversio osoitteesta Microsoft, täällä ja muista merkitä ASP.NET-hyötykuorma käyttöönoton aikana.

02. Lisää SDK

TypeScriptin nopean vapautuksen poljinnopeuden vuoksi Visual Studiota on laajennettava SDK-moduulilla, jonka voi ladata Microsoftin täällä . Suorita yksinkertaisesti asennusohjelma ikään kuin se olisi tavallinen Windows-sovellus.

03. Lataa TypeScript oikeasti

Se ei olisi Microsoft, jos siihen ei liity ylimääräistä vaivaa: Vaikka SDK päivittää Visual Studio -asennuksesi, varsinaista TSC-kääntäjää ei lisätä komentoriville. Tämä ongelma voidaan ratkaista parhaiten käyttämällä Node.js: n npm-paketinhallintaa komentorivillä.

PS C: Users tamha Lataukset> npm install -g typcript

C: Users tamha AppData Roaming npm tsc -> C: Users tamha AppData Roaming npm node_modules typcript bin tsc

C: Users tamha AppData Roaming npm tsserver -> C: Users tamha AppData Roaming npm node_modules typcript bin tsserver

C: Users tamha AppData Roaming npm

`- konekirjoitus@2.4.2

04. Irrota projektista

Visual Studio odottaa toimivan ratkaisukeskeisessä prosessissa: vaikka se on mielenkiintoista, se on vähemmän kuin ihanteellinen tarpeisiimme. Luo sen sijaan tiedosto nimeltä worker.ts ja aseta se kätevään paikkaan tiedostojärjestelmässäsi. Avaa se vetämällä se Visual Studioon ja pudota se yläosassa olevan työkalupalkin sisään. Muokkaa seuraavaksi sen sisältöä sisällyttämällä seuraava koodi:

function sayOi() { alert('Oi!'); } sayOi();

05. Luo lähtökohta

Kuten johdannossa mainittiin, .ts-tiedosto ei voi tehdä paljon yksin. Tästä syystä jatka luomalla tiedosto nimeltä index.html, jonka on sijaittava samassa kansiossa. Lisää seuraavaksi tämän vaiheen mukana oleva luurankokoodi. Se lataa kääntäjän lähdön ja suorittaa sen ikään kuin se olisi jokin muu Java-bitti.

06. Koosta ja suorita

Seuraava vaihe sisältää .ts-tiedoston manuaalisen uudelleen kääntämisen. Avaa PowerShell ja kirjoita komento tsc ja sen jälkeen syötetiedoston nimi. Lähtötiedosto jakaa oletusarvoisesti perustiedostonimen, mutta sen tunniste on .js eikä .ts. Avaa lopuksi index.html-tiedosto valitsemassasi selaimessa todistaaksesi viestiruudun ulkonäön.

PS C:Users amhaDownloads> tsc .worker.ts

07. Hanki kirjoitettu

Käytä tätä viitetaulukkoa staattisten perustyyppien löytämiseen

Toistaiseksi TypeScript on tehnyt vain muutakin kuin toiminut monimutkaisempana JavaScript-ympäristöön. Seuraava vaihe on staattisen kirjoittamisen tuen aktivointi: se antaa kääntäjän suorittaa staattisen parametrien analysoinnin pitämällä virheelliset arvot poissa. Tätä varten tarvitaan joukko tyyppejä - perustyypit on lueteltu yllä olevassa taulukossa, kun taas luokista keskustellaan myöhemmin.

08. Kokeile

Normaalissa JavaScript-ohjelmassa tämä virhe löytyy vain, kun kyseiselle riville vedotaan

TypeScript-muuttujatyyppimääritykset tapahtuvat muuttujan nimen perään sijoitetulla a: lla. Muokkaamme Oi-funktiotamme ottamaan numero ja antakaamme sen sijaan merkkijono. Lopuksi, kutsu TSC-kääntäjä vielä kerran juhlimaan silmäsi yllä olevassa kuvakaappauksessa näytetyssä virheilmoituksessa - Visual Studio, muuten, myös korostaa kyseistä viivaa.

function sayOi(whatToSay: number) { alert(whatToSay); } sayOi('Hello');

09. Vältä prototyyppiä

JavaScript toteuttaa objektisuuntauksen prototyyppien avulla: koodityyli, joka on harvinaista .NET- ja C / C ++ -maailmassa. TypeScript ratkaisee tämän ongelman sallimalla luokkien luomisen - prosessi, joka näkyy tämän vaiheen mukana olevassa koodinpätkässä.

class Imagine { public myResult: number; public myA: number; public myB: number; constructor(_a: number, _b: number) { this.myResult = _a + _b; this.myA = _a; } }

10. Arvosta yleisöä

Julkisen määritteen määrittämisellä luodut pitoarvot täytetään automaattisesti

Normaalisti julkista määritettä käytetään ilmoittamaan, että ohjelman elementtiin on päästävä ulkopuolelta. Kun sitä käytetään konstruktoriparametrina, se käskee sen sijaan TypeScript-kääntäjää luomaan paikallisia kenttiä samoilla nimillä.

class Imagine { public myResult: number; //public myA: number; constructor(public myA: number, public _b: number) { this.myResult = myA + _b; this.myA = myA; } }

11. Menetelmä ja esiintymä

Laajennetaan esimerkkiluokkaamme tarjoamalla sille menetelmä, joka käyttää myResult- ja myA-tiedostoihin tallennettuja arvoja ja antaa ne näytölle. Lopuksi uutta parametria käytetään luokan esiintymän luomiseen - sitä käytetään menetelmän kutsumiseen.

class Imagine { public myResult: number; . . . public saySomething(): void { alert(this.myResult); } } let myImagine: Imagine = new Imagine(2, 2); myImagine.saySomething();

12. Käytä sen maagisia piirteitä

TypeScriptin kielisuunnittelun tarkoituksena on säästää kehittäjiä mahdollisimman paljon vaivaa. Yksi hieno ominaisuus on parametrien automaattinen populaatio, joka on luotu näytetyllä pikakuvakkeella.

class Imagine { public myResult: number; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + “ “ + this.myB); } }

13. Suorita perintö

Pieni esimerkkiohjelmamme osoittaa, että TypeScript täyttää objektiperinnön perusedellytykset

Yksi olio-ohjelmoinnin ydinperusteista käsittää luokkien perustamisen päällekkäin. Johdetut luokat voivat sitten ohittaa perusluokan sisällön, mikä johtaa joustavasti säädettäviin luokkahierarkioihin.

class Future extends Imagine { public saySomething(): void { console.log(this.myA); } }

14. Analysoi korvaus

Ylhäältä peräisin oleva koodinpätkä laajensi Imagine-luokkaa tulevalla alielementillä. Tulevaisuus eroaa Imagine-ohjelmasta siinä, että sen kehittyneempi saySomething-menetelmä lähettää viestin selaimen komentoriville.

let myImagine: Imagine = new Future(2, 2); myImagine.saySomething(); let myFuture: Future = new Future(9, 9); myFuture.saySomething();

15. Analysoi päällekirjoitus, redux

Tämän avulla todellinen koodi voidaan testata. Suoritettaessa selainkonsoli sisältää kaksi Future-kutsua - edistynyt luokka säilyttää ominaisuutensa, vaikka sitä kutsutaan Imagine-objektiksi.

16. Rajoitettu pääsy

Jäsenmuuttujien paljastaminen julkisella muokkaimella on epäsuosittua: se loppujen lopuksi vie eniten hallintaa siitä, mitä käyttäjät tekevät muuttujan sisällöllä. TypeScript-käyttöoikeuksien avulla voit kiertää tämän ongelman samalla tavalla kuin perinteinen OOP. Huomaa, että myös vain luku -jäseniä tuetaan, mutta että tämän ominaisuuden käyttö vaatii ECMAScript5-tuen aktivoinnin.

public _myCache: string; get fullCache(): string { return this._myCache; } set fullCache(newX: string) { if (newX == 'hello') { this._myCache = newX; } else { console.log('Wrong data!'); } }

17. Tee siitä abstrakti

Kyky luoda monimutkaisia perintöhierarkioita motivoi kehittäjiä kokeilemaan onneaan abstrakteissa luokissa. TypeScript on katsonut myös tältä osin - tähän vaiheeseen liittyvä esimerkki luo luokan, jossa on abstrakti ja todellinen jäsen. Abstraktin luokan instantisoiminen johtaa suoraan kääntäjävirheeseen.

abstract class Imagine { public myResult: number; abstract sayName(): void; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + ' ' + this.myB); } } class Future extends Imagine { . . . public sayName() { console.log('Hello'); } }

18. Tee käyttöliittymä

Kun objektirakenteet monimutkaistuvat, kehittäjät joutuvat usein kohtaamaan tilanteita, joissa yksi luokka toteuttaa useita logiikkabittejä. Siinä tapauksessa käyttöliittymä tekee mukavan kiertotavan - esimerkki osoittaa, mitä odottaa.

interface DataInterface { field: number; workerMethod(): void; }

19. Toteuta se

Kuten yllä olevan luokan tapauksessa, rajapinta ei tee meille mitään hyötyä, jos emme voi käyttää sitä. Onneksi sen toteuttaminen ei ole erityisen vaikeaa: muista, että käyttöliittymän kirjoittajat voivat lisäksi julistaa osan luomuksestaan valinnaisiksi.

class Worker implements DataInterface { field: number; workerMethod(): void { throw new Error('Method not implemented.'); } }

20. Käytä yleisluokkaa

TypeScript-kääntäjä pakottaa tiukan muuttujan kelvollisuuden tarkistuksen. Kun työskentelet varastoluokan parissa, geneeristen lääkkeiden avulla voit antaa loppukäyttäjän määrittää käsiteltävän tyypin. Lisäksi TypeScript sallii myös muita yleisiä elementtejä, kuten toimintoja, kuten dokumentaatiosta otettu (tautologinen) katkelma osoittaa.

//Generic function function identity(arg: number): number { return arg; } //Generic class class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; }

21. Kysymys luettelosta

Tilakoneet ja vastaavat elementit hyötyvät suuresti siitä, että niillä on tapa rajoittaa muuttuja muutaman hyvin määritellyn tilan tallentamiseen. Tämä voidaan toteuttaa käyttämällä Enum-tietotyyppiä:

enum ParserState { Idle = 1, Read0, Read1 } class Imagine { public myState: ParserState; constructor(public myA: number, public myB: number) { this.myState = ParserState.Idle;

22. Lisätietoja

Niin monimutkaisen kielen kuin TypeScript kattaminen yhdessä artikkelissa on melkein mahdotonta. Katso TypeScript-sivuston esimerkit saadaksesi lisätietoja kielisitomisista.

Tämä artikkeli julkaistiin alun perin numerossa 266 Nettisivujen suunnittelija , luova verkkosivujen lehti - tarjoaa asiantuntijaopastuksia, huipputrendejä ja ilmaisia resursseja. Osta numero 266 täältä tai tilaa Web Designer täältä .

Erikoistarjous: Säästä jopa 49% Web Designerin tilauksesta sinulle tai ystävällesi jouluna. Tarjous on rajoitettu, joten siirry nopeasti ...

Aiheeseen liittyvät artikkelit: