TypeScript je otkucani superset JavaScripta, čiji je cilj učiniti jezik skalabilnijim i pouzdanijim.
Otvorenog je koda, a održava ga Microsoft otkako su ga stvorili 2012. Međutim, TypeScript je svoj početni proboj dobio kao osnovni programski jezik u Angulu 2. Od tada nastavlja rasti, također u zajednicama React i Vue.
U ovom uputstvu naučit ćete osnove Typecripta uz pomoć praktičnih primjera.
Također ćemo pokrenuti besplatni 22-dijelni TypeScript tečaj na Scrimbi. Ostavite ovdje svoju e-poštu ako želite rani pristup!
Započnimo.
Instaliranje TypeScript-a
Prije nego započnemo s kodiranjem, moramo instalirati TypeScript na svoje računalo. Upotrijebit ćemo npmza to, zato samo otvorite terminal i upišite sljedeću naredbu:
npm install -g typescript Jednom kada je instaliran, možemo ga provjeriti pokretanjem naredbe tsc -vkoja će prikazati verziju instaliranog TypeScript-a.
Pisanje nekog koda
Stvorimo prvu datoteku TypeScript i u nju napišite kod. Otvorite svoj omiljeni IDE ili uređivač teksta i stvorite datoteku s imenom first.ts - Za TypeScript datoteke koristimo ekstenziju.ts
Za sada ćemo samo napisati nekoliko redaka običnog starog JavaScript-a, jer je sav JavaScript kod također važeći TypeScript kôd:
let a = 5; let b = 5; let c = a + b; console.log(c); Sljedeći je korak kompajliranje našeg Typescripta u obični JavaScript, jer preglednici žele .jsdatoteke za čitanje.
Priprema TypeScript-a
Za kompajliranje pokrenut ćemo naredbu of tsc filename.ts, koja stvara JavaScript datoteku s istim nazivom datoteke, ali s drugim nastavkom, i koju na kraju možemo proslijediti našim preglednicima.
Dakle, otvorite terminal na mjestu datoteke i pokrenite sljedeću naredbu:
tsc first.ts Savjet : Ako želite kompilirati sve TypeScript datoteke u bilo kojoj mapi, upotrijebite naredbu:tsc *.ts
Tipovi podataka
TypeScript - kao što mu samo ime govori - tipizirana je verzija JavaScript-a. To znači da možemo odrediti tipove različitim varijablama u vrijeme deklaracije. U tom će opsegu uvijek sadržavati istu vrstu podataka.
Tipkanje je vrlo korisna značajka koja osigurava pouzdanost i skalabilnost. Provjera vrste pomaže da naš kod radi kako se očekuje. Također, pomaže u lovu na greške i pogreške te ispravnom dokumentiranju našeg koda.
Sintaksa za dodjeljivanje tipa bilo kojoj varijabli je da napišete ime varijable iza koje slijedi :znak, a zatim ime tipa nakon kojeg slijede =znak i vrijednost varijable.
Postoje tri različita tipa u TypeScript-u: anyvrsta, Built-intipovi i User-definedtipovi. Pogledajmo svakog od njih.
bilo koji tip
Tip anypodataka je superset svih tipova podataka u TypeScript-u. Davanje bilo koje varijable tipa tipa anyekvivalentno je isključivanju provjere tipa za varijablu.
let myVariable: any = 'This is a string' Ugrađeni tipovi
To su tipovi koji su ugrađeni u TypeScript. Oni su number, string, boolean, void, nulli undefined.
let num: number = 5; let name: string = 'Alex'; let isPresent: boolean = true; Korisnički definirani tipovi
U User-definedvrste uključuju enum, class, interface, array, i tuple. O nekima ćemo razgovarati kasnije u ovom članku.
Objektno orijentirano programiranje
TypeScript podržava sve značajke objektno orijentiranog programiranja, poput klasa i sučelja. Ova je sposobnost veliki poticaj za JavaScript - uvijek se borio sa svojom OOP funkcionalnošću, pogotovo otkad su je programeri počeli koristiti za velike programe.
Razred
U objektno orijentiranom programiranju klasa je predložak objekata. Klasa definira kako bi objekt izgledao u smislu njegovih značajki i funkcionalnosti. Klasa također obuhvaća podatke za objekt.
TypeScript ima ugrađenu podršku za klase koje ES5 i starije verzije nisu podržavali. To znači da classključnu riječ možemo koristiti za jednostavnu deklaraciju.
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}`); } } U gornjem primjeru proglasili smo Carklasu, zajedno s nekim njezinim svojstvima, koje inicijaliziramo u constructor. Također imamo metodu koja bi prikazala neku poruku koristeći svoje svojstvo.
Pogledajmo kako možemo stvoriti novu instancu ove klase:
const Prius = new Car('Prius', 4, true); Prius.displayMake(); // This car is Prius Da bismo stvorili objekt klase, koristimo ključnu riječ newi pozivamo konstruktor klase i prosljeđujemo mu svojstva. Sada ovaj objekt Priusima svoja svojstva model, doorsi isElectric. Objekt također može pozvati metodu displayMakekoja bi imala pristup svojstvima Prius.
Sučelje
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.
