--- description: Show TypeScript and auto-transpiled JavaScript tabs. title: TypeScript example image: https://developers.cloudflare.com/style-guide/build-the-page/components/typescript-example/og.png?v=90f6b67264c3fdfd --- [Skip to content](#main-content) > Documentation Index > Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt > Use this file to discover all available pages before exploring further. # TypeScript example Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/typescript-example/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/) The `TypeScriptExample` component is used `1553` times on `374` pages.

See all examples of pages that use TypeScriptExample

## TypeScript examples The `TypeScriptExample` component uses [`ts-blank-space` ↗︎](https://github.com/bloomberg/ts-blank-space) to remove TypeScript-specific syntax from your example and provide a JavaScript tab. This reduces maintenance burden by only having a single example to maintain. Note Some TypeScript syntax influences runtime behaviour, and cannot be stripped. Please refer to the [Unsupported Syntax ↗︎](https://github.com/bloomberg/ts-blank-space?tab=readme-ov-file#unsupported-syntax) section of the project's README. Caution Code blocks are typically configured with options on the opening fence, like so: ````mdx ```ts collapse={1-2} // ... ``` ```` These cannot be extracted by `TypeScriptExample` so they must be moved to the [`code`](#code) prop. ````mdx ```ts // ... ``` ```` ## Component ````mdx import { TypeScriptExample } from "~/components"; ```ts // comment to demonstrate // collapsible sections interface Environment { KV: KVNamespace; } export default { async fetch(req, env, ctx): Promise { if (req !== "POST") { return new Response("Method Not Allowed", { status: 405, headers: { "Allow": "POST" } }); } await env.KV.put("foo", "bar"); return new Response(); } } satisfies ExportedHandler ``` ```` ## `` Props ### `filename` **type:** `string` An optional filename, ending in `.ts`. `.ts` will be replaced by `.js` for the JavaScript tab. ### `playground` **type:** `boolean` If set to `true`, a [`Run Worker in Playground`](https://developers.cloudflare.com/style-guide/style-and-grammar/formatting/code-block-guidelines/#workers-playground) button will appear on the JavaScript tab. ### `code` **type**: `object` Props to pass to the [Astro `Code` component ↗︎](https://docs.astro.build/en/reference/api-reference/#code-). These props will apply to both code blocks and so options like `collapse` may not work as expected, as lines may be removed from the TypeScript code. Was this helpful? YesNo ## On this page [![](https://developers.cloudflare.com/_astro/logo.te5VL_aD.svg)Docs](https://developers.cloudflare.com/) ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/typescript-example/#page","headline":"TypeScript example","description":"Show TypeScript and auto-transpiled JavaScript tabs.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/typescript-example/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/typescript-example/og.png?v=90f6b67264c3fdfd","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}} ```