A TypeScript használatának kezdete

A TypeScript azon nyelvek egyike, amelyek a JavaScript futás mint végrehajtási környezet: A TypeScript kódot tartalmazó .ts fájlokat normál JavaScript-be fordítják, amelyet aztán a böngésző futtathat.

Jeremy Ashkenas ezt a koncepciót először népszerűvé tette a CoffeeScript nyelvével, de sajnos a viszonylag szűkös szintaxist nehéz volt megtanulni a C # vagy a Visual Basic ismerő fejlesztők számára.

Amint a Microsoft kiterjedt a Web 2.0 technológiákra, Jeremy Ashkenas inspirációját választotta. A Visual Studio képességeinek köszönhetően a fejlesztők egyszerűen feltörhetnek, miközben profitálnak a különféle nyelvi kiterjesztésekből.

A TypeScript nem korlátozódik a statikus gépelésre: számos különféle fejlett funkcióval is rendelkezik, amelyek lehetővé teszik az objektum-orientált programozási paradigmák szimulálását az interneten. Ez a rövid útmutató bemutatja néhány legfontosabb jellemzőjét. Ha a nyelv vonzza Önt, akkor további információk menet közben is megtanulhatók.

01. Telepítse a Visual Studio alkalmazást

A Visual Studio 2017 új telepítővel érkezik; a telepítés megkönnyítése érdekében a szükséges funkciók hasznos terhekre vannak felosztva

A Visual Studio 2017 új telepítővel érkezik; a telepítés megkönnyítése érdekében a szükséges funkciók hasznos terhekre vannak felosztva

Annak ellenére, hogy a TypeScript Linuxon vagy macOS-on is használható, ragaszkodunk a Microsoft hivatalos IDE-jéhez. Töltse le a Visual Studio 2017 ingyenes közösségi kiadását Microsoft, itt , és feltétlenül jelölje meg az ASP.NET hasznos terhelést a telepítés során.

02. Adja hozzá az SDK-t

A TypeScript gyors kiadási kadenciája miatt a Visual Studio-t ki kell bővíteni egy SDK-modullal, amelyről letölthető a Microsoft webhelyét itt . Egyszerűen futtassa a telepítőt, mintha egy szabványos Windows alkalmazás lenne.

03. Töltse le a TypeScript-et, valódi

Nem a Microsoft lenne, ha nem lenne különösebb szóváltás: míg az SDK frissíti a Visual Studio telepítését, a tényleges TSC fordító nem kerül a parancssorba. Ezt a problémát a Node.js npm csomagkezelőjének használatával lehet a legjobban megoldani a parancssorban.

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

`- gépírá[email protected]

04. Kitörni a projektből

A Visual Studio elvárja, hogy egy megoldásközpontú folyamatban dolgozzon: bár érdekes, ez azonban kevesebb, mint ideális az igényeinkhez. Ehelyett hozzon létre egy worker.ts nevű fájlt, és helyezze a fájlrendszer kényelmes helyére. Nyissa meg úgy, hogy áthúzza a Visual Studio-ba, és vidd az eszköztár tetejére. Ezután módosítsa annak tartalmát a következő kóddal:

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

05. Hozzon létre egy belépési pontot

Amint a bevezetőben említettük, a .ts fájl önmagában nem sokat képes megtenni. Ezért folytassa az index.html nevű fájl létrehozásával, amelynek ugyanabban a mappában kell lennie. Ezután adja hozzá az ehhez a lépéshez tartozó csontvázkódot. Betölti a fordító kimenetét, és úgy futtatja, mintha bármilyen más JavaScript-bit lenne.

06. Összeállítás és futtatás

A következő lépés a .ts fájl kézi újrafordítását jelenti. Nyissa meg a PowerShellt, és írja be a tsc parancsot, majd a bemeneti fájl nevét. Alapértelmezés szerint a kimeneti fájl megosztja az alap fájlnevet, de .ts kiterjesztésű lesz .js helyett. Végül nyissa meg az index.html fájlt a választott böngészőben, hogy igazolja az üzenetmező megjelenését.

PS C:Users amhaDownloads> tsc .worker.ts

07. Gépelj be

Ezzel a referenciatáblával megtalálja az alapvető statikus típusokat

Ezzel a referenciatáblával megtalálja az alapvető statikus típusokat

Eddig a TypeScript alig tett többet, mint egy összetettebb JavaScript-környezet. A következő lépés a statikus tipizálás támogatásának aktiválását jelenti: lehetővé teszi a fordító számára, hogy statikus elemzést végezzen a paraméterekről, az érvénytelen értékek elkerülése mellett. Ehhez típuscsoportra van szükség - az alaptípusokat a fenti táblázat tartalmazza, míg az osztályokat később tárgyaljuk.

08. Próbáld ki

A normál JavaScript-ben ez a hiba csak akkor található meg, amikor a kérdéses sort meghívják

A normál JavaScript-ben ez a hiba csak akkor található meg, amikor a kérdéses sort meghívják

A TypeScript változó típus hozzárendelése a változó neve után elhelyezett ’a:’ segítségével történik. Módosítsuk az Oi függvényünket úgy, hogy számot vegyen fel, és ehelyett adjunk át egy karakterláncot. Végül hívja meg még egyszer a TSC fordítót, hogy megkedveltesse a fenti képernyőképen látható hibaüzenetet - a Visual Studio egyébként szintén kiemeli a kérdéses sort.

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

09. Kerülje a prototípust

A JavaScript prototípus-készítéssel valósítja meg az objektumorientációt: olyan kódstílus, amely nem gyakori a .NET és a C / C ++ világban. A TypeScript megoldja ezt a problémát azáltal, hogy engedélyezi az osztályok létrehozását - ez a folyamat az ezt a lépést kísérő részletben látható.

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

10. Becsülje meg a nyilvánosságot

A nyilvános attribútum beállításával létrehozott értékek automatikusan kitöltődnek

A nyilvános attribútum beállításával létrehozott értékek automatikusan kitöltődnek

Normális esetben a public attribútumot használják annak kijelentésére, hogy a program egyik elemének kívülről hozzáférhetőnek kell lennie. Konstruktor paraméterként használva ehelyett utasítja a TypeScript fordítót, hogy hozzon létre azonos nevű helyi mezőket.

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

11. Módszer és példány

Bővítsük a példakategóriánkat egy olyan módszerrel, amely hozzáfér a myResult és myA tárolt értékekhez, és kimeneti őket a képernyőn. Végül az új paraméterrel létrehozzák az osztály egy példányát - a metódus meghívására szolgál.

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

12. Használja mágikus tulajdonságait

A TypeScript nyelvtervének célja, hogy a lehető legtöbb erőfeszítést megtakarítsa a fejlesztőktől. Az egyik jó tulajdonság a bemutatott parancsikon segítségével létrehozott paraméterek automatikus populációja.

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. Végezze el az öröklést

Kis példaprogramunk bizonyítja, hogy a TypeScript kielégíti az objektumöröklés alaptételeit

Kis példaprogramunk bizonyítja, hogy a TypeScript kielégíti az objektumöröklés alaptételeit

Az objektum-orientált programozás egyik alaptétele magában foglalja az osztályok egymásra építését. A levezetett osztályok ekkor felülírhatják alaposztályuk tartalmát, ami rugalmasan állítható osztályhierarchiákhoz vezet.

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

14. Elemezze a felülírást

A fenti kódrészlet kibővítette az Imagine osztályt egy Future nevű alelemmel. A Future abban különbözik az Imagine-től, hogy a saySomething módszer, fejlettebbként, üzenetet küld a böngésző parancssorába.

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

15. Elemezze a felülírást, a reduxot

Ezzel a tényleges kód tesztelhető. Futtatásakor a böngésző konzol a Future két meghívását tartalmazza - a speciális osztály még akkor is megőrzi tulajdonságait, ha Imagine objektumként hívják meg őket.

16. Korlátozott hozzáférés

A tagváltozók nyilvános módosítóval való felfedése nem népszerű: végül is elveszi a legtöbb ellenőrzést arról, hogy a felhasználók mit csinálnak a változó tartalmával. A TypeScript hozzáférők lehetővé teszik, hogy a hagyományos OOP-hoz hasonló módon keresse meg ezt a problémát. Ne feledje, hogy a csak olvasható tagok is támogatottak, de ennek a szolgáltatásnak az aktiválásához szükség van az ECMAScript5 támogatás aktiválására.

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. Legyen elvont

Az összetett öröklési hierarchiák létrehozásának képessége arra ösztönzi a fejlesztőket, hogy szerencsét próbáljanak absztrakt osztályokban. A TypeScript is foglalkozik ezzel a kérdéssel - az ezt a lépést kísérő példa egy osztályt hoz létre absztrakt és valós taggal. Az absztrakt osztály példányosításának kísérlete közvetlenül fordítói hibához vezet.

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. Készítsen interfészt

Ahogy az objektumstruktúrák bonyolultabbá válnak, a fejlesztők gyakran szembesülnek olyan helyzetekkel, amikor az egyik osztály több logikai bitet valósít meg. Ebben az esetben egy felület szép megoldást kínál - a példa megmutatja, mire számíthatunk.

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

19. Végezze el

Mint a fenti osztály esetében, az interfész sem tesz jót nekünk, ha nem tudjuk használni. Szerencsére a megvalósítása nem különösebben bonyolult: vegye figyelembe, hogy az interfész szerzői ezen felül létrehozásuk egyes részeit választhatónak nyilváníthatják.

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

20. Használjon általános osztályt

A TypeScript fordító szigorúan változó érvényességi ellenőrzést hajt végre. Ha egy tárolási osztályon dolgozik, az általános gyógyszerek lehetővé teszik, hogy a végfelhasználó meghatározhassa a kezelendő típust. Ezenkívül a TypeScript más általános elemeket is engedélyez, például függvényeket, amint az a dokumentációból vett (tautológiai) részletben is látható.

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

21. A felsorolás kérdése

Az államgépek és hasonló elemek nagy hasznot húznak abból, ha módjuk van korlátozni a változót néhány jól körülhatárolható állapot tárolására. Ez az Enum adattípus használatával érhető el:

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

22. Tudjon meg többet

Szinte lehetetlen lefedni egy olyan bonyolult nyelvet, mint a TypeScript, egyetlen cikkben. Nézd a A TypeScript webhely példái hogy többet megtudjon a nyelvkötésekről.

Ez a cikk eredetileg a 266. számban jelent meg Web designer , a kreatív webdesign magazin - szakértői oktatóanyagokat, élvonalbeli trendeket és ingyenes forrásokat kínál. Vásárolja meg a 266. számot itt vagy itt iratkozzon fel a Web Designerre .

Különleges karácsonyi ajánlat: Takarítson meg akár 49% -ot a Web Designer előfizetésén neked vagy egy barátodnak karácsonyra. Korlátozott ajánlat, ezért haladjon gyorsan ...

Kapcsolódó cikkek: