Type named capture groups better

Search Terms

named regexp, named capture groups

Motivation

Currently named capture groups are a bit of a pain in TypeScript:

1. All names are of type string even if the regexp doesn’t have that named group.
2. You need to use non-null assertion for .groups even when that is the only possibility.

Suggestion

I propose making RegExp higher order on its named capture groups so that .groups is well typed.

// Would have type: RegExp<{ year: string, month: string }>
const date = /(?<year>[0-9]{4})-(?<month>[0-9]{2})/

const match = someString.match(date)
if (match) {
  // match.groups type would be { year: string, month: string }
  // currently is undefined | { [key: string]: string }
}

// Would have type RegExp<{ year: string, month?: string }>
const optionalMonth = /(?<year>[0-9]{4})(-(?<month>[0-9]{2}))?/

Checklist

My suggestion meets these guidelines:

• [✓] This wouldn’t be a breaking change in existing TypeScript/JavaScript code
• [✓] This wouldn’t change the runtime behavior of existing JavaScript code
• [✓] This could be implemented without emitting different JS based on the types of the expressions
• [✓] This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [✓] This feature would agree with the rest of TypeScript’s Design Goals.

[hlovdal]

For everyone that wants to have type safety and auto completion on the groups part right now you can declare the variable the match result is stored in as the RegExpMatchArrayWithGroups type below like the following:

const output = 'hello_world.ts:13412:Missing ;.';
const m: RegExpMatchArrayWithGroups<{file: string, line: string; error: string}>
    = output.match(/^(?<file>[^:]+):(?<line>[^:]+):(?<error>.*)/);
if (m && m.groups) {
    // f: "hello_world.ts", l: "13412", e: "Missing ;."
    console.log('f: "' + m.groups.file + '", l: "' + m.groups.line + '", e: "' + m.groups.error + '"');

    // console.log(m.groups.filename); 
    // Property 'filename' does not exist on type '{ file: string; line: string; error: string; }'
}

The RegExpMatchArrayWithGroups type needs a type argument where all the group names in the regex are duplicated, so there is no automatic parsing from it, but when things are in the same statement this should be quite maintainable.

Definitions:

type RegExpMatchArrayWithGroupsOnly<T> = {
    groups?: {
        // eslint-disable-next-line no-unused-vars
        [key in keyof T]: string;
    }
}
type RegExpMatchArrayWithGroups<T> = (RegExpMatchArray & RegExpMatchArrayWithGroupsOnly<T>) | null;

[Pyrolistical]

Thanks @hlovdal. I took your idea made it easier to use.

type RegExpGroups<T extends string[]> =
  | (RegExpMatchArray & {
      groups?:
        | {
            [name in T[number]]: string;
          }
        | {
            [key: string]: string;
          };
    })
  | null;

const output = "hello_world.ts:13412:Missing ;.";
const match: RegExpGroups<["file", "line", "error"]> = output.match(
  /^(?<file>[^:]+):(?<line>[^:]+):(?<error>.*)/
);
if (match) {
  const { file, line, error } = match.groups!;
  console.log({ file, line, error });
}

Playground