Naslovna » Front-end programiranje » TypeScript: Saveti i trikovi za efikasnije programiranje web aplikacija

TypeScript: Saveti i trikovi za efikasnije programiranje web aplikacija

Front-end programiranje JavaScript TypeScript
typescript

TypeScript postaje sve popularniji jezik za mnoge web aplikacije. Omogućava programerima upoznatim sa JavaScript-om da programiraju prema principima i praksama intrinsicnim za paradigmu objektno-orijentisanog programiranja. TypeScript je jezik sa jakim tipovima koji podržava sve karakteristike koje se obično nalaze u jezicima za objektno-orijentisano programiranje, poput Java-e i C#. Na primer, JavaScript nema podršku za interfejs, ali možete programirati prema interfejsu u TypeScript-u.

Programeri kreiraju kod u TypeScript-u, ili u integrisanom razvojnom okruženju (IDE) ili samostalno, a zatim TypeScript kompilator transformiše TypeScript kod u JavaScript. JavaScript se potom implementira za korišćenje u pregledačima i za implementaciju na serverskoj strani pomoću Node.js-a. Glavna prednost korišćenja TypeScript-a je što pomaže u sprečavanju programera da šalju kod sa greškama.

Deo procesa kompilacije TypeScript-a identifikuje greške u vreme dizajniranja pre nego što se kod prevede u JavaScript. TypeScript takođe omogućava programerima da iskoriste prakse kodiranja inherentne u jeziku sa jakim tipovima. Evo tri saveta i trika za TypeScript koje programer može koristiti da iskoristi karakteristike dostupne u TypeScript programskom jeziku:

1. Pokušajte sa enum-om ili prilagođenim tipom da ograničite vrednost promenljive na string.

2. Idite dalje od typeof, i koristite instanceof.

3. Koristite for(;;) umesto while petlje za beskonačno izvršavanje petlje.

Pogledajmo detalje svakog.

1. Pokušajte sa enum-om ili prilagođenim tipom da ograničite string vrednosti Osiguravanje da string promenljiva ima pravu vrednost može biti mukotrpan zadatak za programere. Na primer, dodeljivanje vrednosti asparagus promenljivoj animal: string nije samo netačno, već može izazvati i greške u vreme izvršavanja, zavisno od logike datog programa u kojem je promenljiva deklarisana. Jedan način za rešavanje ovog problema u TypeScript-u je definisanje enum-a stringa, na sledeći način:

typescript
export enum Fruit {
   Apple = 'Apple',
   Orange = 'Orange',
   Cherry = 'Cherry',
 }

Zatim, TypeScript kompilator prikazuje grešku kada pokušate da pokrenete ovaj kod:

typescript
let goodFruit: Fruit = 'Asparagus';

Drugi način za ograničavanje vrednosti dodeljenih string promenljivoj je kreiranje prilagođenih tipova, na sledeći način:

typescript
export type Fruit = 'Apple' | 'Orange' | 'Cherry';
export type Vegetable = 'Lettuce' | 'Carrot' | 'Radish' | 'Potato'

U tom delu koda, Apple je prilagođeni tip koji predstavlja vrednost Apple ili Orange ili Cherry, a Povrće je prilagođeni tip koji predstavlja vrednost Lettuce ili Carrot ili Radish ili Potato. Na taj način, sledeći kod prolazi kroz TypeScript kompilator:

typescript
const goodFruit: Fruit = 'Apple';

Međutim, ovaj kod ne prolazi:

typescript
const goodFruit: Fruit = 'Lettuce';

Umesto toga, taj kod generiše grešku kompilatora sličnu sledećoj:

typescript
test.ts(52,11): error TS2322: Type 'Vegetable' is not assignable to type 'Fruit'.
   Type 'Lettuce' is not assignable to type 'Fruit'.

Definisanje prilagođenog tipa za ograničavanje vrednosti dodeljenih promenljivim varijablama tog tipa je pametan i jednostavan trik. 2. Idite dalje od typeof i koristite instanceof Operator typeof se koristi za određivanje tipa promenljive. Možete koristiti typeof u situacijama kada želite da osigurate da je promenljiva broj, na primer. Operator typeof je deo JavaScript-a od samog početka. Stoga je dostupan i u TypeScript-u jer je TypeScript izgrađen “na vrhu” JavaScript-a. Međutim, typeof ima ograničenja. Pre svega, samo proverava osnovne JavaScript tipove: Undefined, Null, Boolean, Number, BigInt, String, Symbol i Function. Takođe, povratna vrednost typeof je string, kao što je prikazano u sledećem primeru:

typescript
const amount = 1.29;
console.log(typeof amount)

Odgovor je: “Number.” Operator typeof takođe ima ograničenja kada se koristi u TypeScript-u, posebno kada se primeni na prilagođenu klasu koju ste kreirali u TypeScript-u. Pogledajte sledeći primer:

typescript
// Kreirajte promenljivu na osnovu prilagođene klase, Bird
 const ptica = new Bird();
 
// Koristite typeof da testirate tip promenljive
 const rezultat = typeof ptica;
 
// Ispis rezultata typeof pomoću console.log()
 console.log(`Ovo je rezultat pokretanja typeof ptica: ${rezultat}`);

Izlaz console.log() je sledeći:

typescript
Ovo je rezultat pokretanja typeof ptica: object

Primetite da typeof može samo da prijavi jedan od osnovnih JavaScript tipova, koji je u slučaju promenljive ptica, objekat. Operator typeof ne razume prilagođenu klasu Bird kreiranu u TypeScript-u. Međutim, TypeScript instanceof operator to razume. Sledeći primer pokazuje kako primeniti TypeScript instanceof operator na promenljivu ptica deklarisanu gore. Izjava ptica instanceof Bird izvršava se unutar izjave console.log():

typescript
console.log(`Da li je ptica instanca Bird-a? ${ptica instanceof Bird}`);

Evo rezultata izlaza console.log():

typescript
Da li je ptica instanca Bird-a? true

Primetite da instanceof operator prijavljuje da je promenljiva ptica zaista instanca klase Bird. Sledeći primer prikazuje negativan odgovor od instanceof:

typescript
console.log(`Da li je ptica instanca Dog-a? ${ptica instanceof Dog}`);

Rezultat ispisa iz console.log() je sledeći:

typescript
Da li je ptica instanca Dog-a? False

Rezultat ima smisla jer promenljiva ptica nije instanca klase Dog. Korišćenje instanceof operatora vraća samo True ili False. Izvršavanje instanceof na ovaj način neće raditi:

typescript
instanceof ptica

Umesto toga, morate deklarisati klasu prema kojoj testirate promenljivu od interesa. I pored ovog nedostatka, instanceof operator je moćan alat za rad sa prilagođenom klasom koju ste kreirali u TypeScript-u. instanceof operator pruža finiju inspekciju od JavaScript typeof operatora. 3. Koristite for(;;) umesto while petlje za beskonačno izvršavanje petlje Ovaj poslednji savet nije specifičan za TypeScript, ali je alternativa korišćenju while petlje za neprekidno izvršavanje koda. Jedna tehnika za neprekidno izvršavanje koda je kreiranje while petlje, na sledeći način:

typescript
let x = 0;
 while (true) {
   console.log(`Ovo je petlja ${x}`);
   x++;
 }

Taj kod je sasvim dobar način za izvođenje beskonačne petlje. Ipak, postoji alternativni način, ovako:

typescript
let x = 0;
 for (;;) {
   console.log(`Ovo je petlja ${x}`);
   x++;
 }

Gornji primer koristi for petlju koja nema postavljene uslove u svom deklaraciji. Nije bolje ili gore od korišćenja for petlje. To je samo drugačiji način. Programeri naviknuti na JavaScript mogu primeniti napredne principe i prakse objektno-orijentisanog programiranja za kodiranje u TypeScript-u.

Kao rezultat, mogu pristupiti više od karakteristika koje se nalaze u jezicima za objektno-orijentisano programiranje, poput Java-e i C#. Saveti opisani u ovom članku demonstriraju samo neke od mnogih stvari koje možete uraditi u TypeScript-u kako biste vaše napore u programiranju učinili efikasnijim, efektivnijim i zabavnijim. Uvek ima više za učenje, ali nadamo se da ćete odmah pronaći ove savete korisnim.