# TypedURL

**Kind:** Interface

**Source:** [`src/client/types.ts`](https://github.com/honojs/hono/blob/main/src/client/types.ts#L215)

**Part of:** [Client](subsystem-src-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

| Property | Type |
|---|---|
| `protocol` | `Protocol` |
| `hostname` | `Hostname` |
| `port` | `Port` |
| `host` | `Port extends '' ? Hostname : `${Hostname}:${Port}`` |
| `origin` | ``${Protocol}` |
| `pathname` | `Pathname` |
| `search` | `Search` |
| `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.