Kuidas alustada TypeScripti kasutamist

TypeScript on üks keeltest, mis kasutavad seda JavaScripti käitusaeg kui täitmiskeskkond: TypeScripti koodi sisaldavad .ts-failid kompileeritakse tavalisse JavaScripti, mida saab seejärel brauser käivitada.

Jeremy Ashkenas tegi selle kontseptsiooni esmakordselt populaarseks oma CoffeeScripti keelega, kuid kahjuks oli selle suhteliselt napisõnalist süntaksit C # või Visual Basicuga kursis olevate arendajate jaoks keeruline õppida.

Kui Microsoft laienes veebi 2.0 tehnoloogiatele, otsustas ta inspiratsiooni saada Jeremy Ashkenaselt. Visual Studio võimaluste tõttu saavad arendajad erinevatest keelelaienditest kasu lõigates lihtsalt häkkida.

TypeScript ei piirdu staatilise sisestamisega: see sisaldab ka mitmesuguseid täiustatud funktsioone, mis võimaldavad veebis simuleerida objektipõhiseid programmeerimisparadigmasid. See lühike juhend tutvustab mõningaid selle põhifunktsioone. Kui keel teile meeldib, saab lisateavet lennult õppida.

01. Installige Visual Studio

Visual Studio 2017 on varustatud uue installeriga; juurutamise hõlbustamiseks jagatakse vajalikud funktsioonid kasulikeks koormusteks

Visual Studio 2017 on varustatud uue installeriga; juurutamise hõlbustamiseks jagatakse vajalikud funktsioonid kasulikeks koormusteks

Kuigi TypeScripti saab kasutada ka Linuxis või MacOS-is, peame Microsofti ametlikku IDE-d. Laadige alla Visual Studio 2017 tasuta kogukondlik väljaanne Microsoft, siin ja märkige juurutamise ajal kindlasti ASP.NET-i koormus.

02. Lisage SDK

TypeScripti kiire vabastamise kiiruse tõttu tuleb Visual Studiot laiendada SDK-mooduliga, mille saab alla laadida Microsofti saidil siin . Käivitage installer lihtsalt nii, nagu oleks see tavaline Windowsi rakendus.

03. Laadige TypeScript alla päriselt

See poleks Microsoft, kui sellega ei kaasneks lisavõimalusi: SDK värskendab teie Visual Studio installimist, kuid tegelikku TSC kompilaatorit teie käsureale ei lisata. Selle probleemi saab kõige paremini lahendada käsureal Node.js pakettihalduri npm abil.

PS C: Users tamha Allalaadimised> 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

`- [email protected]

04. Projektist välja murda

Visual Studio loodab töötada lahenduskeskses protsessis: kuigi see on huvitav, on see meie vajaduste jaoks vähem kui ideaalne. Selle asemel looge fail nimega worker.ts ja asetage see oma failisüsteemi mugavasse kohta. Avage see, lohistades selle Visual Studiosse, ja kukutage see tööriistariba sisse. Järgmisena muutke selle sisu järgmise koodi lisamiseks:

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

05. Loo sisenemispunkt

Nagu sissejuhatuses mainitud, ei saa .ts-fail ise palju ära teha. Seetõttu jätkake faili nimega index.html loomist, mis peab asuma samas kaustas. Järgmisena lisage selle etapiga kaasas olev skeleti kood. See laadib kompilaatori väljundi ja käitab seda nagu muud JavaScripti.

06. Koosta ja jookse

Järgmine samm hõlmab .ts-faili käsitsi uuesti kompileerimist. Avage PowerShell ja sisestage käsk tsc, millele järgneb sisendfaili nimi. Vaikimisi jagab väljundfail põhifailinime, kuid selle laiend on .js asemel .js. Lõpuks avage sõnumikasti välimuse tõestamiseks fail index.html valitud brauseris.

PS C:Users amhaDownloads> tsc .worker.ts

07. Sisestage tüüp

Staatiliste põhitüüpide leidmiseks kasutage seda viitetabelit

Staatiliste põhitüüpide leidmiseks kasutage seda viitetabelit

Siiani on TypeScript teinud midagi enamat kui tegutsenud keerukama JavaScripti keskkonnana. Järgmine samm hõlmab staatilise sisestamise toe aktiveerimist: see võimaldab kompilaatoril parameetrite staatilist analüüsi teha, hoides kehtetuid väärtusi. Selleks on vaja tüübikomplekti - põhitüübid on loetletud ülaltoodud tabelis, samal ajal kui klassidest räägitakse hiljem.

08. Proovige järele

Tavalises JavaScripti puhul leitakse see viga ainult siis, kui kõnealusele reale viidatakse

Tavalises JavaScripti puhul leitakse see viga ainult siis, kui kõnealusele reale viidatakse

TypeScripti muutuja tüübi määramine toimub muutuja nime järele asetatud ‘a:’ kaudu. Muutkem oma Oi funktsiooni numbri võtmiseks ja laseme selle asemel sisestada stringi. Lõpuks pöörduge uuesti TSC kompilaatori poole, et nautida ülaltoodud ekraanipildil näidatud veateadet - Visual Studio, muide, tõstab ka kõnealuse rea esile.

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

09. Vältige prototüüpi

JavaScript rakendab objekti orientatsiooni prototüüpide abil: koodistiil, mis on .NET ja C / C ++ maailmas haruldane. TypeScript lahendab selle probleemi klasside loomise lubamisega - protsess, mis on näidatud selle sammuga kaasnevas jupis.

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

10. Hinda avalikkust

Avaliku atribuudi määramisel loodud hoideväärtused täidetakse automaatselt

Avaliku atribuudi määramisel loodud hoideväärtused täidetakse automaatselt

Tavaliselt kasutatakse avalikku atribuuti deklareerimiseks, et programmi element peab olema väljastpoolt juurdepääsetav. Kui seda kasutatakse konstruktori parameetrina, käsib see TypeScripti kompilaatoril luua samade nimedega kohalikud väljad.

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

11. Meetod ja eksemplar

Laiendagem oma näiteklassi, pakkudes talle meetodit, mis pääseb juurde myResult ja myA salvestatud väärtustele ning väljastab need ekraanile. Lõpuks kasutatakse uut parameetrit klassi eksemplari loomiseks - seda kasutatakse meetodi käivitamiseks.

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

12. Kasutage selle maagilisi omadusi

TypeScripti keelekujundus on mõeldud arendajate säästmiseks nii palju kui võimalik. Üks tore omadus on näidatud otsetee abil loodud parameetrite automaatne populatsioon.

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. Tehke pärimine

Meie väike näidisprogramm tõestab, et TypeScript rahuldab objekti pärimise põhitõdesid

Meie väike näidisprogramm tõestab, et TypeScript rahuldab objekti pärimise põhitõdesid

Objektorienteeritud programmeerimise üks põhilisi põhimõtteid hõlmab klasside üksteise peale rajamist. Tuletatud klassid võivad seejärel oma baasklassi sisu tühistada, mis viib paindlikult reguleeritavate klasside hierarhiateni.

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

14. Analüüsige ülekirjutamist

Ülaltoodud koodilõik laiendas klassi Imagine alamelemendiga nimega Future. Tulevik erineb Imagine'ist selle poolest, et selle saySomethingi meetod, olles arenenum, väljastab brauseri käsureale teate.

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

15. Analüüsige ülekirjutamist, reduxi

Sellega saab tegelikku koodi testida. Käivitamisel sisaldab brauserikonsool kaht Future'i invokatsiooni - arenenud klass säilitab oma omadused ka siis, kui seda kutsutakse objektina Imagine.

16. Piiratud juurdepääs

Liikmemuutujate avalikuks muutmine on ebapopulaarne: see võtab ju kõige rohkem kontrolli selle kohta, mida kasutajad muutuja sisuga teevad. TypeScripti juurdepääsupunktid võimaldavad teil selle probleemi lahendada sarnaselt tavapärasele OOP-le. Pange tähele, et toetatakse ka kirjutuskaitsega liikmeid, kuid selle funktsiooni kasutamine nõuab ECMAScript5 toe aktiveerimist.

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. Muutke see abstraktseks

Võime luua keerukaid pärimishierarhiaid motiveerib arendajaid proovima oma õnne abstraktsetes klassides. Teil on TypeScript ka selles osas kajastatud - selle sammuga kaasnev näide loob klassi, kus on abstraktne ja tegelik liige. Abstraktse klassi eksponeerimine viib otseselt kompilaatori vea juurde.

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. Tehke liides

Objektistruktuuride keerukamaks muutudes satuvad arendajad sageli olukorda, kus üks klass rakendab mitu loogikabitti. Sel juhul saab liides kena lahenduse - näide näitab, mida oodata.

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

19. Rakenda see

Nagu ülaltoodud klassi puhul, ei tee liides meile head, kui me ei saa seda kasutada. Õnneks pole selle rakendamine eriti keeruline: pidage meeles, et liidese autorid võivad lisaks kuulutada oma loomise osa valikuliseks.

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

20. Kasutage üldist klassi

TypeScripti kompilaator kehtestab muutujate range kehtivuse kontrolli. Salvestusklassis töötades võimaldavad geneerilised ravimid lasta lõppkasutajal määratleda käsitletava tüübi. Lisaks lubab TypeScript ka muid üldelemente, näiteks funktsioone, nagu on näidatud dokumentatsioonist võetud (tautoloogilises) jupis.

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

21. Loendamise küsimus

Olekumasinatele ja sarnastele elementidele on suur kasu sellest, kui neil on võimalus piirata muutujat mõne täpselt määratletud oleku salvestamisega. Seda saab teha andmetüübi Enum abil:

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

22. Lisateave

Nii keeruka keele kui TypeScript ühe artikli katmine on peaaegu võimatu. Vaata TypeScripti saidi näited keeleköite kohta lisateabe saamiseks.

See artikkel avaldati algselt väljaandes 266 Veebi disainer , loov veebidisaini ajakiri - pakkudes asjatundlikke õpetusi, tipptasemel trende ja tasuta ressursse. Osta väljaanne 266 siit või tellige veebidisainer siit .

Eripakkumine jõuludele: Säästke Web Designeri tellimusest kuni 49% teile või sõbrale jõuludeks. See on piiratud pakkumine, nii et liikuge kiiresti ...

Seotud artiklid: