A TypeScript egy tipizált JavaScript-készlet, amelynek célja a nyelv méretezhetőbbé és megbízhatóbbá tétele.
Nyílt forráskódú, és a Microsoft fenntartotta, amióta 2012-ben létrehozták. Azonban a TypeScript az eredeti áttörést az Angular 2 programozási nyelveként kapta meg. Azóta folyamatosan növekszik, a React és a Vue közösségekben is.
Ebben az oktatóanyagban gyakorlati példák segítségével ismerheti meg a TypeScript alapjait.
Emellett elindítunk egy ingyenes, 22 részből álló TypeScript tanfolyamot a Scrimbán. Hagyja itt e-mailjét, ha korai hozzáférést szeretne!
Kezdjük el.
A TypeScript telepítése
A kódolás megkezdése előtt telepítenünk kell a TypeScript-et a számítógépünkre. Ezt fogjuk használni npm, ezért csak nyissa meg a terminált, és írja be a következő parancsot:
npm install -g typescript A telepítés után ellenőrizhetjük a parancs futtatásával, tsc -vamely megjeleníti a telepített TypeScript verzióját.
Néhány kód írása
Hozzuk létre az első TypeScript fájlt, és írjunk bele néhány kódot. Nyissa meg kedvenc IDE vagy szövegszerkesztőjét, és hozzon létre egy fájlt, amelynek neve: first.ts - A TypeScript fájlokhoz a kiterjesztést használjuk.ts
Egyelőre csak néhány sort írunk a régi régi JavaScript-ről, mivel az összes JavaScript-kód is érvényes TypeScript-kód:
let a = 5; let b = 5; let c = a + b; console.log(c); A következő lépés a TypeScript egyszerű sorsra történő fordítása, mivel a böngészők azt akarják, hogy a .jsfájlok olvashatók legyenek.
A TypeScript fordítása
A fordításhoz futtatjuk a (z) parancsot tsc filename.ts, amely létrehoz egy JavaScript fájlt ugyanazzal a fájlnévvel, de más kiterjesztéssel, és amelyet végül átadhatunk böngészőinknek.
Nyissa meg a terminált a fájl helyén, és futtassa a következő parancsot:
tsc first.ts Tipp : Ha az összes TypeScript fájlt össze akarja fordítani bármelyik mappában, használja a következő parancsot:tsc *.ts
Adattípusok
A TypeScript - amint a neve is mutatja - a JavaScript tipizált változata. Ez azt jelenti, hogy a deklaráláskor megadhatunk típusokat különböző változókhoz. Mindig ugyanazon típusú adatokat fogják tárolni ebben a körben.
A gépelés nagyon hasznos szolgáltatás a megbízhatóság és a méretezhetőség biztosításához. A típusellenőrzés segít abban, hogy kódunk a várt módon működjön. Emellett segít a hibák és hibák felkutatásában és a kód megfelelő dokumentálásában.
A szintaxis, amellyel típust rendelhetünk bármely változóhoz, az az, hogy megírjuk a változó nevét, majd egy :előjelet, majd a típus nevét, majd egy =előjelet és a változó értékét.
A TypeScript-ben három különböző típus létezik: a anytípus, a Built-intípusok és a User-definedtípusok. Vessünk egy pillantást mindegyikre.
Bármilyen fajta
Az anyadattípus a TypeScript összes adattípusának felülhalmaza. Bármely változó megadása, amelynek típusa anymegegyezik a változó típusellenőrzésének kikapcsolásával.
let myVariable: any = 'This is a string' Beépített típusok
Ezek a típusok épülnek a TypeScript-be. Ezek közé tartozik number, string, boolean, void, nullés undefined.
let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; Felhasználó által definiált típusok
A User-definedtípusok közé tartozik enum, class, interface, array, és tuple. Ezek egy részét később a cikkben tárgyaljuk.
Objektumorientált programozás
A TypeScript támogatja az objektum-orientált programozás összes funkcióját, például az osztályokat és az interfészeket. Ez a képesség hatalmas lendületet jelent a JavaScript számára - mindig is küzdött OOP-funkcionalitásával, különösen azért, mert a fejlesztők elkezdték használni nagyszabású alkalmazásokhoz.
Osztály
Az objektumorientált programozásban az osztály az objektumok sablonja. Egy osztály meghatározza, hogy egy objektum hogyan néz ki az objektum jellemzői és funkcionalitása szempontjából. Egy osztály az objektum adatait is összefoglalja.
A TypeScript beépített támogatással rendelkezik az osztályokhoz, amelyeket az ES5 és a korábbi verziók nem támogattak. Ez azt jelenti, hogy a classkulcsszóval egyszerűen deklarálhatjuk.
class Car { // fields model: String; doors: Number; isElectric: Boolean; constructor(model: String, doors: Number, isElectric: Boolean) { this.model = model; this.doors = doors; this.isElectric = isElectric; } displayMake(): void { console.log(`This car is ${this.model}`); } } A fenti példában deklaráltunk egy Carosztályt, néhány tulajdonságával együtt, amelyeket inicializálunk a constructor. Van egy módszerünk is, amely valamilyen üzenetet megjelenít a tulajdonságával.
Nézzük meg, hogyan hozhatunk létre új osztályt az osztályból:
const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius Egy osztály objektumának létrehozásához a kulcsszót használjuk, newés meghívjuk az osztály konstruktorát, és átadjuk neki a tulajdonságokat. Most ez az objektum Priussaját tulajdonságait model, doorsés isElectric. Az objektum meghívhatja a metódust is displayMake, amely hozzáférhet a Prius.
Felület
The concept of interfaces is another powerful feature of TypeScript, which allows you to define the structure of variables. An interface is like a syntactical contract to which an object should conform.
Interfaces are best described through an actual example. So, suppose we have an object of Car:
const Car = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } If we look at the object above and try to extract its signature, it would be:
{ model: String, make: String, display(): void } If we want to reuse this signature, we can declare it in the form of an interface. To create an interface, we use the keyword interface.
interface ICar { model: String, make: String, display(): void } const Car: ICar = { model: 'Prius', make: 'Toyota', display() => { console.log('hi'); } } Here, we’ve declared an interface called ICar , and created an object Car. Car is now binding to the ICar interface, ensuring that the Car object defines all the properties which are in the interface.
Conclusion
So I hope this gave you a quick glimpse into how TypeScript can make your JavaScript more stable and less prone to bugs.
TypeScript is gaining a lot of momentum in the world of web development. There’s also an increasing amount of React developers who are adopting it. TypeScript is definitely something any front-end developer in 2018 should be aware of.
Happy coding :)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
