Skip to content

TypedURL

reference
1 min readUpdated

Kind: Interface

Source: src/client/types.ts

Part of: Client

TypedURL represents a URL as typed component fields, including protocol, host details, path, search string, origin, and full href. It keeps derived fields such as host, origin, and href aligned with the protocol, hostname, port, pathname, and search values.

Properties

PropertyType
protocolProtocol
hostnameHostname
portPort
hostPort extends '' ? Hostname : ${Hostname}:${Port}``
origin``${Protocol}`
pathnamePathname
searchSearch
href``${Protocol}`

Diagram

mermaid
graph LR
  Protocol[protocol] --> Origin[origin]
  Hostname[hostname] --> Host[host]
  Port[port] --> Host
  Host --> Origin
  Origin --> Href[href]
  Pathname[pathname] --> Href
  Search[search] --> Href

Usage

ts
function request(url: TypedURL) {
  return fetch(url.href);
}

const apiUrl: TypedURL = {
  protocol: "https:",
  hostname: "api.example.com",
  port: "",
  host: "api.example.com",
  origin: "https://api.example.com",
  pathname: "/users",
  search: "?active=true",
  href: "https://api.example.com/users?active=true",
};

request(apiUrl);

AI Coding Instructions

  • Keep host consistent with hostname and port; omit the colon when port is an empty string.
  • Build origin from the protocol and host rather than accepting unrelated values.
  • Build href from the origin, pathname, and search fields.
  • Preserve literal string types when constructing values so derived template-literal types remain valid.

Was this page helpful?

Download as PDF
TypedURL — Hono (narrator proof)