2.

Osnove JavaScript i TypeScript programskih jezika

Najprostije rečeno, HTML se koristi za definisanje sadržaja web stranice, CSS za definisanje
izgleda i rasporeda, dok Javascript koristimo za definisanje (programiranje) ponašanja web
stranice. Bitno je istaći da Javascript programski jezik nema nikakvih dodirnih tačaka sa Java
programskim jezikom, i da su to potpuno različiti jezici, konceptualno i u samoj sintaksi i
dizajnu.
Javascript zapravo koristimo za manipulaciju HTML elemenata (tagova). Npr. možemo
postaviti tekst u okviru nekog taga pomoću Javascript-a i to koristeći sledeću metodu:
document.getElementById("home").innerHTML = 'Hello World';
Objašnjenje: document predstavlјa zapravo HTML stranicu na kojoj pozivamo JS kôd,
getElementById nam omogućava da “pozovemo” onaj HTML element (na trenutnoj stranici)
koji za atribut id ima vrednost koja se prenosi kao parametar u funkciji (u ovom slučaju to je
string vrednost “home”), i na kraju innerHTML je svojstvo dobijenog elementa koje nam
omogućava da postavimo npr. tekst u taj element (ili možda neke druge HTML tagove). Na
sličan način je moguće menjati i bilo koje druge stvari u HTML-u pa čak i same atribute tagova.
Umesto innerHTML svojstva možemo postaviti i svojstvo style koje nam omogućava da
menjamo stil (CSS) datog elementa (npr. .style.display = “none” će sakriti zadati element).
Web pretraživači (browser-i) “znaju” da čitaju samo HTML, CSS i JavaScript. Međutim, to ne
znači da programeri moraju direktno koristiti samo ove tehnologije za razvoj svoje web
aplikacije. Najbolјi primer za to je programski jezik TypeScript (u dalјem TS) koji predstavlјa
besplatan programski jezik otvorenog kôda (open-source) razvijan od strane Microsoft-a. TS
omogućava programerima da korišćenjem ovog jezika naprave kôd koji će biti dosta čitlјiviji i
strukturno jednostavniji od kôda koji bi na isti način bio napisan u JavaScript-u (u dalјem JS).
Zapravo, TypeScript kôd se “prevodi” u JS kako bi pretraživači mogli da ga pročitaju. Na ovim
vežbama, uporedo ćemo se baviti sa oba jezika jer imaju dosta sličnosti a dosta toga im je i
potpuno zajedničko i radi (piše) se na isti način.
2.2 Osnovne karakteristike
Javascript/TypeScript za string vrednosti prihvata i jednostruke i dvostruke navodnike. Neki
smatraju da je Javascript objektno orijentisan programski jezik, dok drugi smatraju da to nije.
Možda je najbolјe reći da je on zapravo delimično objektno orijentisan, a objašnjenje se može
naći kada se prisetimo 3 osnovna svojstva objektno orijentisanih programskih jezika:
1. Polimorfizam – omogućava da se operacije jednog tipa mogu primeniti na vrednosti
nekog drugog tipa (ili više tipova)
2. Enkapsulacija – mehanizam koji omogućava zabranu pristupa pojedinim
komponentama objekta
3. Nasleđivanje – dešava se kada se neki objekat (ili klasa) baziraju na nekom drugom
objektu (ili klasi), gde koriste istu implementaciju kao ta parent klasa a mogu sadržati
i neke svoje odvojene implementacije.
Javascript u suštini kao i svi dinamički jezici podržava polimorfizam. Takođe, i enkapsulacija se
može implementirati u ovom jeziku. Međutim, jako je teško, skoro nemoguće implementirati
nasleđivanje u JS-u na pravi način. Pored toga, čak i polimorfisam i enkapsulacija koji se mogu
implementirati, nisu tako jednostavno primenlјivi, i potrebno je dosta znanja u radu sa JS-om
kako bi ove stvari imale smisla. Ne postoje reči public ili private u Javascript-u kao u drugim
objektnim jezicima kao što je npr. Java ili C#, ali je svejedno moguće ograničiti pristup
pojedinim polјima neke klase. Čak i samo kreiranje klase ponekad nema nikakvog smisla u
ovom jeziku, iako je moguće kreirati je. Neka ovo pitanje ostane otvoreno kao što i mnogi
smatraju da jeste 
Ovo je upravo jedan od glavnih razloga zašto je nastao i zašto je kreiran TypeScript koji je
potpuno objektno-orijentisan i koji omogućava kreiranje klasa, objekata, nasleđivanje,
enkapsulaciju i druge karakteristike objektnih jezika kao što su C# ili Java. Druga osnovna
razlika u odnosu na JS se može spoznati u samom nazivu (type-tip). JavaScript ne pruža
mogućnost definisanja tipovnih promenlјivih. U JS-u se neće pronaći klјučne reči int/integer
(celobrojne vrednosti), string (niz karaktera), bool/boolean (true/false) dok se upravo takve
stvari mogu videti u TS-u. Za razliku od JavaScript-a, TypeScript omogućava ograničavanje
promenlјivih na određene tipove podataka, i nemogućnost korišćenja tih promenlјivih u druge
svrhe osim u svrhe za koje je takav tip i planiran što značajno olakšava i ubrzava razvoj naše
aplikacije.
2.3 Gde se “piše” JavaScript/TypeScript?
JS se može pisati u samom HTML kôd-u, često u okviru head taga ali se može pisati i bilo gde
u body tagu. Javascript kôd se u ovom slučaju mora pisati u okviru script taga. Broj script
tagova u jednom HTML dokumentu je neograničen. Takođe, JS kôd (najčešće funkcije) se
mogu pozivati i u event atributima HTML tagova kao što je npr. onclick atribut (na klik nekog
elementa poziva se neka JS funkcija npr.).
Ipak, najbolјi i najefikasniji način jeste pisanje JS kôda u eksternim JS fajlovima koji se zatim
“unose” u HTML koristeći takođe script tag postavlјen u okviru head taga sa vrednošću
atributa src gde se navodi putanja do eksternog fajla. Prednost ovog načina jeste u tome što
se odvajaju HTML i JS kôd (preglednost i održavanje) ali takođe se kešovani JS fajlovi brže
očitavaju.
Za razliku od JS-a, TS se piše samo u eksternim fajlovima i to sa ekstenzijom .ts koji se zatim
kompajliraju u klasične .js fajlove koje pretraživač “zna” da pročita.
2.4 TypeScript/JavaScript konvertor
Na internetu postoji veliki broj konvertora koji vrše “prevođenje” napisanog TypeScript kôda
u JavaScript. Na taj način je moguće proveriti kako će se određeni TS kôd prevesti u kôd koji
je čitlјiv za pretraživač odnosno u JavaScript. Primer ovakvog konvertora može se pronaći na
sledećoj lokaciji: https://www.typescriptlang.org/play/index.html .

Slika 1 - primer konvertora za tipovne promenlјive

Ono što je još dosta bitno znati za TypeScript, jeste da se u TS kôdu može potpuno legitimno
pisati običan JavaScript kôd. To je moguće zbog onoga što je već rečeno, TS se konvertuje u
JS što znači da ono što je kao JS napisano u TS-u će se konvertovati u JS, odnosno ostaće isto

2.5 Kompajliranje u VSC
Kompajliranje TS fajlova u JS pomoću Visual Studio Code alata se može izvršiti vrlo
jednostavno. Prvi korak je instalacija typescript kompajlera globalno i to izvršavanjem sledeće
komande u terminalu: npm install –g typescript. Nakon toga, bilo koji fajl sa .ts ekstenzijom
se može kompajlirati (pretvoriti u .js fajl) pomoću komande: tsc <naziv_fajla>.ts. Pokretanjem
ove komande pojaviće se kompajlirana verzija typescript fajla u obliku javascript-a.
2.6 Tipovi podataka
Kao što je već rečeno, u JavaScript-u ne postoje klasični tipovi podataka kao kod drugih
programskih jezika. Bolјe rečeno, tipovi se ne određuju unapred, već tokom dodele vrednosti.
Ako imamo npr.: var name = "Nemanja"; ..vrlo je lako primetiti da promenlјiva name sadrži
vrednost koja je tipa niza karaktera (string) iako to nigde nije naznačeno. Za razliku od JS-a, TS
omogućava da se unapred definiše kog će tipa podatka biti neka varijabla: var myName:string
= "Nemanja".
Osnovni tip podatka od koga “potiču” svi ostali tipovi jeste any. Posle toga imamo neke
“ugrađene” (built-in) tipove podataka kao što su:
 boolean (logička vrednost, true ili false)
 number (brojevne vrednost, bilo celobrojne bilo sa decimalnim zapisom)
 string (sekvenca Unicode karaktera)
 void (za funkcije koje ne vraćaju vrednost)
 null (“namerno odsustvo” vrednosti objekta)
 undefined (vrednost neinicijalizovanih varijabli)
Pored ovih osnovnih tipova koje TS nudi, imamo mogućnost i da kreiramo sopstvene tipove
kao i u svakom drugom objektno orijentisanom jeziku. To se može uraditi pomoću
enumeracija (enums), klasa (classes), interfejsa (interface), nizova (arrays)…
2.6.1 Boolean
Najjednostavniji tip podatka, uzima vrednost true ili false, npr. u TS-u se definiše:
let isDone: boolean = false;
2.6.2 Number
Kao i kod JS-a, i kod TS-a brojevi (number) su decimalni brojevi (floating point values), a pored
decimalnih i heksadecimalnih, TS podržava i binarne i oktalne brojeve, koji su u JS uvedeni u
verziji ECMAScript2015, npr.
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
2.6.3 String
Kao i kod drugih programskih jezika, string je tekstualni tip podatka, a TS, kao i JS, koristi
dvostruke i jednostruke znake navoda, npr.
let color: string = "blue";
color = 'red';
Takođe se mogu koristiti i tzv. Template strings, koji mogu sadržati više redova teksta i
ugrađene izraze. Takvi stringovi se uokviruju znacima ` (backtick/backquote), dok se ugrađeni
izrazi navode u formi ${ expressionName }. Npr.
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

U prethodnom kodu je prored namerno ostavlјen, i predstavlјa deo template stringa, a dati
kod daje isti rezultat kao:
let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";
2.6.4 Array
U pitanju su, kao i kod JS-a, nizovi koji sadrže niz vrednosti, a mogu se definisati na dva načina.
Prvi način je korišćenjem uglastih zagrada:
let list: number[] = [1, 2, 3];
a drugi način je primenom generičkog array tipa:
let list: Array<number> = [1, 2, 3];
Kao što se daje primetiti, kod JS-a se mora navesti i tip niza, a niz mora sadržati samo elemente
istog tipa kog je i sam niz, tj. nije moguće definisati niz koji sadrži različite tipove podataka.
2.6.5 Tuple
Tuple je tip podatka koji dozvolјava kreiranje niza koji sadrži elemente različitog tipa, pri čemu
broj različitih tipova elemenata niza mora biti poznat. Na primer, moguće je definisati niz koji
sadrži string i number:
let x: [string, number]; // Declare a tuple type
x = ["hello", 10]; // Initialize it
x = [10, "hello"]; // Initialize it incorrectly
Sve operacije sa članovima niza moraju poštovati tip podatka kome taj član niza pripada,
odnosno nije moguće tretirati broj kao string i sl., kao npr.
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'
Čak će nam i Visual Studio Code ukazati na grešku, ako pokušamo isto:

Ako se slučajno pokuša pristupiti elementu niza koji ne postoji, koristi se union tip:
x[3] = "world"; // OK, 'string' can be assigned to 'string |
number'
console.log(x[5].toString());// OK, 'string' and 'number' both have 'toString'
x[6] = true; // Error, 'boolean' isn't 'string | number'
2.6.6 Enum
Dodatak standardnim tipovima podataka iz JS-a, omogućava, kao npr. kod C#, dodelu
smislenijih naziva brojčanim vrednostima, npr.
 enum Color {Red, Green, Blue}
let c: Color = Color.Green;
Podrazumevano se navedenim nazivima dodelјuju brojne vrednosti počevši od broja 0, ali se
može početi i od druge vrednosti, kao npr.
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
ili se zadati svaka vrednost posebno:
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
Ovde se ne završava pogodnost korišćenja ovog tipa podatka. Ako ne znamo koji naziv je
dodelјen određenom broju, možemo to otkriti na osnovu tog broja:
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName); // Displays 'Green' as its value is 2 above
2.6.7 Any
Kod JS-a je moguće određenoj promenlјivoj dodeliti vrednost drugog tipa podatka u odnosu
na inicijalno dodelјenu, pa se postavlјa pitanje kako to uraditi kod TS-a? Za to se koristi tip
podatka any, čime se ta promenlјiva izostavlјa iz provere tipova podataka, kao npr.
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
Takođe se može koristiti npr. za liste kod kojih nismo sigurni kog tipa su neki članovi:
let list: any[] = [1, true, "free"];
list[1] = 100;

Pitanje: U čemu je razlika u odnosu na Tuple?

2.6.8 Void
Koristi se za podatke koji nemaju dodelјen nikakav tip, a najčešće se mogu videti kod funkcija
koje ne vraćaju nikakvu vrednost (a kod TS-a se i za takve funkcije mora zadati tip), kao npr.
function warnUser(): void {
alert("This is my warning message");
}
Nema smisla za promenlјive dodelјivati tip void, jer se takvim promenlјivim mogu dodeliti
samo vrednosti undefined i null.
2.6.9 Null i Undefined
Vrednosti null i undefined su takođe tipovi podataka istog naziva kao i te vrednosti, ali nema
mnogo smisla, kao i kod void, koristiti ih same za sebe:
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
Međutim, ovde dve vrednosti su podtipovi svih ostalih tipova podataka, pa se null i undefined
mogu dodeliti kao vrednosti promenlјivoj bilo kog tipa (npr. promenlјivoj tipa number).
Međutim, ako se koristi --strictNullChecks svič za proveru tipova, tada se ove vrednosti mogu
dodeliti samo void i njemu odgovarajućih tipova promenlјivih.
2.6.10 Never
Ovo je tip podatka čija se vrednosti nikada ne pojavlјuje, npr. never je tip funkcije koja uvek
izbacuje exception ili se nikad ne vraća.
Ovaj tip je podtip i može se dodeliti bilo kom tipu promenlјive, međutim nijedan drugi tip nije
podtip niti se može dodeliti ovom tipu promenlјive. Primer:
// Function returning never must have unreachable end point
function error(message: string): never {
throw new Error(message);
}

// Inferred return type is never

function fail() {
return error("Something failed");
}

// Function returning never must have unreachable end point

function infiniteLoop(): never {
while (true) {
}
}

2.7 Varijable
Osnovna sintaksa u TS-u za varijable izgleda ovako:
var naziv_varijable : tip_podatka = vrednost;
U JS-u sve je isto osim što nema dodelјivanja tipa podatka. Naravno, na primeru iznad moguće
je dodeliti vrednost kasnije a u TS kao što je već rečeno može se pisati i običan JS pa i tip
podatka nije obavezan.
Napomena: sa novim ecma script-om (ES 2017) umesto var koriste se i let i const.
2.8 Operatori
Ovo je jedna od brojnih oblasti koja je zajednička i za typescript i za javascript. Postoji nekoliko
vrsta operatora:
 aritmetički: sabiranje (+), oduzimanje (-), množenje (*), delјenje (/), delјenje sa
ostatkom (%), povećanje (++), smanjenje (--)
primer:
var a = 5;
var b = 10;
var c = a + b;

 relacioni: veće od (>), manje od (<), veće ili jednako (>=), manje ili jednako (<=),
jednakost (==), nejednakost (!=)
primer:
var a = 5;
var b = 10;
var c = a == b;
  logički: i (&&), ili (||) i ne (!)
primer:
var a = 5;
var b = 10;
var c = a == b || a < b;
 Postoje još neki operatori kao što su bitwise, operatori dodele i ostali operatori ali oni
zahtevaju naprednije znanje programskih jezika koji su tema ove priče pa ćemo ih
zasad preskočiti (detalјnije se može pročitati ovde)
2.9 Prednosti i nedostaci korišćenja TS-a
Kao i kod svakog drugog programskog jezika, i korišćenje TS-a ima svoje prednosti i mane.
Neke od najvažnijih prednosti su:
 Objektno-orijentisan pristup, tj. TS je u potpunosti OOP;
 Nije potreban runtime dodatak veb pregledaču, jer se sav kod prevodi u standardni JS
kod koji veb pregledač može da pročita;
 Backend programerima je olakšan rad, jer u običnom JS implementacija naprednih
koncepata je teško razumlјiva i takav kod je veoma težak za čitanje i analizu;
 Koristi se u popularnim softverskim okvirima (frameworks), kao što je npr. Angular 13.
Pored prednosti, postoje, naravno, i nedostaci, kao što su:
 Frontend razvoj je prezasićen svim vrstama softverskih okvira i tehnologija, koje je
teško pratiti i učiti. Iako je TS stekao određenu popularnost, ne znaju ga svi JS
developeri, tako da timski rad po tom pitanju može biti teži.
 Razvojna okruženja i editori moraju imati podršku za prepoznavanje sintakse i
konverziju u JS.
 CMS-ovi mogu praviti problem ako hoćete da izmenite JS kod direktno iz
administratorskog panela, što nije problem ako postoji dodatak za konverziju TS u JS
format, a izmena se vrši u TS fajlu. U suprotnom, ako se izmene vrše na JS fajlu, kasnije
izmene i ažuriranje od strane developera će poništiti te izmene.
 Česte nadogradnje jezika (aktuelna verzija 2.2.3), što ne pravi problem samo onima
koji uče taj jezik, već može biti problem za primenu nove verzije jezika na starije
projekte.
2.10 TS kompajler
TS kompajler (ili transpiler, kako ga neki zovu) ima zadatak da izvrši određene provere u našem
TS kodu i konvertuje ga u validan JS format. Kompajler se sastoji iz više različitih delova (kao
npr. Parser, Binder, Type Resolver/Checker, Emitter, Pre-processor).
Koristićemo standardan TS kompajler, koji se preko konzole poziva komandom tsc, a kao
argument se navodi .ts fajl i kao rezultat se dobija .js fajl.
Ako imamo instaliran node.js zajedno za npm, (node package manager), tsc se instalira
sledećom komandom na konzoli:
npm install -g typescript
Nakon instalacije proveravamo verziju tsc-a komandom:
tsc -v
Osnovni primeri i postupak dati su ovde.

Primeri iz kojih se može videti razlika sa standardnim JS-om možete pogledati npr. u knjizi Yet
Another TypeScript Book.