UUID in TypeScript

TypeScript UUID Generator

The type system can do more here than string: the DOM lib already knows the exact shape randomUUID() returns.

Typed out of the boxNo @types neededBranded IDs

Version

How many

Uppercase Hyphens Braces { }

Result

Generated locally with the Web Crypto API — nothing leaves your browser.

Generating UUIDs in TypeScript

In a current TypeScript lib, crypto.randomUUID() is declared as a template literal type — `${string}-${string}-${string}-${string}-${string}` — rather than plain string. You get the hyphen structure checked for free, and no @types package is involved because the declaration ships with the DOM lib.
What types cannot tell you is whether a value is your kind of identifier. Once a codebase has user IDs, order IDs and request IDs all as string, they are interchangeable and nothing stops them being swapped. A branded (nominal) type fixes that with a cast at the boundary and no runtime cost.

How to generate

Press Generate UUID above to mint a value in this browser — nothing is sent anywhere.
Copy one value with Copy, or set How many and use Copy all for a fixture list.
Switch Version if your code needs v7 instead of the v4 default, and turn on Formatting to match your stack's conventions.

Use Cases

Branded ID types — type UserId = UUID & { __brand: 'user' } so user and order IDs cannot be mixed.
DTO and fixture typing — the sample values here paste straight into a typed seed object.
Runtime boundaries — pair the generated value with a validation regex when parsing input.

How TypeScript UUID Generator Compares

crypto.randomUUID()	Returns a hyphenated template literal type
string	No structure, nothing stops a swap
Branded UUID	Same bytes, checked at compile time, zero runtime cost

Code Examples

TypeScript

// lib.dom.d.ts types this as `${string}-${string}-${string}-${string}-${string}`
const id = crypto.randomUUID();

// A nominal type, so a UserId can never be passed where an OrderId is wanted
type Brand<T, B extends string> = T & { readonly __brand: B };
export type UserId = Brand<string, 'UserId'>;

export const newUserId = (): UserId =>
  crypto.randomUUID() as UserId;

Validation

const UUID_RE =
  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

const isUuid = (v: string): boolean => UUID_RE.test(v);

Frequently Asked Questions

Do I need @types/uuid for TypeScript?

Not for crypto.randomUUID() — its declaration is part of the DOM lib. The uuid package ships its own types, so no separate @types install is needed there either.

How do I type an identifier that is definitely a UUID?

Use a branded type: intersect string with a unique marker property and cast once where the value is created. It is erased at runtime but rejected by the compiler everywhere else.

Why is my UUID typed as a template literal instead of string?

Recent DOM libs describe randomUUID() as five hyphen-joined string segments. That is what lets the compiler catch code that treats the value as a bare hex string.