Warning, file /frameworks/syntax-highlighting/autotests/html/test.tsx.html was not indexed or was modified since last indexation (in which case cross-reference links may be missing, inaccurate or erroneous).
0001 <!DOCTYPE html> 0002 <html><head> 0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 0004 <title>test.tsx</title> 0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (TypeScript React (TSX)) - Theme (Breeze Light)"/> 0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre> 0007 <span style="color:#898887;">// TypeScript React</span> 0008 0009 <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> 0010 <span style="color:#898887;"> * </span><span style="color:#ca60ca;">@url</span><span style="color:#898887;"> https://reactjs.org/ **/</span> 0011 0012 <span style="color:#ff5500;">import</span> React <span style="color:#ff5500;">from</span> <span style="color:#bf0303;">'react'</span><span style="color:#ca60ca;">;</span> 0013 <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> 0014 0015 <span style="font-weight:bold;">function</span> <span style="color:#644a9b;">Story</span>(props) { 0016 <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> 0017 <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> 0018 } 0019 0020 <span style="font-weight:bold;">function</span> 0021 <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> 0022 /* no comment*/ function <span style="font-weight:bold;"><tag/></span> return class var 0x123 <span style="color:#b08000;">&ref;</span> hello() React.Component() 0023 .<span style="font-weight:bold;"><tag/></span> anyWord <span style="font-weight:bold;"><tag/></span> 0024 <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> 0025 <span style="color:#644a9b;font-weight:bold;"></Tag></span> 0026 0027 <span style="font-weight:bold;"><tag1></span> <span style="font-weight:bold;"></tag1></span> 0028 <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> 0029 <span style="color:#644a9b;font-weight:bold;"><Tag$></span> <span style="color:#644a9b;font-weight:bold;"></tag></span> 0030 0031 <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> 0032 0033 <span style="color:#898887;">// Detect Valid tags</span> 0034 0035 <span style="color:#898887;">/* comment */</span> <span style="font-weight:bold;"><tag></tag></span> 0036 { <span style="color:#898887;">/* comment</span> 0037 <span style="color:#898887;"> */</span> <span style="color:#644a9b;font-weight:bold;"><Tag</span> <span style="color:#644a9b;font-weight:bold;">/></span> 0038 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> 0039 <span style="font-weight:bold;">return </span><span style="color:#898887;">/* comment</span> 0040 <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> 0041 <span style="color:#ca60ca;">&& </span><span style="color:#898887;">/*comment*/</span> <span style="color:#644a9b;font-weight:bold;"><Tag/></span> 0042 <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> 0043 0044 <span style="font-weight:bold;"><tag/></span> 0045 { <span style="font-weight:bold;"><hello></span>Hello<span style="font-weight:bold;"></hello></span> } 0046 <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> 0047 [ <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> 0048 <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> 0049 <span style="color:#ca60ca;">&&</span><span style="font-weight:bold;"><tag/></span> <span style="color:#ca60ca;">||</span><span style="font-weight:bold;"><tag/></span> 0050 <span style="font-weight:bold;">return </span><span style="font-weight:bold;"><tag/></span> <span style="color:#ca60ca;">;</span> 0051 <span style="color:#ff5500;">default</span><span style="font-weight:bold;"><tag/></span> <span style="color:#ca60ca;">;</span> 0052 <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> 0053 0054 anyWord<span style="color:#ca60ca;"><</span>noTag<span style="color:#ca60ca;">></span> 0055 anyWord<span style="color:#898887;">/*comment*/</span> <span style="color:#ca60ca;"><</span>noTag<span style="color:#ca60ca;">/</span><span style="color:#ca60ca;">></span> 0056 <span style="color:#ca60ca;">.</span><span style="color:#ca60ca;"><</span>noTag<span style="color:#ca60ca;">></span> 0057 <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> 0058 <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> 0059 0060 <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> 0061 <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> 0062 0063 <span style="color:#898887;">// Tag after ":"</span> 0064 annotation<span style="color:#ca60ca;">: </span><span style="font-weight:bold;"><tag/></span> 0065 annotation<span style="color:#ca60ca;">:</span> text [ <span style="font-weight:bold;"><tag/></span> ] 0066 <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>) 0067 0068 <span style="color:#898887;">// Type assertion in tag</span> 0069 <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> 0070 <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> 0071 <span style="color:#644a9b;font-weight:bold;"><C</span> 0072 <span style="color:#bf0303;text-decoration:underline;"><error</span> <span style="color:#644a9b;font-weight:bold;">/></span> 0073 0074 <span style="color:#898887;">// Non-ASCII tag name & attribute</span> 0075 <span style="color:#644a9b;font-weight:bold;"><日本語></日本語></span><span style="color:#ca60ca;">;</span> 0076 <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> 0077 <span style="color:#644a9b;font-weight:bold;"><aaaa:ñ</span> <span style="color:#644a9b;font-weight:bold;">/></span> 0078 0079 <span style="color:#644a9b;font-weight:bold;"><Namespace.DeepNamespace.Component</span> <span style="color:#644a9b;font-weight:bold;">/></span><span style="color:#ca60ca;">;</span> 0080 <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> 0081 <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> 0082 0083 <span style="font-weight:bold;font-style:italic;">let</span> k1 <span style="color:#ca60ca;">=</span> 0084 <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> 0085 hi hi hi! 0086 <span style="color:#644a9b;font-weight:bold;"></Comp></span><span style="color:#ca60ca;">;</span> 0087 0088 <span style="font-weight:bold;font-style:italic;">let</span> k2 <span style="color:#ca60ca;">=</span> 0089 <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> 0090 <span style="font-weight:bold;"><div></span> My Div <span style="font-weight:bold;"></div></span> 0091 <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> 0092 <span style="color:#644a9b;font-weight:bold;"></Comp></span><span style="color:#ca60ca;">;</span> 0093 0094 <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> 0095 0096 <span style="color:#898887;">// OK</span> 0097 <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> 0098 <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> 0099 <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> 0100 <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> 0101 <span style="color:#898887;">// OK</span> 0102 <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> 0103 <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> 0104 <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> 0105 <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> 0106 0107 <span style="color:#898887;">// Empty tags</span> 0108 hello<span style="color:#ca60ca;"><></span> 0109 hello<span style="color:#ca60ca;"><</span><span style="color:#0057ae;">string</span><span style="color:#ca60ca;">></span> 0110 0111 <span style="font-weight:bold;"><></></span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// no whitespace</span> 0112 <span style="font-weight:bold;">< ></ ></span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// lots of whitespace</span> 0113 <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> 0114 <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> 0115 <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> 0116 <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> 0117 <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> 0118 0119 <span style="color:#898887;">// Tags after substitutions in templates</span> 0120 <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> 0121 <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> 0122 0123 <span style="color:#898887;">// Don't highlight tags within type declaration</span> 0124 <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> 0125 <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> 0126 <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> 0127 <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> 0128 0129 <span style="color:#898887;">// Don't highlight tags within variable declaration</span> 0130 <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> 0131 <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> 0132 <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> 0133 0134 <span style="color:#898887;">// Don't highlight tags within interfaces and classes</span> 0135 <span style="font-weight:bold;font-style:italic;">interface</span> GenericIdentityFn { 0136 <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> 0137 <span style="color:#ca60ca;"><</span>noTag <span style="color:#ca60ca;">/</span><span style="color:#ca60ca;">></span> 0138 } 0139 <span style="font-weight:bold;font-style:italic;">class</span> Handler { 0140 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> 0141 <span style="font-weight:bold;"><tag></span> <span style="font-weight:bold;"></tag></span> 0142 } 0143 0144 <span style="color:#898887;">// Highlight "<T extends" as a type assertion, not as a tag</span> 0145 <span style="color:#898887;">// (the "cast" expression works and isn't supported in the TSX file)</span> 0146 <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>( 0147 arg<span style="color:#ca60ca;">:</span> T 0148 ) <span style="font-weight:bold;">=></span> { 0149 <span style="font-weight:bold;">const</span> a <span style="color:#ca60ca;">=</span> arg 0150 <span style="font-weight:bold;">return</span> a 0151 } 0152 <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> 0153 0154 <span style="color:#898887;">// Check character after tag name, do not highlight invalid tags</span> 0155 <span style="color:#ca60ca;"><</span>noTag <span style="color:#ca60ca;">?</span> 0156 <span style="color:#ca60ca;"><</span>noTag <span style="color:#ca60ca;">,</span> 0157 <span style="color:#ca60ca;"><</span>noTag <span style="color:#898887;">/* comment */</span> <span style="color:#ca60ca;">?</span> 0158 <span style="color:#ca60ca;"><</span>noTag# 0159 <span style="color:#ca60ca;"><</span>noTag<span style="color:#898887;">/*comment*/</span># 0160 0161 <span style="color:#898887;">// Conditionals expressions</span> 0162 <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> 0163 <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> 0164 <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> 0165 0166 <span style="color:#898887;">// Tagged template literals</span> 0167 <span style="color:#644a9b;">tagFunc</span><span style="color:#e31616;">`</span> 0168 <span style="color:#e31616;"> Hello world!</span> 0169 <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> 0170 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> 0171 </pre></body></html>