# typage-url

> Make your URL type-safe!

Latest version **1.0.1** (published 2023-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install typage-url
pnpm add typage-url
yarn add typage-url
bun add typage-url
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-15 |
| First published | 2023-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | mokuo |
| Maintainers | mokuo |
| Keywords | type, type-safe, typescript, url, path, route |

## Links

- npm: https://www.npmjs.com/package/typage-url
- Repository: https://github.com/SUCHMOKUO/typage-url
- Homepage: https://github.com/SUCHMOKUO/typage-url#readme
- Issues: https://github.com/SUCHMOKUO/typage-url/issues
- npm.io page: https://npm.io/package/typage-url

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-07-15
- 1.0.0 — 2023-07-15

## README

# typage-url

[![Actions Status](https://github.com/SUCHMOKUO/typage-url/workflows/CI/badge.svg)](https://github.com/SUCHMOKUO/typage-url/actions)
[![](https://img.shields.io/npm/v/typage-url.svg)](https://www.npmjs.com/package/typage-url)
![](https://img.shields.io/badge/dependencies-none-brightgreen.svg)
![](https://img.shields.io/npm/l/typage-url.svg)

Make your URL type-safe by leveraging the power of TypeScript!

## Notification

1. TypeScript version need to be above `4.1.0`.

## Usage

Create the path object by passing in a object which represents your route tree recursively:

```typescript
import { createPath, END } from 'typage-url';

const root = createPath({
  page1: {},
  page2: {
    [END]: true,
    subpage1: {}
  },
  page3: {
    subpage1: {}
  }
});
```

The example above creates a path object which can form the following urls:

- /page1
- /page2
- /page2/subpage1
- /page3/subpage1

You can use the `build` function from the library to get all the available urls:

```typescript
import { createPath, END, build } from 'typage-url';

const root = createPath({
  page1: {},
  page2: {
    [END]: true,
    subpage1: {}
  },
  page3: {
    subpage1: {}
  }
});

build(root.page1); // => '/page1'
build(root.page2); // => '/page2'
build(root.page2.subpage1); // => '/page2/subpage1'
build(root.page3); // throws type error for unavailable url
build(root.page3.subpage1); // => '/page3/subpage1'
```

For url with path parameters, just name the path with prefix `':'`, for example:

```typescript
const root = createPath({
  users: {
    ':id': {}
  }
});
```

And the path object will automatically generate a value getter for that path as a function:

```typescript
const root = createPath({
  users: {
    ':id': {}
  }
});

build(root.users.id('123')); // => '/users/123'
```

If you don't pass in the value, the returned url will just keep the path parameter template there, this is useful when doing routing configurations using other libraries like react-router:

```typescript
build(root.users.id); // => '/users/:id'
```

A prefix for all the generated urls is possible, you can pass in your prefix as the second parameter of the `createPath` function:

```typescript
const root = createPath(
  {
    page1: {},
    page2: {}
  },
  '/the/prefix'
);

build(root.page1); // => '/the/prefix/page1'
build(root.page2); // => '/the/prefix/page2'
```

---
_Source: https://npm.io/package/typage-url · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._