// ^? to highlight how inference gives different results at different locations\",\n code: `// @noImplicitAny: false\n\ntype Entity = {\n someDate: Date | null;\n} & ({ id: string; } | { id: number; })\n\ntype RowRendererMeta// @[option] comments inside the sample.\n// @strict: true or // @strict: false.: true to get the same behavior.// @target: ES2015// @target: 4// @types: ['jest']// @${opt.id}// @filename: [path].\"\n )\n\n ds.code(\n `\n// @showEmit\n// @filename: index.ts\nimport {pi} from \"./utils\"\nconsole.log(pi)\n\n// @filename: utils.ts\nexport const pi = \"3.14\"\n`.trim()\n )\n\n const button = document.createElement(\"button\")\n button.textContent = \"See an Example\"\n button.onclick = () =>\n sandbox.setText(\n `\n// @filename: service.ts\nexport type Service = {\n id: string\n display: string\n}\n\n// @filename: app.ts\nimport type { Service } from \"./service\";\n// ^ - this error is OK\n\nconst myServices: Service[] = [\n { id: \"launch\", display: \"Launch\" },\n { id: \"lunch\", disply: \"Lunch\" },\n// ^ - this error is real but hidden\n// you can see it in 'Assertions'\n]\n `.trim()\n )\n container.appendChild(button)\n },\n },\n {\n name: \"Queries\",\n content: (sandbox, container, ds) => {\n ds.p(\n \"Twoslash supports making queries for what the type is at a particular location of code. It also is a specially crafted comment. \"\n )\n ds.code(\n `\nconst myExample = {\n hello: \"world\"\n}\n\nmyExample.hello;\n// ^?\n `.trim()\n )\n\n ds.p(\n \"You can use as many as you want of these, but you can only have one per line.\"\n )\n const button = document.createElement(\"button\")\n button.textContent = \"See an Example\"\n button.onclick = () =>\n sandbox.setText(\n `\nconst button = document.createElement(\"button\");\nbutton.textContent = \"See an Example\";\n\nbutton.onclick = () => {\n console.log(\"Example has been clicked\");\n button.disabled = true;\n// ^?\n}\n\ndocument.body.appendChild(button);\n// ^?\n `.trim()\n )\n container.appendChild(button)\n\n ds.p(\n \"The repro testing system will use these queries as an indicator of what has changed, so if you highlight a bug in inference then when it is fixed and the type has changed it will be raised.\"\n )\n },\n },\n {\n name: \"Emitter\",\n content: (sandbox, container, ds) => {\n ds.p(\n `\nThere are ways to have your test repro be about the output of running TypeScript. There are two comment types which can be used to highlight these files.\n// @showEmit is a shortcut for showing the .js file for a single file code sample:\n`.trim()\n )\n ds.code(\n `\n// @showEmit\nexport const helloWorld: string = \"Hi\"\n`.trim()\n )\n ds.p(\n `The long-form is // @showEmittedFile: [filename] which allows for showing any emitted file`\n )\n ds.code(\n `\n// @declaration: true\n// @showEmit\n// @showEmittedFile: index.d.ts\n\nexport function getStringLength(value: string) {\n return value.length\n}\n`.trim()\n )\n ds.p(\"Multi-file seems to be buggy ATM, but this should work eventually:\")\n ds.code(\n `\n// @showEmit\n// @showEmittedFile: b.js\n\n// @filename: a.ts\nexport const helloWorld: string = \"Hi\"\n\n// @filename: b.ts\nconst abc = \"\"\n`.trim()\n )\n },\n },\n {\n name: \"Defaults\",\n content: (sandbox, container, ds) => {\n examples.forEach(e => {\n ds.p(\n \"The twoslash compiler only has a few changes from the default empty TSConfig \"\n )\n ds.code(`\n const defaultCompilerOptions: CompilerOptions = {\n strict: true,\n target: ts.ScriptTarget.ES2016,\n allowJs: true\n }\n`)\n })\n ds.p(\n \"You may need to undo strict for some samples, but the others shouldn't affect most code repros.\"\n )\n },\n },\n {\n name: \"Examples\",\n content: (sandbox, container, ds) => {\n ds.p(\n \"Note: this section is tricky to document... These bugs may have been fixed since the docs were created. Consider theses as ideas in how to make repros rather than useful bug reproductions.\"\n )\n examples.forEach(e => {\n // prettier-ignore\n ds.subtitle(e.name + ` ${e.issue}`)\n ds.p(e.blurb)\n const button = document.createElement(\"button\")\n button.textContent = \"Show example\"\n button.onclick = () => sandbox.setText(e.code)\n container.appendChild(button)\n })\n },\n },\n]\n\nexport const workbenchReferencePlugin: Factory = (i, utils) => {\n return {\n id: \"ref\",\n displayName: \"Docs\",\n didMount: (sandbox, container) => {\n const ds = utils.createDesignSystem(container)\n\n const tabContainer = document.createElement(\"div\")\n const tabBar = ds.createTabBar()\n const tabs: HTMLElement[] = []\n\n reference.forEach((r, i) => {\n const tab = ds.createTabButton(r.name)\n tabs.push(tab)\n tab.onclick = () => {\n tabs.forEach(t => t.classList.remove(\"active\"))\n tab.classList.add(\"active\")\n\n const ds = utils.createDesignSystem(tabContainer)\n ds.clear()\n r.content(sandbox, tabContainer, ds)\n }\n tabBar.appendChild(tab)\n\n if (i === 0) tab.onclick({} as any)\n })\n\n container.appendChild(tabBar)\n container.appendChild(tabContainer)\n },\n }\n}\n","import React, { useEffect } from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { Layout } from \"../../components/layout\"\nimport { withPrefix, graphql } from \"gatsby\"\nimport { debounce } from 'ts-debounce';\n\nimport \"../../templates/play.scss\"\n\nimport { useIntl } from \"react-intl\";\nimport { createInternational } from \"../../lib/createInternational\"\nimport { headCopy } from \"../../copy/en/head-seo\"\nimport { playCopy } from \"../../copy/en/playground\"\n\nimport { Intl } from \"../../components/Intl\"\n\nimport { workbenchHelpPlugin as workbenchAboutPlugin } from \"../../components/workbench/plugins/about\"\nimport { workbenchDebugPlugin } from \"../../components/workbench/plugins/debug\"\nimport { workbenchAssertionsPlugin } from \"../../components/workbench/plugins/assertions\"\nimport { workbenchMarkdownPlugin } from \"../../components/workbench/plugins/markdown\"\nimport { workbenchReferencePlugin } from \"../../components/workbench/plugins/docs\"\nimport { createDefaultMapFromCDN } from \"@typescript/vfs\"\nimport { twoslasher, TwoSlashReturn } from \"@typescript/twoslash\"\nimport { getPlaygroundUrls } from \"../../lib/playgroundURLs\";\n\ntype TwoSlashReturns = import(\"@typescript/twoslash\").TwoSlashReturn\n\ntype Props = {}\n\nconst Play: React.FC{i(\"play_downloading_typescript\")}
\n