Riješeno: čitanje url parametara

Posljednje ažuriranje: 09/11/2023

Uvod

U savremenom digitalnom okruženju, parametri URL-a su ključni jer omogućavaju praćenje izvornih informacija u odnosu na analitiku. Osim toga, omogućavaju programerima da personaliziraju iskustva za svakog korisnika. U suštini, parametri URL-a su način za spremanje stanja u okruženju bez stanja kao što je web. Rad sa parametrima URL-a u TypeScript-u, snažno otkucanom nadskupu JavaScript-a, daje programerima priliku da rade bezbedno i zdravo znajući da se svi tipovi proveravaju tokom kompajliranja.

Čitanje URL parametara u TypeScript-u

Koristeći TypeScript, moguće je analizirati URL parametre na prilično jednostavan i direktan način. Osnovni gradivni blok u postizanju ovog zadatka je korištenje sučelja za definiranje kako će naši očekivani URL parametri izgledati.

interface UrlParameters {
  parameter1?: string;
  parameter2?: number;
  parameter3?: string;
}

URLSearchParams, ugrađeni API pretraživača, je koristan kada čitate URL parametre. Istražimo ovo dalje.

Rješenje: Params pretraživanja URL-a za spašavanje

Sa URLSearchParams, možemo čitati parametre iz URL-a. Jednostavno kreiramo novu instancu ove klase tako što ćemo proslediti deo URL-a u nizu upita njegovom konstruktoru.

const urlParameters: UrlParameters = {};
const params = new URLSearchParams(window.location.search);
for (let param of params) {
  urlParameters[param[0]] = param[1];
}

U gornjem kodu, novi URLSearchParams objekat je kreiran koristeći URL parametre trenutne stranice. Ovi parametri se zatim provlače kroz petlju i dodaju u naš objekat UrlParameters. Odlična stvar je što URLSearchParams radi besprijekorno sa snažnim karakteristikama tipkanja TypeScript-a.

Objašnjenje koda korak po korak

U prvom koraku definiramo interfejs za URL parametre. Znak pitanja iza tipki označava da su ovi parametri opcioni.

  • Zatim nastavljamo da kreiramo novu instancu URLSearchParams, prosleđujući URL parametre (dobivene iz window.location.search) konstruktoru. Ovo će automatizirati proces raščlanjivanja parametara.
  • Nakon toga, for..of petlja se pokreće preko URLSearchParams objekta. Svaki parametar i njegova vrijednost se stavljaju u naš objekat UrlParameters.

Na ovaj način možemo koristiti parametre u cijelom kodu na organiziran način bezbjedan za tipove.

Dodatne biblioteke za rukovanje URL parametrima

Iako JavaScript i prema proširenju TypeScript pružaju ugrađene metode za rukovanje URL parametrima, postoje biblioteke kao što su query-string or js-url koje pružaju opsežnije opcije raščlanjivanja. Ove biblioteke nude metode za obimnije stringovanje, raščlanjivanje, izdvajanje ili manipulaciju url parametrima.

Iskorištavanje parametara URL-a sa sigurnošću tipa TypeScript omogućava sigurniji, skalabilniji i održavan kod. Ova metoda se prevodi u besprijekornije korisničko iskustvo, vrlo prilagodljivo svakoj sesiji. To je jedna od mnogih “supermoći” programera koje vam TypeScript daje na vašem putu razvoja weba.

Slični postovi: