Working with URLs and Query Parameters

URL and URLSearchParams parse, read, and build addresses without manually splitting strings. They work in modern browsers and Node.js. Use encode-safe setters when constructing query parameters. Validate requested values after reading them; a query string is still untrusted external input.

new URL parses the address into components. Setting q encodes the space as + in the form-style query representation while get retrieves the decoded value.

Do not concatenate raw user input onto URLs. Use URLSearchParams and validate numeric parameters such as page.

Save as working-urls-query-parameters.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

const url = new URL("https://example.test/search?page=2");
url.searchParams.set("q", "red shoes");
console.log(url.searchParams.get("page"));
console.log(url.searchParams.get("q"));
console.log(url.search);

Verified output

2
red shoes
?page=2&q=red+shoes

Compile: npx tsc --strict --target es2022 --module commonjs working-urls-query-parameters.ts; run: node working-urls-query-parameters.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example runs in Node.js 22.16.0; if it reads runtime environment details, your displayed values may differ.

new URL parses the address into components. Setting q encodes the space as + in the form-style query representation while get retrieves the decoded value.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Real browser lab: This TypeScript targets actual DOM APIs and was successfully type-checked against the DOM library. It requires a browser; its runtime interaction was not simulated in Node.js. Save the two files together, compile the TypeScript, and serve this folder through a local HTTP server such as python3 -m http.server 8000 (especially important for modules and workers).

index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>TypeScript browser lab</title></head><body>
<h1 id="title">TypeScript lesson</h1><button id="action">Run</button><p id="output"></p>
<script type="module" src="./app.js"></script>
</body></html>

app.ts

const url = new URL(window.location.href);
url.searchParams.set("page", "2");
const output = document.querySelector<HTMLElement>("#output");
if (output) output.textContent = url.searchParams.toString();

Compile: npx tsc --strict --target es2022 --module es2022 --lib es2022,dom app.ts. For the worker example also compile worker.ts with --lib es2022,webworker. Then open the served HTML page in a browser to interact with it.

Do not concatenate raw user input onto URLs. Use URLSearchParams and validate numeric parameters such as page.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Add a sort parameter and use Number.isInteger to check that page is a positive integer.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

URL and URLSearchParams parse, read, and build addresses without manually splitting strings.

Run the primary example, then complete the practice task or environment-specific lab.