<p dir="auto">Hello,<br>
I would suggest to add a "regex literal" type to make ensuring that a string data matches a pattern at assigment.</p>
<p dir="auto">As the literal string feature has been added in the latest release, i found very convenient to type my variables with, e.g. for typing my react props (size : "small"| "big" )... On the same idea, it could be convenient to be able to type a variable with a pattern.</p>
<p dir="auto">Example :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    var myString : /\d{3}.*\d{2}/;
    myString=&quot;555hhhhh44&quot; ; //correct
    myString=&quot;55dsds5dss4&quot;; //error"><pre class="notranslate"><code class="notranslate">    var myString : /\d{3}.*\d{2}/;
    myString="555hhhhh44" ; //correct
    myString="55dsds5dss4"; //error
</code></pre></div>
<p dir="auto">In react it could be vey useful for defining a react prop like phone numbers, emails, dates, ...</p>
<p dir="auto">regards<br>
Xavier</p>
<p dir="auto">There are cases, where a property can not just be any string (or a set of strings), but needs to match a pattern.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let fontStyle: 'normal' | 'italic' = 'normal'; // already available in master
let fontColor: /^#([0-9a-f]{3}|[0-9a-f]{6})$/i = '#000'; // my suggestion"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">fontStyle</span>: <span class="pl-s">'normal'</span> <span class="pl-c1">|</span> <span class="pl-s">'italic'</span> <span class="pl-c1">=</span> <span class="pl-s">'normal'</span><span class="pl-kos">;</span> <span class="pl-c">// already available in master</span>
<span class="pl-k">let</span> <span class="pl-s1">fontColor</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span>#<span class="pl-kos">(</span><span class="pl-kos">[</span>0-9a-f<span class="pl-kos">]</span><span class="pl-kos">{</span>3<span class="pl-kos">}</span><span class="pl-c1">|</span><span class="pl-kos">[</span>0-9a-f<span class="pl-kos">]</span><span class="pl-kos">{</span>6<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span>i</span> <span class="pl-c1">=</span> <span class="pl-s">'#000'</span><span class="pl-kos">;</span> <span class="pl-c">// my suggestion</span></pre></div>
<p dir="auto">It's common practice in JavaScript to store color values in css notation, such as in the css style reflection of DOM nodes or various 3rd party libraries.</p>
<p dir="auto">What do you think?</p>