How to define a regex-matched string type in Typescript?

Question

Is it possible to define an interface which has some information on the format of a string? Take the following example:

interface timeMarkers{
    markerTime: string[]        
};

an example would be:

{
   markerTime: ["0:00","1:30", "1:48"]                   
}

My question: Is there a way to define the type for markerTime such that that the string value must always match this regex, instead of declaring it as simply string[] and going from there?

var reg = /[0-9]?[0-9]:[0-9][0-9]/;

There is no way to define such a type. There is a proposal on GitHub to support this, but it currently does not appear to be a priority. I'll search for the issue and post it here — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jul 20, 2018 at 15:23
@TitianCernicova-Dragomir Thanks. If you want to put it as the answer, I will accept it — Our_Benefactors
– Our_Benefactors, Commented Jul 20, 2018 at 15:33
Whether there will be in the future or not you would still want this in generated javascript output. — Inspiraller
– Inspiraller, Commented Oct 23, 2020 at 8:03
Does anybody know examples of type systems already implementing this? Doing a quick search, I only found some research papers and the TS github issue. One of the github comments says it would be "a first" … 🤔 — panepeter
– panepeter, Commented Oct 31, 2022 at 13:30

Yves M. · Accepted Answer · 2023-07-04 15:36:58Z

226

There is no way to define such a type. There is a proposal on GitHub to support this, but it currently does not appear to be a priority. Vote on it and maybe the team might include it in a future release.

Edit

Starting in 4.1 you can define a template literal type that would validate the string without actually defining all the options:

type MarkerTime =`${number| ''}${number}:${number}${number}`

let a: MarkerTime = "0-00" // error
let b: MarkerTime = "0:00" // ok
let c: MarkerTime = "09:00" // ok

Playground Link

edited Jul 4, 2023 at 15:36

Yves M.

31.3k24 gold badges111 silver badges154 bronze badges

answered Jul 20, 2018 at 18:29

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Nathan Adams Over a year ago

let x:MarkerTime = "99999:999999"; will also be valid as ${number} allows any number, not just one digit

EyasSH Over a year ago

Also "93.242:942.23" matches this.

Valentin Vignal Over a year ago

There is a new thread on Github for this: github.com/microsoft/TypeScript/issues/41160

SgtPooki Over a year ago

type string is the new any, and number will be next. Be explicit: If you don't want any number, don't use a type that allows any number.

Jalil Over a year ago

You can go further to avoid matching "93.242:942.23" :

ts type SingleNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;  type MarkerTime =`${SingleNumber| ''}${SingleNumber}:${SingleNumber}${SingleNumber}`;

typescriptlang.org/play?#code/…

|

Keen · Accepted Answer · 2025-03-11 19:00:31Z

42

Until regex types become available to the language, you can now use template literal types in TS 4.1.

Let me refer to the question example and illustrate, how to model a time restricted string type called Time. Time expects strings in the format hh:mm (e.g. "23:59") here for simplification.

Step 1: define `HH` and `MM` types

Paste following code into your browser web console:

`type HH = ${Array.from({length:24}, (v, i) => `'${String(i).padStart(2, 0)}'`).join("|")}`
`type MM = ${Array.from({length:60}, (v, i) => `'${String(i).padStart(2, 0)}'`).join("|")}`

Generated result, which we can use as types in TS:

type HH = '00'|'01'|'02'|'03'|'04'|'05'|'06'|'07'|...|'22'|'23'
type MM = '00'|'01'|'02'|'03'|'04'|'05'|'06'|'07'|...|'58'|'59'

Step 2: Declare `Time`

type Time = `${HH}:${MM}`

Simple as that.

Step 3: Some testing

const validTimes: Time[] = ["00:00","01:30", "23:59", "16:30"]
const invalidTimes: Time[] = ["30:00", "23:60", "0:61"] // all emit error

Here is a live code example to get play around with Time.

edited Mar 11 at 19:00

Keen

98612 silver badges19 bronze badges

answered Sep 21, 2020 at 17:54

bela53

3,5351 gold badge16 silver badges29 bronze badges

4 Comments

Nathan Adams Over a year ago

This works great on small examples, but breaks on larger ones as typescript will produce a union of all possible combinations

bela53 Over a year ago

@NathanAdams yes, you can have a maximum of 100.000 union constituents, verifyable by this playground sample.

yoel halb Over a year ago

To anyone seeing this answer, part one is NOT part of the code, rather should be done in advance to get all combinations as a string and this can then be used as constant strings, this is of course only a solution if you are ready to have thousands of options in your code...

yoel halb Over a year ago

However there is no need for this complexity, see my answer below.

Patiu Dan · Accepted Answer · 2022-02-25 06:42:48Z

29

type D1 = 0|1;
type D3 = D1|2|3;
type D5 = D3|4|5;
type D9 = D5|6|7|8|9;

type Hours = `${D9}` | `${D1}${D9}` | `2${D3}`;
type Minutes = `${D5}${D9}`;
type Time = `${Hours}:${Minutes}`;

Compact solution aggregating ideas from @bela53 and @yoel halb.

This solution has 2039 enum members for the Time type.

Ts Playground

edited Feb 25, 2022 at 6:42

answered Jul 26, 2021 at 8:18

Patiu Dan

5711 gold badge6 silver badges7 bronze badges

1 Comment

Drak Over a year ago

Could the ${2} for 20-23 hours not be a simple 2? like: '2${D3}' ?

yoel halb · Accepted Answer · 2021-05-12 21:30:56Z

14

Basing on the answer of @bela53 but much more simpler, we can do a very simple solution which is similar to what @Titian but without the drawbacks:

type HourPrefix = '0'|'1'|'2';
type MinutePrefix = HourPrefix | '3'|'4'|'5';
type Digit = MinutePrefix |'6'|'7'|'8'|'9';

type Time = `${HourPrefix | ''}${Digit}:${MinutePrefix}${Digit}`

const validTimes: Time[] = ["00:00","01:30", "23:59", "16:30"]
const invalidTimes: Time[] = ["30:00", "23:60", "0:61"] // all emit error

answered May 12, 2021 at 21:30

yoel halb

12.8k3 gold badges59 silver badges58 bronze badges

3 Comments

daniel-sc Over a year ago

It seems that "29:00" would be matching this type - so this is not 100% correct?!

SgtPooki Over a year ago

it's not difficult to fix that problem @daniel-sc.

Dávid Leblay Over a year ago

But it would make it more complicated Which makes the original answer by @bela53 simpler, in my opinion

Neoheurist · Accepted Answer · 2021-05-28 15:56:51Z

2

WARNING: There is a limit to what TypeScript can handle with @bela53 approach...

Based upon @bela53's answer I attempted the following type definition for an IPv4 address that results in "TS2590: Expression produces a union type that is too complex to represent." This definition caused IntelliJ to consume lots and lots of CPU time when I ignored the TypeScript error and tried to build anyway on the premise that it was still valid (I ended up needing to kill and restart IntelliJ).

type segment = '0'|'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10'|'11'|'12'|'13'|'14'|'15'|'16'|'17'|'18'|'19'|'20'|'21'|'22'|'23'|'24'|'25'|'26'|'27'|'28'|'29'|'30'|'31'|'32'|'33'|'34'|'35'|'36'|'37'|'38'|'39'|'40'|'41'|'42'|'43'|'44'|'45'|'46'|'47'|'48'|'49'|'50'|'51'|'52'|'53'|'54'|'55'|'56'|'57'|'58'|'59'|'60'|'61'|'62'|'63'|'64'|'65'|'66'|'67'|'68'|'69'|'70'|'71'|'72'|'73'|'74'|'75'|'76'|'77'|'78'|'79'|'80'|'81'|'82'|'83'|'84'|'85'|'86'|'87'|'88'|'89'|'90'|'91'|'92'|'93'|'94'|'95'|'96'|'97'|'98'|'99'|'100'|'101'|'102'|'103'|'104'|'105'|'106'|'107'|'108'|'109'|'110'|'111'|'112'|'113'|'114'|'115'|'116'|'117'|'118'|'119'|'120'|'121'|'122'|'123'|'124'|'125'|'126'|'127'|'128'|'129'|'130'|'131'|'132'|'133'|'134'|'135'|'136'|'137'|'138'|'139'|'140'|'141'|'142'|'143'|'144'|'145'|'146'|'147'|'148'|'149'|'150'|'151'|'152'|'153'|'154'|'155'|'156'|'157'|'158'|'159'|'160'|'161'|'162'|'163'|'164'|'165'|'166'|'167'|'168'|'169'|'170'|'171'|'172'|'173'|'174'|'175'|'176'|'177'|'178'|'179'|'180'|'181'|'182'|'183'|'184'|'185'|'186'|'187'|'188'|'189'|'190'|'191'|'192'|'193'|'194'|'195'|'196'|'197'|'198'|'199'|'200'|'201'|'202'|'203'|'204'|'205'|'206'|'207'|'208'|'209'|'210'|'211'|'212'|'213'|'214'|'215'|'216'|'217'|'218'|'219'|'220'|'221'|'222'|'223'|'224'|'225'|'226'|'227'|'228'|'229'|'230'|'231'|'232'|'233'|'234'|'235'|'236'|'237'|'238'|'239'|'240'|'241'|'242'|'243'|'244'|'245'|'246'|'247'|'248'|'249'|'250'|'251'|'252'|'253'|'254'|'255';
export type ipAddress = `${segment}.${segment}.${segment}.${segment}`;

I'm not sure if there is any workaround for this.

answered May 28, 2021 at 15:56

Neoheurist

3,4947 gold badges41 silver badges59 bronze badges

2 Comments

Alex Over a year ago

This is only highlighting an issue, not an answer to the original question. No solution provided here. Could have been a comment

Arlen Beiler Over a year ago

This would result in 2^32 union members, so that's probably why it's too complex. This is a good example of why regex would be useful, but at that point the need for compile time type checking seems pretty slim. It's far more likely that this is going to be a dynamic value, which typescript can't check anyway, and it would be a lot easier to just make a ValidIP class which receives and checks the string or something like that.

Tarwin Stroh-Spijer · Accepted Answer · 2022-07-02 07:23:35Z

2

For MySQL date/time strings

I was trying to make a type that reflected MySQL datetime string values ie "2022-07-31 23:11:54".

Interestingly, you can almost do it currently, but if you add any more specificity it will end up either being any or complain that it can't add more typing. I think there is limit to the # of typings it can create?

type OneToNine = 1|2|3|4|5|6|7|8|9
type ZeroToNine = 0|1|2|3|4|5|6|7|8|9

export type DateTimeType = `${
  `${number}`
}-${
  `0${OneToNine}` | `1${0|1|2}`
}-${
  `0${OneToNine}` | `1${ZeroToNine}` | `2${ZeroToNine}` | `3${0|1}`
} ${
  `0${OneToNine}` | `1${0|OneToNine}` | `2${0|1|2|3}`
}:${number}:${number}`

answered Jul 2, 2022 at 7:23

Tarwin Stroh-Spijer

3531 silver badge12 bronze badges

1 Comment

zoran404 Over a year ago

Yes, there is a limit to how many unions you can have. So something like this '20.22-07-31 23:1.1:5004' would be ok for your example, which makes it kind of useless.

Markus Faatz · Accepted Answer · 2019-05-23 00:40:45Z

I was just looking for a similar feature right now, too!

And I ended up thinking about this: Would'nt it be possible to get this running by setting up a little more complex dev-environment? Maybe you could use a file-watcher to trigger tsc and look up TypeError events to update your *d.ts file.

I mean something like:

export type superRegexType = 'type-1' | 'type-2' | '/type-/';

and as a hook something (rudimental suggestion):

const onTypeError = (err: Error, nameOfTypeSuperRegexType: string) => {
  const myTypesFile = require('fs').readFileSync(`path/to/\*d.ts`) as string;
  const searchFor = `export type ${nameOfTypeSuperRegexType} =`;
  const getDefinition = (inMyTypesFile: string, searchFor: string) => {
    const typeDefinitionString = inMyTypesFile.split(searchFor)[0].split(';')[0] + ';';
    const stringsInThere = typeDefinitionString.split(' | ').map(_str => _str.trim());
    const myRegexStr = stringsInThere.pop();
    return {
      oldTypeDefinitionString: typeDefinitionString,
      stringsInThere,
      myRegexStr,
      myRegex: new RegExp(myRegexStr)
    };
  };
  const myTypeDefinition = getDefinition(myTypesFile, searchFor);

  const shouldDynamicallyAddType = myTypeDefinition.myRegex.exec(err.message);
  if (!shouldDynamicallyAddType) {
    console.log("this is a real TypeError");
    console.error(err);
    return;
  } else {
    const indexInErrMessage = shouldDynamicallyAddType.index;
    const _endIdx = err.message.indexOf('\'');
    const typeToAdd = err.message.slice(indexInErrMessage, _endIdx).trim();
    myTypeDefinition.stringsInThere.push(typeToAdd);
    const updatedTypeDefinitionString = `${searchFor} ${myTypeDefinition.stringsInThere.join(' | ')} ${myTypeDefinition.myRegexStr};`;
    myTypesFile.replace(myTypeDefinition.oldTypeDefinitionString, updatedTypeDefinitionString);
    // --> save that new d.ts and return hopefully watch the lint-error disappearing
  }
}

Maybe this kind of solution would allow you to dynamically add types based on your RegEx on compiletime.

What do you think?

Community · Accepted Answer · 2023-06-12 10:21:08Z

1

Just to complement @bela53's answer, the use const assertions can be used for the type construction.

const hours = [
  '00' , '01', '02', '03', '04', '05', '06', '07', '08',
  '09' , '10', '11', '12', '13', '14', '15', '16', 
  '17' , '18', '19', '20', '21', '22', '23'
] as const

type HH = typeof hours[number]

const minutes = [
  '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', 
  '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', 
  '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', 
  '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', 
  '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', 
  '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'
] as const 

type MM = typeof minutes[number]

type Time = `${HH}:${MM}`

edited Jun 12, 2023 at 10:21

CommunityBot

11 silver badge

answered Oct 24, 2022 at 7:05

rustyBucketBay

4,6444 gold badges27 silver badges60 bronze badges

Comments

Zach · Accepted Answer · 2024-04-04 20:09:41Z

1

Late to the party, but in my opinion the right way is to use asserts / is.

Typescript Doc : assertion functions

Applied to regex :

type HexColor = string;
 
function assertHexColor(value: string): asserts value is HexColor {
    const hexColorRegex = /^#([0-9a-fA-F]{3}){1,2}$/;
    if (!hexColorRegex.test(value)) {
        throw new Error(`"${value}" is not a valid hexadecimal color code.`);
    }
}

This example comes from here

answered Apr 4, 2024 at 20:09

Zach

635 bronze badges

Comments

Iulian Radu · Accepted Answer · 2022-02-01 07:43:34Z

0

My 2 cents


type digit01 = '0' | '1';
type digit03 = digit01 | '2' | '3';
type digit05 = digit03 | '4' | '5';
type digit09 = digit05 | '6' | '7' | '8' | '9';

type minutes = `${digit05}${digit09}`;
type hour = `${digit01 | ''}${digit09}` | `2${digit03}`;

type MarkerTime = `${hour}:${minutes}`;

const ok: Record<string, MarkerTime> = {
  a: '0:00',
  b: '09:00',
  c: '23:59',
};

const notOk: Record<string, MarkerTime> = {
  a: '0-00',
  b: '24:00',
  c: '93.242:942.23',
};

answered Feb 1, 2022 at 7:43

Iulian Radu

814 bronze badges

Collectives™ on Stack Overflow

How to define a regex-matched string type in Typescript?

10 Answers 10

10 Comments

Step 1: define `HH` and `MM` types

Paste following code into your browser web console:

Generated result, which we can use as types in TS:

Step 2: Declare `Time`

Step 3: Some testing

4 Comments

1 Comment

3 Comments

2 Comments

For MySQL date/time strings

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

10 Comments

Step 1: define HH and MM types

Paste following code into your browser web console:

Generated result, which we can use as types in TS:

Step 2: Declare Time

Step 3: Some testing

4 Comments

1 Comment

3 Comments

2 Comments

For MySQL date/time strings

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Step 1: define `HH` and `MM` types

Step 2: Declare `Time`