typescript 56 lines · 9 steps

Parsing and comparing semver strings in TypeScript

A regex-backed parser and a spec-faithful comparator that ranks version strings the way semver defines.

Explained by highlit

Intermediate parsing regular-expressions comparison versioning tuple-types

1type Semver = {
major: number;
minor: number;
patch: number;
prerelease: string[];
build: string[];
7};
8 
9const SEMVER_RE =
/^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+([0-9A-Za-z.-]+))?$/;
11 
12export function parseSemver(input: string): Semver {
const match = SEMVER_RE.exec(input.trim());
if (!match) {
  throw new Error(`Invalid semver string: "${input}"`);
}
const [, major, minor, patch, prerelease, build] = match;
return {
  major: Number(major),
  minor: Number(minor),
  patch: Number(patch),
  prerelease: prerelease ? prerelease.split(".") : [],
  build: build ? build.split(".") : [],
};
25}
26 
27function comparePrerelease(a: string[], b: string[]): number {
if (a.length === 0 && b.length > 0) return 1;
if (a.length > 0 && b.length === 0) return -1;
30 
const len = Math.min(a.length, b.length);
for (let i = 0; i < len; i++) {
  const x = a[i];
  const y = b[i];
  const xn = /^\d+$/.test(x);
  const yn = /^\d+$/.test(y);
  if (xn && yn) {
    const diff = Number(x) - Number(y);
    if (diff !== 0) return Math.sign(diff);
  } else if (xn !== yn) {
    return xn ? -1 : 1;
  } else if (x !== y) {
    return x < y ? -1 : 1;
  }
}
return Math.sign(a.length - b.length);
47}
48 
49export function compareSemver(a: string, b: string): -1 | 0 | 1 {
const va = parseSemver(a);
const vb = parseSemver(b);
for (const key of ["major", "minor", "patch"] as const) {
  if (va[key] !== vb[key]) return va[key] < vb[key] ? -1 : 1;
}
return comparePrerelease(va.prerelease, vb.prerelease) as -1 | 0 | 1;
56}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Capture groups map cleanly onto a structured record via array destructuring.
2Semver comparison is lexicographic on numeric fields, then a special-cased prerelease ordering.
3A version without a prerelease outranks one that has it, and numeric identifiers compare numerically.

Related explainers

typescript

import { Component, computed, signal } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkScrollableModule } from '@angular/cdk/scrolling';

Paginating a CDK table with Angular signals

signals computed-state pagination

Intermediate 9 steps

typescript

import { Component } from '@angular/core';
import {
  trigger,
  transition,

Staggered list animations in Angular

animations stagger enter-leave

Intermediate 10 steps

typescript

type Handler = (event: KeyboardEvent) => void;
 
interface Binding {
  combo: string;

Building a keyboard shortcut manager in TypeScript

event-handling normalization closures

Intermediate 7 steps

javascript

const TOKEN_SPECS = [
  ["comment", /^\/\/[^\n]*|^\/\*[\s\S]*?\*\//],
  ["string", /^"(?:\\.|[^"\\])*"|^'(?:\\.|[^'\\])*'|^`(?:\\.|[^`\\])*`/],
  ["number", /^0[xX][\da-fA-F]+|^\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/],

Building a syntax highlighter tokenizer

tokenizer regular-expressions lexing

Intermediate 8 steps

typescript

type MatchSegment = {
  text: string;
  matched: boolean;
};

Splitting text into highlighted match segments

regex string-matching text-highlighting

Intermediate 8 steps

typescript

import { Component, input, computed } from '@angular/core';
 
function toNumber(value: number | string): number {
  return typeof value === 'number' ? value : parseFloat(value);