A grab bag of feedback from the internet

packages/documentation/copy/en/handbook-v1/Basic Types.md

@@ -16,7 +16,7 @@ The most basic datatype is the simple true/false value, which JavaScript and Typ
 let isDone: boolean = false;
 ```
 
-##   Number
+## Number
 
 As in JavaScript, all numbers in TypeScript are either floating point values or BigIntegers.
 These floating point numbers get the type `number`, while BigIntegers get the type `bigint`.
@@ -383,27 +383,26 @@ You may have noticed that so far, we've been using the `let` keyword instead of
 The `let` keyword is actually a newer JavaScript construct that TypeScript makes available.
 You can read in the Handbook Reference on [Variable Declarations](/docs/handbook/variable-declarations.html) more about how `let` and `const` fix a lot of the problems with var.
 
-
 ## About `Number`, `String`, `Boolean`, `Symbol` and `Object`
 
 It can be tempting to think that the types `Number`, `String`, `Boolean`, `Symbol`, or `Object` are the same as the lowercase versions recommended above.
 These types do not refer to the language primitives however, and almost never should be used as a type.
 
 ```ts twoslash
 // @errors: 2339
-function reverse(s: String): String { 
-  return s.split("").reverse().join("")
+function reverse(s: String): String {
+  return s.split("").reverse().join("");
 }
 
-reverse("hello world")
+reverse("hello world");
 ```
 
 Instead, use the types `number`, `string`, `boolean`, `object` and `symbol`.
 
 ```ts twoslash
-function reverse(s: string): string { 
-  return s.split("").reverse().join("") 
+function reverse(s: string): string {
+  return s.split("").reverse().join("");
 }
 
-reverse("hello world")
+reverse("hello world");
 ```

packages/typescriptlang-org/src/components/index/MigrationStories.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 
 const ReverseRow = (props: { children: any }) => <div className="row reverse">{props.children}</div>
 
-const Slack = ({ firstRun }: { firstRun?: boolean }) => (
+const Slack = () => (
   <ReverseRow>
     <div className="slack small_full_width">
       <div className='illustration'>
@@ -29,7 +29,7 @@ const Slack = ({ firstRun }: { firstRun?: boolean }) => (
         </div>
       </div>
 
-      <div className="copy" style={{ opacity: firstRun ? 1 : 0 }}>
+      <div className="copy">
         <svg width="220" height="56" viewBox="0 0 220 56" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M70.5269 44.1002L73.2567 37.7606C76.2068 39.9619 80.1254 41.1065 84.0001 41.1065C86.8621 41.1065 88.6673 40.0059 88.6673 38.3329C88.6233 33.6663 71.5396 37.3204 71.4075 25.6097C71.3634 19.6663 76.6471 15.0876 84.1322 15.0876C88.5792 15.0876 93.0263 16.1883 96.1965 18.6977L93.6427 25.1694C90.7367 23.3204 87.1262 21.9996 83.6919 21.9996C81.3583 21.9996 79.8172 23.1002 79.8172 24.509C79.8613 29.0877 97.0771 26.5782 97.2532 37.7606C97.2532 43.8361 92.1017 48.1065 84.7046 48.1065C79.2889 48.1065 74.3135 46.8298 70.5269 44.1002Z" fill="white" />
           <path d="M175.275 35.4713C173.91 37.8487 171.356 39.4776 168.406 39.4776C164.047 39.4776 160.525 35.9556 160.525 31.5971C160.525 27.2386 164.047 23.7166 168.406 23.7166C171.356 23.7166 173.91 25.3455 175.275 27.7229L182.804 23.5405C179.986 18.5216 174.57 15.0876 168.406 15.0876C159.292 15.0876 151.895 22.4839 151.895 31.5971C151.895 40.7103 159.292 48.1065 168.406 48.1065C174.614 48.1065 179.986 44.7166 182.804 39.6537L175.275 35.4713Z" fill="white" />
@@ -80,7 +80,7 @@ const AirBnB = () => (
         </div>
       </div>
 
-      <div className="copy" style={{ opacity: 0 }}>
+      <div className="copy">
         <svg width="221" height="69" viewBox="0 0 221 69" fill="none" xmlns="http://www.w3.org/2000/svg">
           <g clipPath="url(#clip0)">
             <path d="M116.472 17.3363C116.472 19.8228 114.469 21.8258 111.984 21.8258C109.499 21.8258 107.496 19.8228 107.496 17.3363C107.496 14.8499 109.43 12.8468 111.984 12.8468C114.539 12.9159 116.472 14.9189 116.472 17.3363ZM97.9687 26.3844C97.9687 26.7988 97.9687 27.4895 97.9687 27.4895C97.9687 27.4895 95.8284 24.7267 91.2717 24.7267C83.7463 24.7267 77.8778 30.4595 77.8778 38.4024C77.8778 46.2763 83.6772 52.0781 91.2717 52.0781C95.8975 52.0781 97.9687 49.2462 97.9687 49.2462V50.4204C97.9687 50.973 98.383 51.3874 98.9353 51.3874H104.528V25.4174C104.528 25.4174 99.4186 25.4174 98.9353 25.4174C98.383 25.4174 97.9687 25.9009 97.9687 26.3844ZM97.9687 43.03C96.9331 44.5495 94.8619 45.8619 92.3764 45.8619C87.9578 45.8619 84.5748 43.0991 84.5748 38.4024C84.5748 33.7057 87.9578 30.9429 92.3764 30.9429C94.7928 30.9429 97.0021 32.3243 97.9687 33.7748V43.03ZM108.67 25.4174H115.298V51.3874H108.67V25.4174ZM207.675 24.7267C203.118 24.7267 200.978 27.4895 200.978 27.4895V12.9159H194.35V51.3874C194.35 51.3874 199.459 51.3874 199.942 51.3874C200.494 51.3874 200.909 50.9039 200.909 50.4204V49.2462C200.909 49.2462 203.049 52.0781 207.606 52.0781C215.131 52.0781 221 46.2763 221 38.4024C221 30.5285 215.131 24.7267 207.675 24.7267ZM206.57 45.7928C204.016 45.7928 202.013 44.4805 200.978 42.961V33.7057C202.013 32.3243 204.223 30.8739 206.57 30.8739C210.989 30.8739 214.372 33.6366 214.372 38.3333C214.372 43.03 210.989 45.7928 206.57 45.7928ZM190.898 35.985V51.4565H184.27V36.7447C184.27 32.4625 182.889 30.7357 179.161 30.7357C177.159 30.7357 175.087 31.7718 173.776 33.2913V51.3874H167.148V25.4174H172.395C172.947 25.4174 173.361 25.9009 173.361 26.3844V27.4895C175.295 25.4865 177.849 24.7267 180.404 24.7267C183.303 24.7267 185.72 25.5556 187.653 27.2132C190 29.1471 190.898 31.6336 190.898 35.985ZM151.061 24.7267C146.504 24.7267 144.364 27.4895 144.364 27.4895V12.9159H137.736V51.3874C137.736 51.3874 142.845 51.3874 143.329 51.3874C143.881 51.3874 144.295 50.9039 144.295 50.4204V49.2462C144.295 49.2462 146.435 52.0781 150.992 52.0781C158.518 52.0781 164.386 46.2763 164.386 38.4024C164.455 30.5285 158.587 24.7267 151.061 24.7267ZM149.957 45.7928C147.402 45.7928 145.4 44.4805 144.364 42.961V33.7057C145.4 32.3243 147.609 30.8739 149.957 30.8739C154.375 30.8739 157.758 33.6366 157.758 38.3333C157.758 43.03 154.375 45.7928 149.957 45.7928ZM132.006 24.7267C134.008 24.7267 135.044 25.0721 135.044 25.0721V31.2192C135.044 31.2192 129.52 29.3544 126.068 33.2913V51.4565H119.44V25.4174C119.44 25.4174 124.549 25.4174 125.033 25.4174C125.585 25.4174 125.999 25.9009 125.999 26.3844V27.4895C127.242 26.039 129.935 24.7267 132.006 24.7267ZM63.1721 49.039C62.8269 48.2102 62.4817 47.3123 62.1365 46.5526C61.5842 45.3093 61.0318 44.1351 60.5485 43.03L60.4795 42.961C55.7157 32.6006 50.6066 22.1021 45.2215 11.7417L45.0143 11.3273C44.462 10.2913 43.9097 9.18619 43.3574 8.08108C42.6669 6.83784 41.9765 5.52553 40.8719 4.28228C38.6626 1.51952 35.4867 0 32.1037 0C28.6516 0 25.5448 1.51952 23.2664 4.14414C22.2308 5.38739 21.4714 6.6997 20.781 7.94294C20.2286 9.04805 19.6763 10.1532 19.124 11.1892L18.9169 11.6036C13.6007 21.964 8.42264 32.4625 3.65882 42.8228L3.58978 42.961C3.10649 44.0661 2.55416 45.2402 2.00184 46.4835C1.65663 47.2432 1.31143 48.0721 0.966223 48.97C0.0686908 51.5255 -0.207473 53.9429 0.137732 56.4294C0.897182 61.6096 4.34923 65.961 9.11305 67.8949C10.9081 68.6547 12.7722 69 14.7054 69C15.2577 69 15.9481 68.9309 16.5004 68.8619C18.7788 68.5856 21.1262 67.8258 23.4045 66.5135C26.2352 64.9249 28.9278 62.6456 31.9656 59.3303C35.0034 62.6456 37.765 64.9249 40.5267 66.5135C42.805 67.8258 45.1524 68.5856 47.4308 68.8619C47.9831 68.9309 48.6735 69 49.2258 69C51.159 69 53.0921 68.6547 54.8181 67.8949C59.651 65.961 63.034 61.5405 63.7935 56.4294C64.3458 54.012 64.0696 51.5946 63.1721 49.039ZM32.0346 52.6306C28.3064 47.9339 25.89 43.5135 25.0615 39.7838C24.7163 38.1952 24.6473 36.8138 24.8544 35.5706C24.9925 34.4655 25.4067 33.4985 25.959 32.6697C27.2708 30.8048 29.4801 29.6306 32.0346 29.6306C34.5892 29.6306 36.8675 30.7357 38.1102 32.6697C38.6626 33.4985 39.0768 34.4655 39.2149 35.5706C39.422 36.8138 39.353 38.2643 39.0078 39.7838C38.1793 43.4444 35.7629 47.8649 32.0346 52.6306ZM59.582 55.8769C59.0987 59.4685 56.6822 62.5766 53.2992 63.958C51.6423 64.6486 49.8472 64.8559 48.0521 64.6486C46.3261 64.4414 44.6001 63.8889 42.805 62.8529C40.3196 61.4715 37.8341 59.3303 34.9344 56.1532C39.4911 50.5586 42.2527 45.4474 43.2883 40.8889C43.7716 38.7477 43.8406 36.8138 43.6335 35.018C43.3574 33.2913 42.736 31.7027 41.7694 30.3213C39.6291 27.2132 36.039 25.4174 32.0346 25.4174C28.0303 25.4174 24.4401 27.2823 22.2999 30.3213C21.3333 31.7027 20.7119 33.2913 20.4358 35.018C20.1596 36.8138 20.2286 38.8168 20.781 40.8889C21.8166 45.4474 24.6473 50.6276 29.1349 56.2222C26.3042 59.3994 23.7497 61.5405 21.2643 62.9219C19.4692 63.958 17.7432 64.5105 16.0171 64.7177C14.153 64.9249 12.358 64.6486 10.77 64.027C7.38703 62.6456 4.9706 59.5375 4.48731 55.9459C4.28019 54.2192 4.41827 52.4925 5.10868 50.5586C5.3158 49.8679 5.66101 49.1772 6.00621 48.3483C6.4895 47.2432 7.04182 46.0691 7.59415 44.8949L7.66319 44.7568C12.427 34.4655 17.536 23.967 22.8522 13.7447L23.0593 13.3303C23.6116 12.2943 24.164 11.1892 24.7163 10.1532C25.2686 9.04805 25.89 8.01201 26.6494 7.11411C28.0993 5.45646 30.0325 4.55856 32.1727 4.55856C34.313 4.55856 36.2461 5.45646 37.696 7.11411C38.4554 8.01201 39.0768 9.04805 39.6291 10.1532C40.1815 11.1892 40.7338 12.2943 41.2861 13.3303L41.4932 13.7447C46.7404 24.036 51.8494 34.5345 56.6132 44.8258V44.8949C57.1655 46 57.6488 47.2432 58.2011 48.3483C58.5464 49.1772 58.8916 49.8679 59.0987 50.5586C59.651 52.3544 59.8581 54.0811 59.582 55.8769Z" fill="white" />
@@ -123,7 +123,7 @@ const Google = () => (
         </div>
       </div>
 
-      <div className="copy" style={{ opacity: 0 }}>
+      <div className="copy">
         <svg width="175" height="59" viewBox="0 0 175 59" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M74.4716 30.2568C74.4716 38.4463 68.0442 44.481 60.1563 44.481C52.2685 44.481 45.8411 38.4463 45.8411 30.2568C45.8411 22.0097 52.2685 16.0327 60.1563 16.0327C68.0442 16.0327 74.4716 22.0097 74.4716 30.2568ZM68.205 30.2568C68.205 25.1392 64.4798 21.6377 60.1563 21.6377C55.8328 21.6377 52.1076 25.1392 52.1076 30.2568C52.1076 35.3232 55.8328 38.876 60.1563 38.876C64.4798 38.876 68.205 35.3167 68.205 30.2568Z" fill="white" />
           <path d="M105.354 30.2568C105.354 38.4463 98.9265 44.481 91.0386 44.481C83.1508 44.481 76.7234 38.4463 76.7234 30.2568C76.7234 22.0161 83.1508 16.0327 91.0386 16.0327C98.9265 16.0327 105.354 22.0097 105.354 30.2568ZM99.0874 30.2568C99.0874 25.1392 95.3622 21.6377 91.0386 21.6377C86.7151 21.6377 82.9899 25.1392 82.9899 30.2568C82.9899 35.3232 86.7151 38.876 91.0386 38.876C95.3622 38.876 99.0874 35.3167 99.0874 30.2568Z" fill="white" />
@@ -282,8 +282,6 @@ export const OSS = () => (
   </ReverseRow >
 )
 
-let firstRun = true
-
 export const MigrationStories = () => {
   const i = createInternational<typeof indexCopy>(useIntl())
 
@@ -318,14 +316,6 @@ export const MigrationStories = () => {
 
     const titleHeading = document.getElementById("migration_title")! as HTMLHeadingElement
     titleHeading.textContent = title
-
-    setTimeout(() => {
-      const copy = document.querySelector("#index .copy")! as HTMLDivElement
-      if (copy) {
-        copy.style.opacity = "1"
-      }
-
-    }, 100)
   }
 
   const prev = (e) => {
@@ -359,7 +349,7 @@ export const MigrationStories = () => {
       <div className="slides">
         {{
           0: (
-            <Slack firstRun={firstRun} />
+            <Slack />
           ),
           1: (
             <AirBnB />
@@ -371,7 +361,6 @@ export const MigrationStories = () => {
             <OSS />
           )
         }[index]}
-        {firstRun = false}
       </div>
     </div >
   )

packages/typescriptlang-org/src/components/index/twoslash/generated/cfa.tsx

@@ -9,6 +9,6 @@ const innerHTML = `<div class="language-id">tsx</div><div class='code-container'
 <span style="color: #D4D4D4">  <data-lsp lsp='var console: Console'>console</data-lsp>.<data-lsp lsp='(method) Console.log(...data: any[]): void'>log</data-lsp>(<data-lsp lsp='const jon: {&amp;#13;    name: string;&amp;#13;}'>jon</data-lsp>)</span>
 <span style="color: #D4D4D4">} </span><span style="color: #569CD6">else</span><span style="color: #D4D4D4"> {</span>
 <span style="color: #D4D4D4">  </span><span style="color: #569CD6">throw</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> <data-lsp lsp='var Error: ErrorConstructor&amp;#13;new (message?: string | undefined) => Error'>Error</data-lsp>(</span><span style="color: #CE9178">&apos;Could not find user "Jon"&apos;</span><span style="color: #D4D4D4">)</span>
-<span style="color: #D4D4D4">}</span></code></div>`
+<span style="color: #D4D4D4">}</span></code><a href='https://www.typescriptlang.org/play/#code/MYewdgzgLgBArhApgJwjAvDA2gbxmAQwFtEAuGAIgEEALEgEwpgF8AaGPQk8igcUSJECTNh3zEylAFLgRAXQDcAKCWhIsAFbgM8JKgB0AMwCWYegApzcAJQYAfPH1dEGdJgpawFa8qXHDMOaetjhKMDBqECAANoj60SAA5kHg1krMMIjRSBxhMFA0yCAA7viIpQCiyEXI5gDkAMIgcNH0+CCwJma6KNKydWnMSkA'>Try</a></div>`
 
 export const CfaExample = () => <pre className='shiki twoslash' dangerouslySetInnerHTML={{ __html: innerHTML }} />

packages/typescriptlang-org/src/components/index/twoslash/generated/interface.tsx

@@ -11,7 +11,7 @@ const innerHTML = `<div class="language-id">tsx</div><div class='code-container'
 <span style="color: #569CD6">function</span><span style="color: #D4D4D4"> <data-lsp lsp='function updateUser(id: number, update: Partial&amp;lt;User>): void'>updateUser</data-lsp>(<data-lsp lsp='(parameter) id: number'>id</data-lsp>: number, <data-lsp lsp='(parameter) update: Partial&amp;lt;User>'>update</data-lsp>: <data-lsp lsp='type Partial&amp;lt;T> = { [P in keyof T]?: T[P] | undefined; }'>Partial</data-lsp>&lt;<data-lsp lsp='interface User'>User</data-lsp>>) {</span>
 <span style="color: #D4D4D4">  </span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> <data-lsp lsp='const user: User'>user</data-lsp> = <data-lsp lsp='function getUser(id: number): User'>getUser</data-lsp>(<data-lsp lsp='(parameter) id: number'>id</data-lsp>)</span>
 <span style="color: #D4D4D4">  </span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> <data-lsp lsp='const newUser: {&amp;#13;    id: number;&amp;#13;    firstName: string;&amp;#13;    lastName: string;&amp;#13;    role: string;&amp;#13;}'>newUser</data-lsp> = {...<data-lsp lsp='const user: User'>user</data-lsp>, ...<data-lsp lsp='(parameter) update: Partial&amp;lt;User>'>update</data-lsp>}  </span>
-<span style="color: #D4D4D4">  <data-lsp lsp='function saveUser(id: number, user: User): User'>saveUser</data-lsp>(<data-lsp lsp='(parameter) id: number'>id</data-lsp>, <data-lsp lsp='const user: User'>user</data-lsp>)</span>
-<span style="color: #D4D4D4">}</span></code></div>`
+<span style="color: #D4D4D4">  <data-lsp lsp='function saveUser(id: number, user: User): User'>saveUser</data-lsp>(<data-lsp lsp='(parameter) id: number'>id</data-lsp>, <data-lsp lsp='const newUser: {&amp;#13;    id: number;&amp;#13;    firstName: string;&amp;#13;    lastName: string;&amp;#13;    role: string;&amp;#13;}'>newUser</data-lsp>)</span>
+<span style="color: #D4D4D4">}</span></code><a href='https://www.typescriptlang.org/play/#code/PQKhAIHsDsFNzMAUAE1gYwDYEMBO8AzAV2nQBcBLGcAc1jIFUBnWXACgpQC5xoiBbAEasAlD2askoCGQDukBCGRoseQiXJVo4JtgBusCe048+Q1gBpwRFrnG2x4I1ODgAtB-REyHt0grQZKwE2OjwRuAA3kjg4Ca8AsK4MeAEFLhMZABy2PywPJm4ATQpOJk5eQVkRdAlsbiQmPk61cVIAL5ISMSklNREAA4o2EFGHNwJ5rhWg8NBPAAKeJTYmAA8RgB8IlEp6DCZ1rbgALy09GOcInsHZLywshFnkQB0bzaW4G8vsyOw7bEUroDJcUFY4I8HB0kEA'>Try</a></div>`
 
 export const InterfaceExample = () => <pre className='shiki twoslash' dangerouslySetInnerHTML={{ __html: innerHTML }} />

packages/typescriptlang-org/src/components/index/twoslash/generated/react.tsx

@@ -12,6 +12,6 @@ const innerHTML = `<div class="language-id">tsx</div><div class='code-container'
 <span style="color: #569CD6">export</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> <data-lsp lsp='const UserThumbnail: (props: UserThumbnailProps) => JSX.Element'>UserThumbnail</data-lsp> = (<data-lsp lsp='(parameter) props: UserThumbnailProps'>props</data-lsp>: <data-lsp lsp='interface UserThumbnailProps'>UserThumbnailProps</data-lsp>) </span><span style="color: #569CD6">=&gt;</span>
 <span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #569CD6"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&amp;lt;React.AnchorHTMLAttributes&amp;lt;HTMLAnchorElement>, HTMLAnchorElement>'>a</data-lsp></span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE"><data-lsp lsp='(JSX attribute) React.AnchorHTMLAttributes&amp;lt;HTMLAnchorElement>.href?: string | undefined'>href</data-lsp></span><span style="color: #D4D4D4">=</span><span style="color: #569CD6">{</span><span style="color: #D4D4D4"><data-lsp lsp='(parameter) props: UserThumbnailProps'>props</data-lsp>.<data-lsp lsp='(property) UserThumbnailProps.url: string'>url</data-lsp></span><span style="color: #569CD6">}</span><span style="color: #808080">&gt;</span>
 <span style="color: #D4D4D4">    </span><span style="color: #808080">&lt;</span><span style="color: #569CD6"><data-lsp lsp='(property) JSX.IntrinsicElements.img: React.DetailedHTMLProps&amp;lt;React.ImgHTMLAttributes&amp;lt;HTMLImageElement>, HTMLImageElement>'>img</data-lsp></span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE"><data-lsp lsp='(JSX attribute) React.ImgHTMLAttributes&amp;lt;HTMLImageElement>.src?: string | undefined'>src</data-lsp></span><span style="color: #D4D4D4">=</span><span style="color: #569CD6">{</span><span style="color: #D4D4D4"><data-lsp lsp='(parameter) props: UserThumbnailProps'>props</data-lsp>.<data-lsp lsp='(property) UserThumbnailProps.img: string'>img</data-lsp></span><span style="color: #569CD6">}</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE"><data-lsp lsp='(JSX attribute) React.ImgHTMLAttributes&amp;lt;HTMLImageElement>.alt?: string | undefined'>alt</data-lsp></span><span style="color: #D4D4D4">=</span><span style="color: #569CD6">{</span><span style="color: #D4D4D4"><data-lsp lsp='(parameter) props: UserThumbnailProps'>props</data-lsp>.<data-lsp lsp='(property) UserThumbnailProps.alt: string'>alt</data-lsp></span><span style="color: #569CD6">}</span><span style="color: #D4D4D4"> </span><span style="color: #808080">/&gt;</span>
-<span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;/</span><span style="color: #569CD6"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&amp;lt;React.AnchorHTMLAttributes&amp;lt;HTMLAnchorElement>, HTMLAnchorElement>'>a</data-lsp></span><span style="color: #808080">&gt;</span></code></div>`
+<span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;/</span><span style="color: #569CD6"><data-lsp lsp='(property) JSX.IntrinsicElements.a: React.DetailedHTMLProps&amp;lt;React.AnchorHTMLAttributes&amp;lt;HTMLAnchorElement>, HTMLAnchorElement>'>a</data-lsp></span><span style="color: #808080">&gt;</span></code><a href='https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdwAdjFlAXlnAKqpsAqACwCuIAEZNkwADYAFYmHQBvOnDigA5gC44qGFGYb6a5NJg69BpkdVxhUaRf2H6AXwZYAHpFhxcEJj0ePighUQkpaTgAXjgACjAFVB1eARFxSRl5CEUAShiAPlsAHmQ4QUoCaKVEnNQAOntpVyK1NWLNXShcatrFes1XFDNepPrTGCGAela4YqnkIqA'>Try</a></div>`
 
 export const ReactExample = () => <pre className='shiki twoslash' dangerouslySetInnerHTML={{ __html: innerHTML }} />