Õppige TypeScripti 5 minutiga - õpetus algajatele

TypeScript on JavaScripti tipitud superkomplekt, mille eesmärk on muuta keel skaleeritavamaks ja usaldusväärsemaks.

See on avatud lähtekoodiga ja Microsofti hooldatud alates selle loomisest 2012. aastal. Kuid TypeScript sai oma esialgse läbimurde Angular 2 peamise programmeerimiskeelena. Sellest ajast alates on see jätkuvalt kasvanud ka React ja Vue kogukondades.

Selles õpetuses saate praktiliste näidete abil õppida TypeScripti põhitõdesid.

Samuti kavatseme käivitada Scrimba tasuta 22-osalise TypeScripti kursuse. Jäta oma e-post siia, kui soovite varajast juurdepääsu!

Alustame.

TypeScripti installimine

Enne kodeerimise alustamist peame oma arvutisse installima TypeScripti. Me kasutame npmseda, nii et lihtsalt avage terminal ja tippige järgmine käsk:

npm install -g typescript 

Kui see on installitud, saame seda kontrollida käsu abil, tsc -vmis kuvab installitud TypeScripti versiooni.

Mingi koodi kirjutamine

Loome oma esimese TypeScripti faili ja kirjutame selle sisse mõne koodi. Avage oma lemmik IDE või tekstiredaktor ja looge fail nimega first.ts - TypeScripti failide jaoks kasutame laiendust.ts

Praegu kirjutame lihtsalt paar rida tavalist vana JavaScripti, kuna ka kogu JavaScripti kood on kehtiv TypeScripti kood:

let a = 5; let b = 5; let c = a + b; console.log(c); 

Järgmine samm on meie TypeScripti kompileerimine tavaliseks JavaScripti, kuna brauserid soovivad .jsfailide lugemist.

TypeScripti kompileerimine

Koostamiseks käivitame käsu tsc filename.ts, mis loob sama failinimega, kuid erineva laiendusega JavaScripti faili, mille saame lõpuks oma brauseritele edasi anda.

Niisiis avage terminal faili asukohas ja käivitage järgmine käsk:

tsc first.ts 

Nõuanne . Kui soovite kompenseerida kõik TypeScripti failid mis tahes kaustas, kasutage käsku:tsc *.ts

Andmetüübid

TypeScript - nagu nimigi ütleb - on JavaScripti sisestatud versioon. See tähendab, et saame deklareerimise ajal täpsustada tüüpe erinevatele muutujatele. Neil on selles mahus alati sama tüüpi andmed.

Trükkimine on usaldusväärsuse ja mastaapsuse tagamiseks väga kasulik funktsioon. Tüübikontroll aitab tagada meie koodi ootuspärase toimimise. Samuti aitab see vigade ja vigade otsimisel ning meie koodi nõuetekohasel dokumenteerimisel.

Mistahes muutujale tüübi omistamise süntaks on kirjutada muutuja nimi, millele järgneb :märk, seejärel tüübi nimi, millele järgneb =märk ja muutuja väärtus.

TypeScriptis on kolme erinevat tüüpi: anytüüp, Built-intüübid ja User-definedtüübid. Vaatame neid kõiki.

mis tahes tüüpi

anyAndmete tüüp on superset kõik andmetüübid masinakirjas. Mis tahes muutujale tüübi andmine anyvõrdub muutuja tüübikontrollist loobumisega.

let myVariable: any = 'This is a string' 

Sisseehitatud tüübid

Need tüübid on ehitatud TypeScripti. Nende hulka kuuluvad number, string, boolean, void, nullja undefined.

let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; 

Kasutaja määratletud tüübid

User-definedTüübid enum, class, interface, array, ja tuple. Mõnda neist arutame hiljem selles artiklis.

Objektorienteeritud programmeerimine

TypeScript toetab kõiki objektorienteeritud programmeerimise funktsioone, nagu klassid ja liidesed. See võimalus on JavaScripti tohutu hoog - see on alati olnud hädas oma OOP-funktsionaalsusega, eriti kuna arendajad hakkasid seda kasutama suuremahuliste rakenduste jaoks.

Klass

Objektorienteeritud programmeerimisel on klass objektide mall. Klass määratleb, kuidas objekt selle objekti omaduste ja funktsionaalsuste järgi välja näeb. Klass kapseldab ka objekti andmed.

TypeScriptil on sisseehitatud tugi klassidele, mida ES5 ja varasemad versioonid ei toetanud. See tähendab, et saame classmärksõna kasutada selle hõlpsaks deklareerimiseks.

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}`); } } 

Ülaltoodud näites oleme deklareerinud Carklassi koos mõne selle omadusega, mille initsialiseerime constructor. Meil on ka meetod, mis kuvaks mõne atribuudi abil sõnumi.

Vaatame, kuidas saame selle klassi uue eksemplari luua:

const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius 

Klassi objekti loomiseks kasutame märksõna newja kutsume klassi konstruktori ning edastame sellele omadused. Nüüd on see objekt Priuson oma omaduste model, doorsja isElectric. Objekt võib kutsuda ka meetodit displayMake, millel oleks juurdepääs atribuutidele Prius.

Liides

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

Nii et ma loodan, et see andis teile kiire ülevaate, kuidas TypeScript võib muuta teie JavaScripti stabiilsemaks ja vähem vigadele altid.

TypeScript saab veebiarenduse maailmas palju hoogu. Samuti on üha rohkem Reacti arendajaid, kes selle kasutusele võtavad. TypeScript on kindlasti midagi, mida iga 2018. aasta esiotsa arendaja peaks teadma.

Head kodeerimist :)

Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaadimisega.