172 lines
30 KiB
HTML
172 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>test.tsx</title>
|
|
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (TypeScript React (TSX)) - Theme (Breeze Light)"/>
|
|
</head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
|
|
<span style="color:#898887">// TypeScript React</span>
|
|
|
|
<span style="color:#898887">/** </span><span style="color:#ca60ca;font-weight:bold">@author</span><span style="color:#898887"> Willy </span><span style="font-weight:bold"><willy@wmail.com></span>
|
|
<span style="color:#898887"> * </span><span style="color:#ca60ca">@url</span><span style="color:#898887"> https://reactjs.org/ **/</span>
|
|
|
|
<span style="color:#ff5500">import</span> React <span style="color:#ff5500">from</span> <span style="color:#bf0303">'react'</span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#ff5500">import</span> { PhotoStory<span style="color:#ca60ca">,</span> VideoStory } <span style="color:#ff5500">from</span> <span style="color:#bf0303">'./stories'</span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="font-weight:bold">function</span> <span style="color:#644a9b">Story</span>(props) {
|
|
<span style="font-weight:bold">const</span> SpecificStory <span style="color:#ca60ca">=</span> components[props<span style="color:#ca60ca">.</span><span style="color:#0057ae">storyType</span>]<span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">return </span><span style="color:#644a9b;font-weight:bold"><SpecificStory</span> <span style="color:#006e28">story</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span> props<span style="color:#ca60ca">.</span><span style="color:#0057ae">story</span> <span style="color:#0057ae">}</span> <span style="color:#006e28">attr2</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"</span><span style="color:#b08000">&ref;</span><span style="color:#bf0303">"</span> <span style="color:#006e28">attr3</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"Hello\n"</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
|
|
}
|
|
|
|
<span style="font-weight:bold">function</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Tag</span> <span style="color:#006e28">attr1</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span> <span style="font-weight:bold"><tag/></span> <span style="font-weight:bold">function</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span> <span style="font-weight:bold">return</span> <span style="font-weight:bold;font-style:italic">class</span> <span style="font-weight:bold">var</span> <span style="color:#b08000">0x123</span> { } <span style="color:#ca60ca">&</span>noRef<span style="color:#ca60ca">;</span> <span style="color:#644a9b">hello</span>() React<span style="color:#ca60ca">.</span><span style="color:#644a9b">Component</span>() <span style="color:#0057ae">}</span> <span style="color:#006e28">attr2</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"</span><span style="color:#b08000">&ref;</span><span style="color:#bf0303">"</span><span style="color:#644a9b;font-weight:bold">></span>
|
|
/* no comment*/ function <span style="font-weight:bold"><tag/></span> return class var 0x123 <span style="color:#b08000">&ref;</span> hello() React.Component()
|
|
.<span style="font-weight:bold"><tag/></span> anyWord <span style="font-weight:bold"><tag/></span>
|
|
<span style="color:#0057ae">{</span> <span style="font-weight:bold">function</span> <span style="color:#ca60ca"><</span>tag<span style="color:#ca60ca">></span> <span style="font-weight:bold">return</span> <span style="font-weight:bold;font-style:italic">class</span> <span style="font-weight:bold">var</span> <span style="color:#b08000">0x123</span> <span style="color:#644a9b">hello</span>() React<span style="color:#ca60ca">.</span><span style="color:#644a9b">Component</span>() <span style="color:#0057ae">}</span>
|
|
<span style="color:#644a9b;font-weight:bold"></Tag></span>
|
|
|
|
<span style="font-weight:bold"><tag1></span> <span style="font-weight:bold"></tag1></span>
|
|
<span style="font-weight:bold"><tag1></span> <span style="font-weight:bold"></</span><span style="color:#bf0303;text-decoration:underline">Tag$</span><span style="font-weight:bold">></span>
|
|
<span style="color:#644a9b;font-weight:bold"><Tag$></span> <span style="color:#644a9b;font-weight:bold"></tag></span>
|
|
|
|
<span style="font-weight:bold"><tag</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr1</span><span style="color:#898887">/*comment*/</span><span style="color:#ca60ca">=</span> <span style="color:#898887">/*comment*/</span><span style="color:#bf0303">"value"</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr2</span> <span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr3</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">'a'</span> <span style="color:#006e28">key</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">key2</span> <span style="font-weight:bold">/></span>
|
|
|
|
<span style="color:#898887">// Detect Valid tags</span>
|
|
|
|
<span style="color:#898887">/* comment */</span> <span style="font-weight:bold"><tag></tag></span>
|
|
{ <span style="color:#898887">/* comment</span>
|
|
<span style="color:#898887"> */</span> <span style="color:#644a9b;font-weight:bold"><Tag</span> <span style="color:#644a9b;font-weight:bold">/></span>
|
|
word <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span> <span style="color:#ca60ca">.</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span> } <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
<span style="font-weight:bold">return </span><span style="color:#898887">/* comment</span>
|
|
<span style="color:#898887"> multiline */</span> <span style="font-weight:bold"><tag/></span> <span style="color:#898887">/* comment */</span> <span style="color:#644a9b;font-weight:bold"><Tag/></span>
|
|
<span style="color:#ca60ca">&& </span><span style="color:#898887">/*comment*/</span> <span style="color:#644a9b;font-weight:bold"><Tag/></span>
|
|
<span style="color:#ca60ca">&</span> <span style="color:#898887">/*comment*/</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
|
|
<span style="font-weight:bold"><tag/></span>
|
|
{ <span style="font-weight:bold"><hello></span>Hello<span style="font-weight:bold"></hello></span> }
|
|
<span style="color:#ca60ca">?</span><span style="color:#644a9b;font-weight:bold"><Tag</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
|
|
[ <span style="font-weight:bold"><tag</span> <span style="font-weight:bold">/></span> ( <span style="font-weight:bold"><tag</span> <span style="font-weight:bold">/></span>
|
|
<span style="color:#ca60ca">,</span><span style="color:#644a9b;font-weight:bold"><Tag/></span> <span style="color:#ca60ca">=</span><span style="color:#644a9b;font-weight:bold"><Tag/></span>
|
|
<span style="color:#ca60ca">&&</span><span style="font-weight:bold"><tag/></span> <span style="color:#ca60ca">||</span><span style="font-weight:bold"><tag/></span>
|
|
<span style="font-weight:bold">return </span><span style="font-weight:bold"><tag/></span> <span style="color:#ca60ca">;</span>
|
|
<span style="color:#ff5500">default</span><span style="font-weight:bold"><tag/></span> <span style="color:#ca60ca">;</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Tag></span> <span style="font-weight:bold"><tag></span> <span style="color:#644a9b;font-weight:bold"><tag$/></span> <span style="font-weight:bold"></tag></span> return <span style="color:#644a9b;font-weight:bold"></Tag></span>
|
|
|
|
anyWord<span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">></span>
|
|
anyWord<span style="color:#898887">/*comment*/</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
<span style="color:#ca60ca">.</span><span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">></span>
|
|
<span style="color:#ca60ca">&</span><span style="color:#ca60ca"><</span>notag<span style="color:#ca60ca">></span> <span style="color:#ca60ca">|</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
<span style="color:#ca60ca">%</span> <span style="color:#898887">/* comment*/</span> <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
|
|
<span style="color:#898887">// </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#898887">: Fix this (comment before the tag name):</span>
|
|
<span style="font-weight:bold">var</span> x <span style="color:#ca60ca">=</span> <span style="color:#ca60ca"><</span><span style="color:#898887">/**/</span>div<span style="color:#ca60ca">></</span>div<span style="color:#ca60ca">>;</span>
|
|
|
|
<span style="color:#898887">// Tag after ":"</span>
|
|
annotation<span style="color:#ca60ca">: </span><span style="font-weight:bold"><tag/></span>
|
|
annotation<span style="color:#ca60ca">:</span> text [ <span style="font-weight:bold"><tag/></span> ]
|
|
<span style="color:#644a9b;font-weight:bold">console</span><span style="color:#ca60ca">.</span><span style="color:#644a9b;font-style:italic">log</span>(<span style="color:#bf0303">"hello"</span>)
|
|
|
|
<span style="color:#898887">// Type assertion in tag</span>
|
|
<span style="color:#644a9b;font-weight:bold"><C</span><span style="color:#ca60ca"><</span><span style="color:#644a9b;font-weight:bold">number</span><span style="color:#ca60ca">></span><span style="color:#644a9b;font-weight:bold">/></span>
|
|
<span style="color:#644a9b;font-weight:bold"><C</span><span style="color:#ca60ca"><</span><span style="color:#644a9b;font-weight:bold">number</span><span style="color:#ca60ca">></span><span style="color:#644a9b;font-weight:bold">></span> <span style="color:#644a9b;font-weight:bold"></C></span>
|
|
<span style="color:#644a9b;font-weight:bold"><C</span>
|
|
<span style="color:#bf0303;text-decoration:underline"><error</span> <span style="color:#644a9b;font-weight:bold">/></span>
|
|
|
|
<span style="color:#898887">// Non-ASCII tag name & attribute</span>
|
|
<span style="color:#644a9b;font-weight:bold"><日本語></日本語></span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Component</span> <span style="color:#006e28">本本:本-本</span> <span style="color:#006e28">aa本:本</span> <span style="color:#006e28">aa:aa</span> <span style="color:#644a9b;font-weight:bold">/></span>
|
|
<span style="color:#644a9b;font-weight:bold"><aaaa:ñ</span> <span style="color:#644a9b;font-weight:bold">/></span>
|
|
|
|
<span style="color:#644a9b;font-weight:bold"><Namespace.DeepNamespace.Component</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Component</span> <span style="color:#0057ae">{</span> <span style="color:#ca60ca">...</span> x <span style="color:#0057ae">}</span> <span style="color:#006e28">y</span>
|
|
<span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">2</span> <span style="color:#0057ae">}</span> <span style="color:#006e28">z</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="font-weight:bold;font-style:italic">let</span> k1 <span style="color:#ca60ca">=</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Comp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span> <span style="color:#0057ae">{</span><span style="color:#ca60ca">...</span>o<span style="color:#0057ae">}</span> <span style="color:#644a9b;font-weight:bold">></span>
|
|
hi hi hi!
|
|
<span style="color:#644a9b;font-weight:bold"></Comp></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="font-weight:bold;font-style:italic">let</span> k2 <span style="color:#ca60ca">=</span>
|
|
<span style="color:#644a9b;font-weight:bold"><Comp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span><span style="color:#644a9b;font-weight:bold">></span>
|
|
<span style="font-weight:bold"><div></span> My Div <span style="font-weight:bold"></div></span>
|
|
<span style="color:#0057ae">{</span>(name<span style="color:#ca60ca">:</span> <span style="color:#0057ae">string</span>) <span style="font-weight:bold">=> </span><span style="font-weight:bold"><div></span> My name <span style="color:#0057ae">{</span>name<span style="color:#0057ae">}</span> <span style="font-weight:bold"></div></span><span style="color:#0057ae">}</span>
|
|
<span style="color:#644a9b;font-weight:bold"></Comp></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="font-weight:bold;font-style:italic">let</span> k3 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><GenericComponent</span> <span style="color:#006e28">initialValues</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span>{ x<span style="color:#ca60ca">:</span> <span style="color:#bf0303">"y"</span> }<span style="color:#0057ae">}</span> <span style="color:#006e28">nextValues</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span>a <span style="font-weight:bold">=></span> ({ x<span style="color:#ca60ca">:</span> a<span style="color:#ca60ca">.</span><span style="color:#0057ae">x</span> })<span style="color:#0057ae">}</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// No Error</span>
|
|
|
|
<span style="color:#898887">// OK</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k1 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><Comp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span><span style="color:#644a9b;font-weight:bold">></span><span style="font-weight:bold"><></></span><span style="color:#644a9b;font-weight:bold"><Button</span> <span style="color:#644a9b;font-weight:bold">/><AnotherButton</span> <span style="color:#644a9b;font-weight:bold">/></Comp></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k2 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><Comp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span><span style="color:#644a9b;font-weight:bold">></span><span style="font-weight:bold"><></span><span style="color:#644a9b;font-weight:bold"><Button</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="font-weight:bold"></></span><span style="color:#644a9b;font-weight:bold"><AnotherButton</span> <span style="color:#644a9b;font-weight:bold">/></Comp></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k3 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><Comp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span><span style="color:#644a9b;font-weight:bold">></span><span style="font-weight:bold"><></span><span style="color:#644a9b;font-weight:bold"><Button</span> <span style="color:#644a9b;font-weight:bold">/><AnotherButton</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="font-weight:bold"></></span><span style="color:#644a9b;font-weight:bold"></Comp></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k4 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><SingleChildComp</span> <span style="color:#006e28">a</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">10</span><span style="color:#0057ae">}</span> <span style="color:#006e28">b</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"hi"</span><span style="color:#644a9b;font-weight:bold">></span><span style="font-weight:bold"><></span><span style="color:#644a9b;font-weight:bold"><Button</span> <span style="color:#644a9b;font-weight:bold">/><AnotherButton</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="font-weight:bold"></></span><span style="color:#644a9b;font-weight:bold"></SingleChildComp></span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#898887">// OK</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k1 <span style="color:#ca60ca">= </span><span style="font-weight:bold"><div></span> <span style="font-weight:bold"><h2></span> Hello <span style="font-weight:bold"></h2></span> <span style="font-weight:bold"><h1></span> world <span style="font-weight:bold"></h1></div></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k2 <span style="color:#ca60ca">= </span><span style="font-weight:bold"><div></span> <span style="font-weight:bold"><h2></span> Hello <span style="font-weight:bold"></h2></span> <span style="color:#0057ae">{</span>(user<span style="color:#ca60ca">:</span> <span style="color:#0057ae">any</span>) <span style="font-weight:bold">=> </span><span style="font-weight:bold"><h2></span><span style="color:#0057ae">{</span>user<span style="color:#ca60ca">.</span><span style="color:#0057ae">name</span><span style="color:#0057ae">}</span><span style="font-weight:bold"></h2></span><span style="color:#0057ae">}</span><span style="font-weight:bold"></div></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k3 <span style="color:#ca60ca">= </span><span style="font-weight:bold"><div></span> <span style="color:#0057ae">{</span><span style="color:#b08000">1</span><span style="color:#0057ae">}</span> <span style="color:#0057ae">{</span><span style="color:#bf0303">"That is a number"</span><span style="color:#0057ae">}</span> <span style="font-weight:bold"></div></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k4 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><Button></span> <span style="font-weight:bold"><h2></span> Hello <span style="font-weight:bold"></h2></span> <span style="color:#644a9b;font-weight:bold"></Button></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Empty tags</span>
|
|
hello<span style="color:#ca60ca"><></span>
|
|
hello<span style="color:#ca60ca"><</span><span style="color:#0057ae">string</span><span style="color:#ca60ca">></span>
|
|
|
|
<span style="font-weight:bold"><></></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// no whitespace</span>
|
|
<span style="font-weight:bold">< ></ ></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// lots of whitespace</span>
|
|
<span style="color:#ca60ca"><</span> <span style="color:#898887">/*starting wrap*/</span> <span style="color:#ca60ca">></</span> <span style="color:#898887">/*ending wrap*/</span><span style="color:#ca60ca">>;</span> <span style="color:#898887">// comments in the tags</span>
|
|
<span style="font-weight:bold"><></span>hi<span style="font-weight:bold"></></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// text inside</span>
|
|
<span style="font-weight:bold"><><span></span>hi<span style="font-weight:bold"></span><div></span>bye<span style="font-weight:bold"></div></></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// children</span>
|
|
<span style="font-weight:bold"><><span></span>1<span style="font-weight:bold"></span><><span></span>2.1<span style="font-weight:bold"></span><span></span>2.2<span style="font-weight:bold"></span></><span></span>3<span style="font-weight:bold"></span></></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// nested fragments</span>
|
|
<span style="font-weight:bold"><></span>#<span style="font-weight:bold"></></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// # would cause scanning error if not in jsxtext</span>
|
|
|
|
<span style="color:#898887">// Tags after substitutions in templates</span>
|
|
<span style="color:#e31616">`aaa</span><span style="color:#3daee9">${</span><span style="font-weight:bold"><tag></tag></span><span style="color:#898887">//comment</span>
|
|
<span style="color:#898887">/*comment*/</span><span style="color:#644a9b;font-weight:bold"><A/></span><span style="color:#3daee9">}</span><span style="color:#e31616">`</span>
|
|
|
|
<span style="color:#898887">// Don't highlight tags within type declaration</span>
|
|
<span style="font-weight:bold;font-style:italic">type</span> T12 <span style="color:#ca60ca">=</span> <span style="color:#644a9b;font-weight:bold">ReturnType</span><span style="color:#ca60ca"><</span>(<span style="color:#ca60ca"><</span>T<span style="color:#ca60ca">></span>() <span style="font-weight:bold">=></span> T)<span style="color:#ca60ca">></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">type</span> T13 <span style="color:#ca60ca">=</span> <span style="color:#644a9b;font-weight:bold">ReturnType</span><span style="color:#ca60ca"><</span>(<span style="color:#ca60ca"><</span>T <span style="font-weight:bold;font-style:italic">extends</span> U<span style="color:#ca60ca">,</span> U <span style="font-weight:bold;font-style:italic">extends</span> <span style="color:#0057ae">number</span>[]<span style="color:#ca60ca">></span>() <span style="font-weight:bold">=></span> T)<span style="color:#ca60ca">></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">type</span> T14 <span style="color:#ca60ca">=</span> <span style="color:#644a9b;font-weight:bold">ReturnType</span><span style="color:#ca60ca"><</span><span style="font-weight:bold">typeof</span> f1<span style="color:#ca60ca">></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">type</span> T15 <span style="color:#ca60ca">=</span> <span style="color:#644a9b;font-weight:bold">ReturnType</span><span style="color:#ca60ca"><</span>(s<span style="color:#ca60ca">:</span> <span style="color:#0057ae">string</span>) <span style="font-weight:bold">=></span> <span style="color:#0057ae">void</span><span style="color:#ca60ca">></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Don't highlight tags within variable declaration</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> myIdentity<span style="color:#ca60ca">:</span> <span style="color:#ca60ca"><</span>T<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> T) <span style="font-weight:bold">=></span> T <span style="color:#ca60ca"><</span>noTag<span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span> <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold"><Tag</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">var</span> myIdentity<span style="color:#ca60ca">:</span> <span style="color:#ca60ca"><</span>U<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> U) <span style="font-weight:bold">=></span> U <span style="color:#ca60ca">=</span> identity<span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">const</span> myIdentity<span style="color:#ca60ca">:</span> {<span style="color:#ca60ca"><</span>T<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T} <span style="color:#ca60ca">=</span> identity<span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Don't highlight tags within interfaces and classes</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> GenericIdentityFn {
|
|
<span style="color:#ca60ca"><</span>T<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T<span style="color:#ca60ca">;</span>
|
|
<span style="color:#ca60ca"><</span>noTag <span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span>
|
|
}
|
|
<span style="font-weight:bold;font-style:italic">class</span> Handler {
|
|
info<span style="color:#ca60ca">:</span> <span style="color:#ca60ca"><</span>T<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T <span style="color:#ca60ca"><</span>noTag <span style="color:#ca60ca">/</span><span style="color:#ca60ca">></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold"><tag></span> <span style="font-weight:bold"></tag></span>
|
|
}
|
|
|
|
<span style="color:#898887">// Highlight "<T extends" as a type assertion, not as a tag</span>
|
|
<span style="color:#898887">// (the "cast" expression works and isn't supported in the TSX file)</span>
|
|
<span style="font-weight:bold">const</span> goodHighlighting <span style="color:#ca60ca">= <</span>T <span style="font-weight:bold;font-style:italic">extends</span> I<span style="color:#ca60ca">></span>(
|
|
arg<span style="color:#ca60ca">:</span> T
|
|
) <span style="font-weight:bold">=></span> {
|
|
<span style="font-weight:bold">const</span> a <span style="color:#ca60ca">=</span> arg
|
|
<span style="font-weight:bold">return</span> a
|
|
}
|
|
<span style="font-weight:bold"><tag></span> text <span style="color:#644a9b;font-weight:bold"><T</span> <span style="color:#006e28">extends</span> <span style="color:#006e28">I</span><span style="color:#644a9b;font-weight:bold">/></span> <span style="font-weight:bold"></tag></span> <span style="color:#898887">// Here "<T extends I/>" is a tag</span>
|
|
|
|
<span style="color:#898887">// Check character after tag name, do not highlight invalid tags</span>
|
|
<span style="color:#ca60ca"><</span>noTag <span style="color:#ca60ca">?</span>
|
|
<span style="color:#ca60ca"><</span>noTag <span style="color:#ca60ca">,</span>
|
|
<span style="color:#ca60ca"><</span>noTag <span style="color:#898887">/* comment */</span> <span style="color:#ca60ca">?</span>
|
|
<span style="color:#ca60ca"><</span>noTag#
|
|
<span style="color:#ca60ca"><</span>noTag<span style="color:#898887">/*comment*/</span>#
|
|
|
|
<span style="color:#898887">// Conditionals expressions</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> y <span style="color:#ca60ca">=</span> foo <span style="color:#ca60ca">==</span> <span style="font-weight:bold">null</span> <span style="color:#ca60ca">?</span> <span style="font-weight:bold">null</span> <span style="color:#ca60ca">:</span> <span style="color:#644a9b;font-weight:bold"><Tag/></span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> x <span style="color:#ca60ca">=</span> (foo <span style="color:#ca60ca">===</span> <span style="font-weight:bold">null</span> <span style="color:#ca60ca">||</span> foo <span style="color:#ca60ca">===</span> <span style="font-weight:bold">undefined</span>) <span style="color:#ca60ca">?</span>
|
|
<span style="font-weight:bold">undefined</span> <span style="color:#ca60ca">:</span><span style="font-weight:bold"><tag></span>hello<span style="font-weight:bold"></tag></span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Tagged template literals</span>
|
|
<span style="color:#644a9b">tagFunc</span><span style="color:#e31616">`</span>
|
|
<span style="color:#e31616"> Hello world!</span>
|
|
<span style="color:#e31616"> </span><span style="color:#3daee9">${</span> <span style="color:#644a9b;font-weight:bold"><Tag</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span> <span style="color:#b08000">22</span> <span style="color:#ca60ca">+</span> <span style="color:#bf0303">"11"</span> <span style="color:#3daee9">}</span><span style="color:#e31616">`</span><span style="color:#ca60ca">;</span>
|
|
obj<span style="color:#ca60ca">.</span><span style="color:#0057ae">something</span><span style="color:#ca60ca">.</span><span style="color:#644a9b">tagFunc</span><span style="color:#e31616">`Setting </span><span style="color:#3daee9">${</span>setting<span style="color:#3daee9">}</span><span style="color:#e31616"> is </span><span style="color:#3daee9">${</span>value<span style="color:#3daee9">}</span><span style="color:#e31616">!`</span><span style="color:#ca60ca">;</span>
|
|
</pre></body></html>
|