Languages
[Edit]
EN

TypeScript - own url builder

6 points
Created by:
Kate_C
21580

In this short article we would like to show how to create custom URL builder in TypeScript.

It is problematic when we make some operations on URLs that each time force us to write some code which encodes and combines parameters togather - the solution is to use URL class or write own simple custom class what was presented in below example.

Note: to see JavaScript version go to this article.

Practical example:

class UrlBuilder {
	private cache: string | null = null;
	private parameters: Record<string, string> = {};

	public constructor(private prefix: string) {
		// nothing here ...
	}

	public getParameter = (name: string, defaultValue: string): string => {
		return this.parameters[name] ?? defaultValue;
	};

	public setParameter = (name: string, value: string | null): void => {
		const parameter = this.parameters[name];
		if (parameter == value) {
			return;
        }
		this.cache = null;
		if (value == null) {
			delete this.parameters[name];
        } else {
			this.parameters[name] = String(value);
        }
	};

	public toString = (): string => {
		if (this.cache == null) {
			let url = '';
			const entries = Object.entries(this.parameters);
			for (const entry of entries) {
				const name = encodeURIComponent(entry[0]);
				const value = encodeURIComponent(entry[1]);
				url += (url ? '&' : '?') + name + '=' + value;
			}
			this.cache = this.prefix + url;
		}
		return this.cache;
	};
}
  
// Usage example:
  
const builder = new UrlBuilder('https://domain.com/page');
  
builder.setParameter('preview', true);
builder.setParameter('user', 'john');
builder.setParameter('age', 20);

console.log(builder.toString()); // https://domain.com/page?preview=true&user=john&age=20

builder.setParameter('preview', null);
builder.setParameter('user', null);
  
console.log(builder.toString()); // https://domain.com/page?age=20
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join