pagpapakilala
Sa kontemporaryong digital na landscape, mahalaga ang mga parameter ng URL dahil nagbibigay-daan ang mga ito para sa pagsubaybay sa mapagkukunan ng impormasyon bilang pagtukoy sa analytics. Bukod pa rito, binibigyang-daan nila ang mga developer na i-personalize ang mga karanasan sa bawat user. Sa pangkalahatan, ang mga parameter ng URL ay isang paraan upang i-save ang mga estado sa isang stateless na kapaligiran tulad ng web. Ang pagtatrabaho sa mga parameter ng URL sa TypeScript, isang malakas na na-type na superset ng JavaScript, ay nagbibigay sa mga developer ng pagkakataon na magtrabaho nang ligtas at maayos dahil alam na ang lahat ng mga uri ay sinusuri sa panahon ng compile-time.
Pagbabasa ng Mga Parameter ng URL sa TypeScript
Gamit ang TypeScript, maaaring i-parse ng isa ang mga parameter ng URL sa medyo simple at direktang paraan. Ang pangunahing gusali sa pagkamit ng gawaing ito ay ang paggamit ng isang interface upang tukuyin kung ano ang magiging hitsura ng aming inaasahang mga parameter ng URL.
interface UrlParameters {
parameter1?: string;
parameter2?: number;
parameter3?: string;
}
URLSearchParams, isang built-in na browser API, ay madaling gamitin kapag nagbabasa ng mga parameter ng URL. Tuklasin pa natin ito.
Solusyon: URL Search Params to the Rescue
Sa URLSearchParams, mababasa natin ang mga parameter mula sa URL. Gumagawa lang kami ng bagong instance ng klase na ito sa pamamagitan ng pagpasa ng query-string na bahagi ng URL sa constructor nito.
const urlParameters: UrlParameters = {};
const params = new URLSearchParams(window.location.search);
for (let param of params) {
urlParameters[param[0]] = param[1];
}
Sa code sa itaas, isang bagong object ng URLSearchParams ang ginawa gamit ang mga parameter ng URL ng kasalukuyang page. Ang mga parameter na ito ay ini-loop at idinaragdag sa aming object ng UrlParameters. Ang magandang bagay ay, ang URLSearchParams ay gumagana nang walang putol sa malakas na mga tampok sa pag-type ng TypeScript.
Hakbang-hakbang na Pagpapaliwanag ng Code
Sa unang hakbang, tinukoy namin ang isang interface para sa mga parameter ng URL. Ang tandang pananong pagkatapos ng mga susi ay nagpapahiwatig na ang mga parameter na ito ay opsyonal.
- Pagkatapos, magpatuloy kami sa paggawa ng bagong instance ng URLSearchParams, na ipinapasa ang mga parameter ng URL (nakuha mula sa window.location.search) sa constructor. Ito ay awtomatiko ang proseso ng pag-parse ng mga parameter.
- Kasunod nito, ang isang for..of loop ay sinisimulan sa object ng URLSearchParams. Ang bawat parameter at ang halaga nito ay inilalagay sa aming object ng UrlParameters.
Sa ganitong paraan, magagamit namin ang mga parameter sa kabuuan ng aming code sa isang organisado at uri-ligtas na paraan.
Mga Karagdagang Aklatan na Pangasiwaan ang Mga Parameter ng URL
Bagama't ang JavaScript at ayon sa extension TypeScript ay nagbibigay ng mga built-in na pamamaraan upang pangasiwaan ang mga parameter ng URL, may mga aklatan tulad ng query-string or js-url na nagbibigay ng mas malawak na mga opsyon sa pag-parse. Ang mga library na ito ay nag-aalok ng mga paraan upang i-stringify, i-parse, i-extract, o manipulahin ang mga parameter ng url nang mas komprehensibo.
Ang paggamit ng mga parameter ng URL na may uri ng kaligtasan ng TypeScript ay nagbibigay-daan para sa mas secure, scalable, at mapanatili na code. Ang pamamaraang ito ay isinasalin sa isang mas tuluy-tuloy na karanasan ng user, lubos na nako-customize sa bawat session. Isa ito sa maraming “superpower” ng developer na ibinibigay sa iyo ng TypeScript sa iyong paglalakbay sa web development.
