React PropTypes with typescript template literal Types

Issue

Typescript 4.1 allowing using Template Literal Types which can be used to simulate simple regex patterns, so I could assert certain types of strings and not any string.

Let's say that I have the following type:

type percentStr = `${number}%`;
type relativeOrAbsStr = number | `${number | percentStr}${number | ''}`;

Can be a number, a number-string followed by % and optionally another number after:

example ok: 33(number),'33%','10%330','500%30'
example error: '23'(string-number not followed by %)

However - PropTypes complain if a try to use PT.string as an option because this type cannot be any string, it should be a string of a certain shape.

import PT from 'prop-types';
type myStr:relativeOrAbsStr = PT.oneOfType([PT.string, PT.number])
// Type 'string' is not assignable to type 'relativeOrAbsStr'.

Currently, as a workaround I use as any assertion:

type myStr:myStr:relativeOrAbsStr = PT.oneOfType([PT.string as any, PT.number]),

How do I define an appropriate prop-types type for my template string literal type?

Solution

we can provide custom validator function to check propType:

const pAnchorString = (props, propName, componentName) => {
  if (!/^\d+%?\d*$/.test(props[propName])) {
    return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
  }
};

this will validate against '10','10%','10%10' but not 's','10s' etc

Answered By - Eliav Louski